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. text-overflow:ellipsis ,溢出文本显示省略号

    text-overflow:ellipsis 对溢出文本显示省略号有两个好处, 一是不用通过程序限定字数 二是有利于SEO. 需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友 ...

  2. Activity服务类-6 ManagementService服务类

    一共含有17个方法 // 获取包含了Activiti数据库模式的{表名.行计数}项的映射.Map<String, Long> getTableCount();//获取诸如任务.执行之类的A ...

  3. random内置模块

    import random random.random() #生成0-1的随机浮点数 random.randint(1, 10) #生成1-10的整数 random.randrange(1,10) # ...

  4. as3 名称

    加密算法方式: https://www.cnblogs.com/wei2yi/p/3484170.html AES  (Advanced Encryption Standard) DES(Data E ...

  5. C#连接sqlserver windows 和 sqlserver 身份验证的两种连接字符串

    //sql server 身份验证 连接字符串 private string ConnstrSqlServer = "server=服务器名称;uid=登录名称;pwd=登录密码;datab ...

  6. 从底层谈WebGIS 原理设计与实现(一):开篇

    从底层谈WebGIS 原理设计与实现(一):开篇 作者:naaoveGI…    文章来源:http://www.cnblogs.com/naaoveGIS/    点击数:4773    更新时间: ...

  7. Linux启动提示Kernel panic - not syncing: Attempted to kill init解决办法

    系统类型:CentOS 6.5(x64) 启动提示:Kernel panic - not syncing: Attempted to kill init 解决办法: 系统启动的时候,按下‘e’键进入g ...

  8. Scala语言学习笔记(2)

    表达式,值,变量,代码块,函数,方法 // 表达式 1 + 1 println(1 + 1) // 2 // 值(values)使用 val 关键字声明,带初值时类型可省略. val x = 1 + ...

  9. java-- 的子类/父类构造方法 转

    前提:父类和子类同时都有有参的构造函数和无参构造函数. Java中的子类初始化时初值为空.调用顺序为先调用父类无参构造函数,然后调用子类无参构造函数. java中的子类初始化时初值不为空.调用顺序为先 ...

  10. 吴裕雄 python 数据处理(2)

    import pandas as pd data = pd.read_csv("F:\\python3_pachongAndDatareduce\\data\\pandas data\\hz ...