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 相关文章推荐
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
vuex存储token示例
Nov 11 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
vue项目实现多语言切换的思路
Sep 17 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中的MVC模式运用技巧
2007/05/03 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
公司出纳岗位职责
2013/12/07 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
工程采购员岗位职责
2014/03/09 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
车间核算员岗位职责
2014/07/01 职场文书
运动员获奖感言
2014/08/15 职场文书
龙门石窟导游词
2015/02/02 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书