BootStrapDatePicker时间选择器--Tango
来源:互联网 发布:装修设计的软件 编辑:程序博客网 时间:2024/06/10 21:27
团队中缺少前端开发人员,作为非专业前端,鸭子硬上架摸索了一统,总结一下,受用以后,BootStrap时间选择器的使用;
踩过的坑:
js对时间选择器赋值,结果开始时间和结束时间的onchange事件失效,仅鼠标在其他处单击后事件才触发;
解决方案为:js赋值操作后,直接为开始时间 触发input事件;
代码:$('#starttime').trigger(‘input’);
css和js资源引入
<link rel="stylesheet" href="bootstrap.min.css" > <link href="bootstrap-datetimepicker.min.css" rel="stylesheet"> <script type="text/javascript" src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="moment.js"></script> <script src="bootstrap-datetimepicker.min.js"></script>html页面
<div class="container"> <div class="row" style="margin-bottom: 10px;"> <div class="form-inline"> <div class="col-md-4"> <label class="text-success">时间段 </label> <input class="form-control combobox" style="width:170px;" id="selecttime"/> </div> <div class="col-md-4"> <label class="text-success"> 开始时间 <font color='red' align="center">*</font></label> <div class="input-group date"> <input id="starttime" type='text' class="form-control" style="width:170px;"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div class="col-md-4"> <label class="text-success"> 结束时间 <font color='red'>*</font></label> <div class="input-group date"> <input id="endtime" type='text' class="form-control" style="width:170px;" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div></div>控制开始时间和结束时间的脚本
<script type="text/javascript"> //时间选择器 $(function () { var picker1 = $("#starttime").datetimepicker({ format: 'YYYY-MM-DD HH:mm:ss', locale: moment.locale('zh-cn'), //minDate: '2017-7-1' }); var picker2 = $("#endtime").datetimepicker({ format: 'YYYY-MM-DD HH:mm:ss', locale: moment.locale('zh-cn') }); //动态设置最小值 picker1.on('dp.change', function (e) { picker2.data('DateTimePicker').minDate(e.date); }); //动态设置最大值 picker2.on('dp.change', function (e) { picker1.data('DateTimePicker').maxDate(e.date); }); });</script>
阅读全文
0 0
- BootStrapDatePicker时间选择器--Tango
- tango
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器
- 时间选择器和日期选择器
- 数据结构-二叉树的存储结构与遍历
- Keras模型保存和加载的两种方式
- 自己亲测可以使用eclipse 支持64位 1.8jdk window10
- I'm bored with life
- 转:Bit-Map思想与2-BitMap思想
- BootStrapDatePicker时间选择器--Tango
- java并发编程学习(4)
- [LeetCode]罗马数字转为普通数字
- Hadoop表连接
- 3、Determine whether an integer is a palindrome
- docker之Dockerfile
- 欢迎使用CSDN-markdown编辑器
- noip 2010 关押罪犯 二分图
- 求平面集内距离最长 (凸包+旋转卡壳)