In the project, date and time range selection must be used to filter data; accurate to year, month, day, hour, minute and second; at first, layui's time and date selection plug-in was used; but the first click on IIE8 reported a setting format error; researched It has not been solved for a long time, but I am sure it is not a problem with layui; because the demo I wrote can run in IE8; it’s just that some codes conflicted in my project environment; so I switched to the bootstrap plug-in daterangepicker; I read a lot of information; combined with the official website I’ve read the document; it’s basically done; I’ll share my summary code with everyone; I hope it will be helpful to beginners using the daterangepicker plug-in.
The summary is divided into four parts: date range selection implementation, date time selection, using two single calendars to implement range selection, using p instead of input to implement date time selection; the following is the code
css Code
<style type="text/css"> body, ul, p, h3, img, input { margin: 0; padding: 0; } .box { display: block; text-align: center; margin: 20px auto; } input { width: 400px; height: 40px; } label { display: inline-block; width: 90px; line-height: 40px; height: 40px; margin: 0; font-weight: normal; font-family: "宋体"; background-color: #ddd; } .pDateSelect{ width: 185px; height: 50px; line-height: 50px; margin:10px auto; border:2px solid #ddd; border-radius: 5px; } </style>
html code:
<!-- 日期时间范围选择代码 --> <p class="box"> <label for="datePicker">双日历</label> <input type="text" name="datePicker" class="datePicker" id="datePicker"> </p> <!-- 日期时间选择代码 --> <p class="box"> <label for="singledatePicker">单日历</label> <input type="text" name="singledatePicker" class="singledatePicker" id="singledatePicker"> </p> <!-- 两个单日历实现日期时间范围选择代码 --> <p class="box"> <label for="from">从</label> <input type="text" name="from" class="from" id="from"> <label for="to">到</label> <input type="text" name="to" class="to" id="to"> </p> <!-- 不使用input,用p实现代码 --> <p class="pDateSelect" id="pDateSelect"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <b class="caret"></b> </p>
js code, corresponding to the four parts of html in top and bottom order
$('input[name="datePicker"]').daterangepicker({ timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 endDate: moment(new Date()), //设置结束器日期 maxDate: moment(new Date()), //设置最大日期 "opens": "center", ranges: { // '今天': [moment(), moment()], '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], '上周': [moment().subtract(6, 'days'), moment()], '前30天': [moment().subtract(29, 'days'), moment()], '本月': [moment().startOf('month'), moment().endOf('month')], '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] }, showWeekNumbers: true, locale: { format: "YYYY-MM-DD HH:mm:ss", //设置显示格式 applyLabel: '确定', //确定按钮文本 cancelLabel: '取消', //取消按钮文本 customRangeLabel: '自定义', daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, function(start, end, label) { timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')]; console.log(timeRangeChange); });
$('input[name="singledatePicker"]').daterangepicker({ "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true, //单日历 showDropdowns: true, //年月份下拉框 timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 maxDate: moment(new Date()), //设置最大日期 "opens": "center", showWeekNumbers: true, locale: { format: "YYYY-MM-DD HH:mm:ss", //设置显示格式 applyLabel: '确定', //确定按钮文本 cancelLabel: '取消', //取消按钮文本 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, function(start) { console.log(start.format('YYYY-MM-DD HH:mm:ss')); });
var minDate = null; var max = null; function fromDate(maxDate) { if(!maxDate){ max = moment(new Date()) }else{ max = maxDate; } $('input[name="from"]').daterangepicker({ "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true, //单日历 showDropdowns: true, //年月份下拉框 timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 // startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 maxDate: max , //设置最大日期 "opens": "center", showWeekNumbers: true, locale: { format: "YYYY-MM-DD HH:mm:ss", //设置显示格式 applyLabel: '确定', //确定按钮文本 cancelLabel: '取消', //取消按钮文本 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, function(s) { toDate(s); }); } fromDate() function toDate(minDate) { $('input[name="to"]').daterangepicker({ "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true, //单日历 showDropdowns: true, //年月份下拉框 timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 // startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 maxDate: moment(new Date()), //设置最大日期 minDate: minDate, "opens": "center", showWeekNumbers: true, locale: { format: "YYYY-MM-DD HH:mm:ss", //设置显示格式 applyLabel: '确定', //确定按钮文本 cancelLabel: '取消', //取消按钮文本 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, function(s) { fromDate(s) }); } toDate();
var start = moment(new Date()); function cb(start) { $('#pDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss')); } $('#pDateSelect').daterangepicker({ "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true, //单日历 showDropdowns: true, //年月份下拉框 // timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 maxDate: moment(new Date()), //设置最大日期 "opens": "center", showWeekNumbers: true, locale: { format: "YYYY-MM-DD HH:mm:ss", //设置显示格式 applyLabel: '确定', //确定按钮文本 cancelLabel: '取消', //取消按钮文本 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, cb); cb(start);
Rendering:
First part:
The second part:
The third part is the two second part groups to achieve the effect of the first part; the principle is After the start date is determined; set the minimum selection date for the end date calendar; after the end date is selected; set the maximum selection date for the start date;
Part 4:
The meaning of the key options has been commented in the code; the imported file css includes bootstrap’s css file; daterangepicker’s css file; js includes jquery’s js; bootstrap’s js; daterangepicker’s js and moment.js;
Remarks:
1 moment.js uses the indexOf() method of the array; but IE8 does not support it; you need to introduce compatible code; the code address is https://developer.mozilla.org/zh-CN /docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf Under polyfill;
2 Under IE8; there is a problem of vertical arrangement of two calendars in the range selection of dual calendars; the solution is to store two The calendar box is set to a fixed width, which is enough to accommodate the p of the two calendars; then set the p of the two calendars to float: left;
3 Official website address; option settings: http://www.daterangepicker .com/#options
Example: http://www.daterangepicker.com/#examples
Related recommendations:
Detailed explanation of picker date and Time picker
vue.js implementation of native ios time selection component development experience
php-datepicker time picker, sql parameter query
The above is the detailed content of About date and time range selection plug-in: daterangepicker usage summary. For more information, please follow other related articles on the PHP Chinese website!