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. 《http权威指南》读书笔记10

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

  2. [Swift]枚举类型：UIBarButtonItem的24种样式

    UIBarButtonSystemItemFlexibleSpace 可变空白, 在调用的过程中,使用  UIBarButtonSystemItemFlexibleSpace去占位,达到实现规范化的目 ...

  3. JSP内置对象的使用(一)

    JSP九大内置对象是:request.response.session.application.out.pagecontext.config.page.exception. JSP常用的内置对象是:o ...

  4. shell 中let无法使用的原因

    运行 sh    let.sh 时,却显示  let: not found 百度之后知道: /bin/sh指向了dash而不是bash,dash不支持let命令. 解决方法: 法1.使用  bash ...

  5. JavaScript百宝箱

    Js的外部引用 外部文件中不用添加<script>标签,引用书写位置需在使用之前 <script type="text/javascript" src=" ...

  6. C#生成MD5的方法

    ///C#生成MD5的方法 public static string GetMD5(string sDataIn) { MD5CryptoServiceProvider md5 = new MD5Cr ...

  7. 【Python开发】Python中数据分析环境的搭建

    注:无论是任何一门语言,刚开始入门的时候,语言运行环境的搭建都是一件不轻松的事情. Python的运行环境 要运行或写Python代码,就需要Python的运行环境,主要的Python有以下三类: 原 ...

  8. shell脚本--cut命令

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 1.1 选项说明 cut命令将行按指定的分隔符分割成多列,它的 ...

  9. 解读经典《C#高级编程》第七版 Page79-93.对象和类型.Chapter3

    前言 本篇我们继续讲解本章其余的部分:构造函数.只读字段.匿名类型.结构详解.部分类.静态类.Object类.扩展方法,等. 01 类 构造函数 构造函数是一种特殊的方法: 与类同名 没有返回值,甚至 ...

  10. IdentityServer4 中文文档 -15- （快速入门）添加 JavaScript 客户端

    IdentityServer4 中文文档 -15- (快速入门)添加 JavaScript 客户端 原文:http://docs.identityserver.io/en/release/quicks ...