bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验 (解决办法)
问题描述:bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段。so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交
问题解决:
根据应用场景分析,当日期选择插件关闭时,期望能够触发校验。所以使用bootstrap-datepicker的hide方法。当日期选择框关闭时,执行刷新校验。
代码如下:
js:
/* 加载时间选择插件 */
$("#f_workr_remind_date").datepicker({
todayBtn : "linked",
autoclose : true,
todayHighlight : true,
endDate : new Date()
}).on('hide',function(e) { //当日期选择框关闭时,执行刷新校验
$('#project_form').data('bootstrapValidator').updateStatus('f_workr_remind_date', 'NOT_VALIDATED',null).validateField('f_workr_remind_date');
});
html:
<form id="project_form" class="form-horizontal">
<span class="input-group-addon"><span class="fa fa-calendar"> </span>
<input type="text" name="f_workr_remind_date" id="f_workr_remind_date" class="form-control datepicker" placeholder="提醒时间" value="" />
</form>
bootstrap-datetimepicker 的使用
css:
<link rel="stylesheet" type="text/css" href="../js/plugins/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" type="text/css" href="../js/plugins/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" />
js:
<script type="text/javascript" src="../js/plugins/bootstrap/bootstrap-timepicker.min.js"></script>
<script type="text/javascript" src="../js/plugins/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../js/plugins/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/plugins/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
html:
<div class="row">
<label class="col-md-3 control-label">记录提醒时间</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
<input type="text" name="f_workr_remind_date" id="f_workr_remind_date" class="form-control datepickertime" placeholder="提醒时间" value="" />
</div>
<span class="help-block">*必填项</span>
</div>
</div>
js:
$('#f_workr_remind_date').datetimepicker({
useCurrent: true,
todayBtn: 1,
autoclose: 1,
}).on('hide',function(e) { //当日期选择框关闭时,执行刷新校验
$('#project_form').data('bootstrapValidator').updateStatus('f_workr_remind_date', 'NOT_VALIDATED',null).validateField('f_workr_remind_date');
});