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. uva146-枚举,排列

    题意: 输入最多150个小写字母,在字典序增大的方向,求下一个排列是什么. 模拟枚举,最后一个字符是递归的最后一层(n层),那么把它弹出栈(还剩n-1层),如果n-1层的字符比第n层小,说明把n层的字 ...

  2. XMLTransformProvider

    XMLTransformProvider1 XMLTransformProvider1.TransformRead.SourceXmlDocument := XMLDoc.GetDOMDocument ...

  3. MySQL设置快速删除

    SET FOREIGN_KEY_CHECKS=0; DROP DATABASE ... SET FOREIGN_KEY_CHECKS=1;

  4. 在JSP中,使用get提交方式出现乱码时,为什么要使用new String(s.getBytes("iso-8859-1"),"utf-8");?

    最近在学JSP,在学习处理get方式提交数据出现乱码问题的时候,对其中的一个解决方法new String(s.getBytes("iso-8859-1"),"utf-8& ...

  5. C++中怎么创建类对象

    在C++里,有两种方法创建对象:方法一:ClassName object(param);这样就声明了一个ClassName类型的object对象,C++会为它分配足够的存放对象所有成员的存储空间.注意 ...

  6. oracle vm中的xp添加共享文件夹

      接着就可以在虚拟的电脑系统里面打开我们的共享文件夹,在桌面找到”网络邻居“,双击打开   我们需要通过”添加一个网络邻居“来加载我们刚才添加的”共享文件夹“,根据向导一步步执行   然后点击”浏览 ...

  7. How to Pronounce the Word SOMETHING

    How to Pronounce the Word SOMETHING Share Tweet Share Something tells me you’re going to like this v ...

  8. 吴裕雄 python神经网络 水果图片识别(1)

    import osimport numpy as npimport matplotlib.pyplot as pltfrom skimage import color,data,transform,i ...

  9. chm 文件生成器

    1.看云:官网 https://www.kancloud.cn/price 价格如下:

  10. codeblocks c++11 pthread

    支持c++11: setting->compiler-> 打上勾即可.(如果没有c++11,那么请更新codeblocks最新版.) pthread_create错误: 由于pthread ...