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. MySQL：数据库表的空间回收

    1. 表数据的存储方式 表数据既可以存储在共享表空间,也可以时单独的文件.这个行为由参数 innodb_file_per_table 控制: 设置为 OFF 时,表示表数据存储在共享表空间: 设置为 ...

  2. 导出到word

    导出到excel功能会常做,但是导出到word功能很少做,项目遇到,在这里做一下标记. 导出到excel比较容易,excel都有固定格式也模板,但是word需要自己写模板,这里用了freemarker ...

  3. java开发之多线程基础篇

    首先我们先来了解下线程的生命周期上一张图: Java线程具有五中基本状态 新建状态(New):当线程对象对创建后,即进入了新建状态,如:Thread t = new MyThread(); 就绪状态( ...

  4. java mongodb连接配置实践——生产环境最优

    之前百度,google了很多,发现并没有介绍mongodb生产环境如何配置的文章, 当时想参考下都不行, 所以写篇文章,大家可以一块讨论下. 1. MongoClientOptions中的连接池配置: ...

  5. json_decode与json_encode容易被忽视的点

    一.json_decode的使用,json_decode共有4个参数 json_decode ( string $json [, bool $assoc=FALSE [, int $depth= 51 ...

  6. Go语言下的线程模型

    阅读Go并发编程对go语言线程模型的笔记,解释的非常到,好记性不如烂笔头,忘记的时候回来翻一番,在此做下笔记. Go语言的线程实现模型,又3个必知的核心元素,他们支撑起了这个线程实现模型的主要框架: ...

  7. 新装mysql数据库登陆不上去（账号密码正确）

    Open & Edit /etc/my.cnf Add skip-grant-tables under [mysqld] Restart Mysql You should be able to ...

  8. HP-Socket v3.2.2

    ==========================================================================================v3.2.2 upg ...

  9. Java Socket NIO详解(转)

    java选择器(Selector)是用来干嘛的? 2009-01-12 22:21jsptdut | 分类:JAVA相关 | 浏览8901次 如题,不要贴api的,上面的写的我看不懂希望大家能给我个通 ...

  10. nohup & expect & netstat学习

    1.nohup 用途:不挂断地运行命令,通常加上‘&’命令,& 放在命令后面表示设置此进程为后台进程.分为两种情况,如下: 在不使用密码的情况下使用nohup,只需按如下形式即可: n ...