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. Android精通之Handler讲解

    版权声明:未经博主允许不得转载 一:简介 [达叔有道]软件技术人员,时代作者,从 Android 到全栈之路,我相信你也可以!阅读他的文章,会上瘾!You and me, we are family ...

  2. 《http权威指南》读书笔记4

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  3. Kali学习笔记21：缓冲区溢出实验（漏洞发现）

    上一篇文章,我已经做好了缓冲区溢出实验的准备工作: https://www.cnblogs.com/xuyiqing/p/9835561.html 下面就是Kali虚拟机对缓冲区溢出的测试: 已经知道 ...

  4. 长沙IT二十年

    长沙IT二十年 古语有云“近代中国,湖南独撑半边天”,近代中国以来,多少仁人志士从湖湘这片热土出发,在中华大地上,挥毫泼墨,为中华民族的繁荣昌盛做出了不可磨灭的贡献.而今天,随着互联网时代的到来,长沙 ...

  5. 分布式事务之深入理解什么是2PC、3PC及TCC协议？

    导读 在上一篇文章<[分布式事务]基于RocketMQ搭建生产级消息集群?>中给大家介绍了基于RocketMQ如何搭建生产级消息集群.因为本系列文章最终的目的是介绍基于RocketMQ的事 ...

  6. Xamarin.Android 开发中遇到旋转屏幕错误

    错误信息 : System.NotSupportedException: Unable to find the default constructor on type App5.MyFragment. ...

  7. MongoDB加auth权限

    目录 裸奔有多危险 mongoDB修改默认端口号 关闭MongoDB 重启MongoDB 设置密码 吹个牛B,自己的MongoDB裸奔了快半年,从未遭受黑客攻击.也不知道是自己运气好,还是黑客对我的乞 ...

  8. DotNetCore深入了解之一Startup类

    一个典型的ASP.NET Core应用程序会包含Program与Startup两个文件.Program类中有应用程序的入口方法Main,其中的处理逻辑通常是创建一个WebHostBuilder,再生成 ...

  9. 如何用vue-router为每个路由配置各自的title

    传统方法 以前在单页面路由中,就只能在html文件中定一个固定的网站的title.如果想要动态的去修改,需要使用如下的方法. document.title = '这是一个标题'; 这样会让我们做很多无 ...

  10. Netty实现简单HTTP代理服务器

    自上次使用Openresty+Lua+Nginx的来加速自己的网站,用上了比较时髦的技术,感觉算是让自己的网站响应速度达到极限了,直到看到了Netty,公司就是打算用Netty来替代Openresty ...