bootstrap-datepicker 与bootstrapValidator同时使用时，选择日期后，无法正常触发校验

bootstrap-datepicker 与bootstrapValidator同时使用时，选择日期后，无法正常触发校验 (解决办法)

http://blog.csdn.net/biedazhangshu/article/details/51657292（博客网址）

问题描述：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');

});