bootstrap以它优美的外观和丰富的组件，使它成为目前最流行的前端框架。在项目开发中，我们使用它的日期控件确实遇到了一些问题：

　　　　1.日期控件后面两个图标点击触发失效

　　　　2.双日期关联问题

　　　　3.双日期清空时，之前输入日期关联仍然有效

　　　　4.输入年月

　　　　5.图标不显示（这个直接在引入图标的文件里搜url地址，修改地址就可以解决）

　　下面的代码都会一一解决。

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <link rel="stylesheet" href="bootstrap.css" type="text/css" />

 <link rel="stylesheet" href="bootstrap-datetimepicker.css" 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日期控件（双日期、清空等问题解决）的更多相关文章

  1. delphi ----日期控件运用,日期问题，日期时间比较

    一.日期控件 1.DateTimePicker 1)只显示年月 DateMode:dmUpDown format:yyyy-MM 2)将DateTimePicker的Format属性中加入日期格式设成 ...

  2. 为jEasyUi的日期控件添加一个“清空”按钮----通过修改1.4的easyui.min.js

    为 jQuery EasyUI 1.4 的datebox或datetimebox添加一个清空按钮 使用场景:为用户指定了日期的格式,且日期可以为空 修改语言包easyui-lang-zh_CN.js ...

  3. My97日期控件 选择日期区间

    <script language="javascript" type="text/javascript" src="My97DatePicker ...

  4. js日期控件遇到的问题

    一.问题: 在web项目里有很多时候需要使用日期控件来完成相关的功能,但是日期控件的日期格式又和我们的需求不符 那么,就需要我们来自定义日期的格式完成需求 二.解决: 1.取月末: (1)强制取值: ...

  5. Python语言编写脚本时，对日期控件的处理方式

    对日期控件,日期控件的输入控一般是不能手动输入的:把readonly属性去掉就好 其实很简单,我们不去搞时间日期空间,我们把它当成一个普通的input框处理就好了! 但是,很多此类型input框都是禁 ...

  6. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

  7. [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...

  8. [整理]通过AngularJS directive对bootstrap日期控件的的简单包装

    最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...

  9. Bootstrap中datetimepicker日期控件1899年问题解决

    Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...

随机推荐

  1. [Swift]两种线程休眠的方式

    一.线程休眠方式1 [Swift]与[C#]的比较: //C#:需要添加using System.Threading; //线程休眠3000毫秒,即3秒 Thread.Sleep(); //Swift ...

  2. LabVIEW（七）：多态VI

    1.多态VI概念:可以处理多种不同数据类型的VI被称为“多态VI”.多态VI根据输入或输出的 数据类型,再选择调用一个针对这种数据类型实现功能的VI,这些针对某种数据类型实现功能的VI称作“实例VI” ...

  3. Linux 下 安装Python第三方模块工具箱pip，以及用pip安装的方法

    下载文件 wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate 执行安装 python get-pip.py 可以做一个软连 ...

  4. Mac OS Sierra如何打开任何来源

    我们知道在Mac升级到最新的Mac OS Sierra系统之后,随之而来的是第三方应用都无法打开,提示的是无法打开或扔进废纸篓.而在之前的版本系统中,我们知道在系统偏好设置-->安全性与隐私-- ...

  5. H5在WebView上开发小结

    背景 来自我司业务方要求,需开发一款APP.但由于时间限制,只能采取套壳app方式,即原生app内嵌webview展示前端页面.本文主要记述JavaScript与原生app间通信,以及内嵌webvie ...

  6. 插头dp初探

    问题描述 插头dp用于解决一类可基于图连通性递推的问题.用插头来表示轮廓线上的连通性,然后根据连通性与下一位结合讨论进行转移. 表示连通性的方法 与字符串循环最小表示不同,这种方法用于给轮廓线上的联通 ...

  7. Xamarin.Android 上中下布局

    xml代码: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:and ...

  8. 推荐一篇关于java集合的博文，写的很nice

    这也是我自己在网上看到的一篇博文,作者的博文都很棒,以后还会持续为大家推荐好的博文,只要大家不骂我只会转别人的博文,自己不会写,其实这些都是基础,前辈们已经在实践中总结的很细很全了,所以也没必要去总结 ...

  9. Java核心技术及面试指南 集合部分总的面试题归纳以及答案

    3.6.1ArrayList和LinkedList有什么差别?在哪种场景里应当用ArrayList(或LinkedList)? 大家如果学过数据结构,这个问题不难回答:前者是基于数组,数组比较擅长索引 ...

  10. Centos7单机部署ELK+x-pack

    ELK分布式框架作为现在大数据时代分析日志的常为大家使用.现在我们就记录下单机Centos7部署ELK的过程和遇到的问题. 系统要求:Centos7(内核3.5及以上,2核4G) elk版本:6.2. ...