BootStrapDatePicker时间选择器--Tango
2017-10-24 23:52
281 查看
团队中缺少前端开发人员,作为非专业前端,鸭子硬上架摸索了一统,总结一下,受用以后,BootStrap时间选择器的使用;
踩过的坑:
js对时间选择器赋值,结果开始时间和结束时间的onchange事件失效,仅鼠标在其他处单击后事件才触发;
解决方案为:js赋值操作后,直接为开始时间 触发input事件;
代码:$('#starttime').trigger(‘input’);
css和js资源引入
踩过的坑:
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>
相关文章推荐
- angular ui-bootstrap datepicker第二次点击没有显示时间选择 解决方案
- Bootstrap-daterangepicker(时间范围选择器使用及汉化)
- Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
- bootstrap-datepicker限定可选时间范围 一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,
- Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
- bootstrap datepicker时间插件显示位置不对
- bootstrap的datepicker在选择日期后调用某个方法
- jQuery UI Datepicker的扩展控件Timepicker实现时间选择
- bootstrap-datepicker限定可选时间范围
- android中的ProgressDialog(进度),DatePickerDialog(日期选择)与TimePickerDialog(时间选择)
- bootstrap datatimepicker 时间选择插件---精确到时分秒
- bootstrap之双日历时间段选择控件—daterangepicker
- bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
- 选择时间日历控件DatePickerDialog实现(从外包项目中挖出来整理的)
- bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
- 日期和时间选择器(DatePicker与TimePicker的用法)
- Android中DatePicker时间选择器
- 时间选择器,选择日期DatePicker
- bootstrap的datepicker在选择日期后调用某个方法
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)