bootstrap日期控件问题(双日期、清空等问题解决)
2017-04-19 10:14
585 查看
bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架。在项目开发中,我们使用它的日期控件确实遇到了一些问题:
1.日期控件后面两个图标点击触发失效
2.双日期关联问题
3.双日期清空时,之前输入日期关联仍然有效
4.输入年月
5.图标不显示(这个直接在引入图标的文件里搜url地址,修改地址就可以解决)
下面的代码都会一一解决。
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bootstrap.css" rel="external nofollow" type="text/css" /> <link rel="stylesheet" href="bootstrap-datetimepicker.css" rel="external nofollow" type="text/css" /> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script src="bootstrap.js" type="text/javascript" ></script> <script src="bootstrap-datetimepicker.js" type="text/javascript" ></script> <script src="bootstrap-datetimepicker.zh-CN.js" type="text/javascript" ></script> <title>bootstrap日期</title> <style> </style> <script type="text/javascript"> $(function(){ //输入开始日期和结束日期 //定位div上的id,不是input上id,否则后面两个小图标会失效 $("#startdiv").datetimepicker({ pickerPosition : "bottom-left", language : 'zh-CN', format : "yyyy-mm-dd", weekStart : 1, todayBtn : 1, autoclose : 1, todayHighlight : 1, startView : 2, minView : 2, forceParse : 0 }); $("#endDiv").datetimepicker({ pickerPosition : "bottom-left", language : 'zh-CN', format : "yyyy-mm-dd", weekStart : 1, todayBtn : 1, autoclose : 1, todayHighlight : 1, startView : 2, minView : 2, forceParse : 0 }); //输入年月 $("#birthMonth").datetimepicker({ language: 'zh-CN', format: 'yyyy-mm', autoclose: true, // todayBtn: true, 今天提示 startView: 'year', minView:'year', maxView:'decade' }); $('#startdiv').unbind("change"); $('#startdiv').change(function(){ $('#endDiv').datetimepicker('setStartDate', $("#start").val()); }); $('#endDiv').unbind("change"); $('#endDiv').change(function(){ $('#startdiv').datetimepicker('setEndDate', $("#end").val()); }); }); function clearForm(){ $('#start').val(''); $('#end').val(''); //用于解决清空后,前后日期还会关联的问题 $('.input-group-addon:has(span.glyphicon-remove)').click(); } </script> </head> <body> <h1>bootstrap日期控件</h1> <hr/> <div id="startdiv" class="input-group date width100"> <input id="start" name="start" class="form-control" type="text" value="" placeholder="请输入开始日期" readonly="readonly"> <span class="input-group-addon"> <span class="glyphicon glyphicon-remove"></span> </span> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <br> <div id="endDiv" class="input-group date width100"> <input id="end" name="end" class="form-control" type="text" value="" placeholder="请输入结束日期" readonly="readonly"> <span class="input-group-addon"> <span class="glyphicon glyphicon-remove"></span> </span> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <br> <button type="button" class="btn btn-sm btn-warning" id="clear" onclick="clearForm()">清空</button> <hr> <div id="birthMonth" class="input-group date width100"> <input id="birthDay" name="birthDay" class="form-control" type="text" value="" placeholder="请输入出生年月" readonly="readonly"> <span class="input-group-addon"> <span class="glyphicon glyphicon-remove"></span> </span> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </body> </html>
以上所述是小编给大家介绍的bootstrap日期控件问题(双日期、清空等问题解决),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- bootstrap日期控件(双日期、清空等问题解决)
- 关于Bootstrap日期控件datetimepicker被模态框等遮罩在底部的问题及解决办法。
- bootstrap datetimepicker 日期控件清空问题
- bootstrap 模态框日期控件datepicker被遮住问题的解决
- bootstrap 模态框日期控件datepicker被遮住问题的解决
- 解决Bootstrap日期插件Date Range Picker清空的问题
- selenium webdriver如何解决easyui日期控件问题
- extjs 3.4 EditorGridPanel里日期控件在后台获取格式为"2015-10-10T00:00:00"的问题解决
- bootstrap下modal模态框中webuploader控件按钮异常(无法点击)问题解决办法【转】
- 解决"日期控件在ios上点击出现崩溃"的问题
- BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
- 修复bootstrap daterangepicker不能清空日期的问题
- 解决easy ui 1.4datebox控件不能清空的问题
- 在动态插入Easyui datebox控件时,使用$.parser.parse()手工渲染时,解决日期控件原有的值被清除问题
- 【问题解决】BootStrap.css与layDate日期选择样式起冲突的解决办法
- WdatePicker日期选择控件使用时,Internet Explorer无法打开站点,已终止操作”问题的解决
- 解决fixfox下日期控件被拉长的问题
- ASP.NET中TextBox使用Ajax控件显示日期不全的问题解决方法
- WdatePicker日期选择控件使用时,Internet Explorer无法打开站点,已终止操作”问题的解决
- bootstrap-datetimepicker日期插件月份bug问题解决