bootstrap日期控件问题(双日期、清空等问题解决)


Posted in Javascript onApril 19, 2017

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日期控件问题(双日期、清空等问题解决),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
JS编程小常识很有用
Nov 26 Javascript
js替代copy(示例代码)
Nov 27 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
angular select 默认值设置方法
Jun 23 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 Javascript
angular-cli修改端口号【angular2】
Apr 19 #Javascript
Angular2自定义分页组件
Apr 19 #Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 #Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 #Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 #Javascript
JavaScript实现前端分页控件
Apr 19 #Javascript
vue动态生成dom并且自动绑定事件
Apr 19 #Javascript
You might like
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
mongodb和php的用法详解
2019/03/25 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
Js apply方法详解
2017/02/16 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
介绍Python中的一些高级编程技巧
2015/04/02 Python
深入理解Python对Json的解析
2017/02/14 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python 实现目录复制的三种小结
2019/12/04 Python
通俗讲解python 装饰器
2020/09/07 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
航空学院求职信
2014/06/11 职场文书
怎么写工作检讨书
2014/11/16 职场文书
2014年妇联工作总结
2014/11/21 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
正则表达式拆分url实例代码
2022/02/24 Java/Android