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');
});
 

bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验的更多相关文章

  1. VS2010 使用时选择代码或双击时出错,点击窗口按钮后VS自动重启问题

    VS2010 使用时选择代码或双击时出错崩溃,点击窗口按钮后VS自动重启问题 下载补丁,打上补丁之后,重启电脑,解决了问题. WindowsXP的下载地址:Windows XP 更新程序 (KB971 ...

  2. bootstrap的datepicker在选择日期后调用某个方法

    bootstrap的datepicker在选择日期后调用某个方法 2016-11-08 15:14 1311人阅读 评论(0) 收藏 举报 首先感谢网易LOFTER博主Ivy的博客,我才顿悟了问题所在 ...

  3. 使用WdatePicker日期组件时,选择日期后,执行某个方法

    WdatePicker({onpicked:function(){alert(123);},dateFmt:'yyyy年MM月dd日',maxDate:'%y-%M-%d'}) 1.onpicked: ...

  4. 解决vue中使用laydate.js选择日期后再修改其他model时日期会被清空问题

    首先描述一下问题,下图中均绑定v-model,例如先选择出生开始时间,然后当再选择地区或其他选项时该时间就会被清空 首先看一下我这边开始的默认值,开始我设置都为空 当我选择如下图的生日开始时间与结束时 ...

  5. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

  6. summernote 文本编辑器使用时,选择上传图片、链接、录像时,弹出的对话框被遮挡住

    更多内容推荐微信公众号,欢迎关注: 即问题如下链接内的情况: http://bbs.csdn.net/topics/392004332 这个一般属于CSS中样式出现了问题,可以在点开的时候,F12查看 ...

  7. WdatePicker日期控件使用与值获取,以及选择日期完毕触发事件

    踩过无数坑,调试了很长时间,写出适合自己需求的方法需求:没有查询按钮,要求选择日期后自动触发查询事件(只有日期选择完成后才触发), 解决方案:代码如下:检索开始时间: <input type=& ...

  8. jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题

    1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题下载地址: -->下载后的文件 jquery- ...

  9. 小白学数据分析----->移动游戏的使用时长分析

    写下该文章,是因为之前看到了几款游戏一个典型的玩家刺激活动,在<多塔联盟>,<萌江湖>等多款游戏的设计中都有体现,如下图所示: 这个功能点的设计,今天在这里讲的更多的还是跟数据 ...

随机推荐

  1. Django高级admin续

    ModelAdmin对象 ModelAdmin类是模型在Admin界面中的表示形式 定义:定义一个类,继承于admin.ModelAdmin,注册模型时使用这个类 class HeroAdmin(ad ...

  2. IPv4报文分片

    1:为什么需要分片 每个数据链路层协议都有自己的帧格式,在这个格式中有一个字段是"数据字段最大长度"(MTU,最大传输单元),当数据报被封装成帧时,数据报的总长度必须小于这个最大长 ...

  3. 1_Utilities__deviceQuery + 1_Utilities__deviceQueryDrv + 1_Utilities__topologyQuery

    使用 Runtime API 和 Driver API 检测设备相关属性.并检测了设备之间的拓扑以及主机与设备之间的拓扑(是否支持跨设备原子操作). ▶ 源代码:Runtime API #includ ...

  4. 11-11SQLserver基础--数据库之触发器

    触发器 意义:本质上就是一个特殊的存储过程,只不过不是通过exec来调用执行,而是通过增删改数据库中的操作来执行. 作用:1.将关联的表之间的数据增删改        2.触发器可以操作视图,在视图上 ...

  5. 使用Apache POI处理excel公式不更新的解决办法

    使用poi更新excel时,如果单元格A设置了公式,当其依赖的其他单元格填充了值之后,导出的excel中A仍为公式而不是自动计算的值,如图: Paste_Image.png 分值小计没有更新成计算结果 ...

  6. MYSQL中利用select查询某字段中包含以逗号分隔的字符串的记录方法

    首先我们建立一张带有逗号分隔的字符串. CREATE TABLE test(id int(6) NOT NULL AUTO_INCREMENT,PRIMARY KEY (id),pname VARCH ...

  7. Yii-CHtmlPurifier- 净化器的使用(yii过滤不良代码)

    1. 在控制器中使用: public function actionCreate() { $model=new News; $purifier = new CHtmlPurifier(); $puri ...

  8. UI5-文档-4.23-Custom Formatters

    如果希望对数据模型的属性进行更复杂的格式化逻辑,还可以编写自定义格式化函数.现在我们将使用自定义格式化程序添加本地化状态,因为数据模型中的状态是一种相当技术性的格式. Preview A status ...

  9. 协变(covariance),逆变(contravariance)与不变(invariance)

    协变,逆变与不变 能在使用父类型的场景中改用子类型的被称为协变. 能在使用子类型的场景中改用父类型的被称为逆变. 不能做到以上两点的被称为不变. 以上的场景通常包括数组,继承和泛型. 协变逆变与泛型( ...

  10. Musle比对软件

    下载地址:http://www.drive5.com/muscle/downloads.htm 1)运行: win+R然后输入cmd,然后cd进入muscle目录 2) 比对: muscle3.8.3 ...