本文主要是介绍daterangepicker的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
daterangepicker 是基于JQuery的时间日期选择插件，是一个配合 bootstrap 框架使用的时间范围选择 js 组件
引入 js 和 css
<link href="bootstrap.min.css">
<link href="daterangepicker.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="moment.min.js"></script>
<script src="daterangepicker.js"></script>
html
<form id="searchform">
<div class="form-group">
<label>时间：</label>
<input readonly="readonly" class="form-control" id="timeBox"></input>
</div>
</form>
js
var startDate,endDate;
默认时间：
startDate = moment().subtract(6, 'days').hours(0).minutes(0).seconds(0).format('YYYY-MM-DD HH:mm:ss');
endDate = moment().hours(23).minutes(59).seconds(59).format('YYYY-MM-DD HH:mm:ss');
$('#timeBox').daterangepicker({
"startDate": moment().startOf('day'),
"endDate": moment(),
"minDate": '01/01/2017', //最小时间
"maxDate": moment(), //最大时间
"dateLimit": { days: 30 }, //起止时间的最大间隔
"showDropdowns": true,
"showWeekNumbers": false, //是否显示第几周
"timePicker": true, //是否显示小时和分钟
"timePickerIncrement": 60, //时间的增量，单位为分钟
"timePicker12Hour": false, //是否使用12小时制来显示时间
"timePicker": true,
"timePicker24Hour": true,
"timePickerSeconds": true,
"alwaysShowCalendars": true,
"opens: 'right', //日期选择框的弹出位置
"buttonClasses": ['btn btn-default'],
"applyClass": 'btn-small btn-primary blue',
"cancelClass": 'btn-small',
"format": 'YYYY-MM-DD', //控件中from和to 显示的日期格式
"separator": ' - ', //from和to 中间分隔符
"ranges": {
'最近1小时': [moment().subtract('hours',1), moment()],
'今日': [moment().startOf('day'), moment()],
'昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
'最近7日': [moment().subtract('days', 6), moment()],
'最近30日': [moment().subtract('days', 29), moment()]
},
"locale": { // 汉化
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '起始时间',
toLabel: '结束时间',
customRangeLabel: '自定义',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
firstDay: 1
}
}, function (start, end, label) {
$('#timeBox').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
}, function (start, end, label) {
setTimeout(() => {
$('#timeRange').val('');
})
}, function (start, end, label) {
}()).on('apply.daterangepicker', function (ev, picker) {
startDate = picker.startDate.format('YYYY-MM-DD HH:mm:ss');
endDate = picker.endDate.format('YYYY-MM-DD HH:mm:ss');
$('[name="startTime"]').val(startDate);
$('[name="endTime"]').val(endDate);
});
更多可参见官方文档：https://www.datetimepicker.cn/daterangepicker/
这篇关于daterangepicker的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
