在工作中学习到的一种插件 上网查询之后发现
在bootstrap中的时间选择器有两种：dateTimePicker和dateRangePicker
HTML
<div id="reportrange" class="btn default" style="font-size:12px;">
<i class="fa fa-calendar"></i>
<span> </span>
<b class="fa fa-angle-down"></b>
</div>
js
/**
* [加载日期插件]
*/
$(‘#reportrange‘).daterangepicker({
opens: ‘left‘, //日期选择框弹出的位置
startDate: moment().subtract(‘days‘, 29),//开始时间
endDate: moment(), //结束时间
minDate: ‘01/01/2012‘, //最小时间
maxDate: ‘12/31/2024‘, //最大时间
dateLimit: {
days: 60 //起止时间的最大间隔
},
showDropdowns: true,
showWeekNumbers: true, //是否显示第几周
timePicker: false, //是否现在小时和分钟
timePickerIncrement: 1, //时间的增量，单位为分钟
timePicker12Hour: true, //是否使用12小时制来显示时间
ranges: {
‘<?php echo lang(‘today‘);?>‘ : [moment(), moment()], //今天
‘<?php echo lang(‘yestoday‘);?>‘: [moment().subtract(‘days‘, 1), moment().subtract(‘days‘, 1)], //昨天
‘<?php echo lang(‘last_seven_days‘);?>‘: [moment().subtract(‘days‘, 6), moment()], //最近7天
‘<?php echo lang(‘last_month‘);?>‘: [moment().subtract(‘days‘, 29), moment()], //最近30天
},
buttonClasses: [‘btn‘],
applyClass: ‘green btn-sm‘,
cancelClass: ‘default btn-sm‘,
format: ‘YYYY/MM/DD‘, //控件中from和to 显示的日期格式
separator: ‘ to ‘,
locale: {
applyLabel: ‘<?php echo lang(‘apply‘);?>‘, //确定
cancelLabel: ‘<?php echo lang(‘cancel‘);?>‘, //取消
fromLabel: ‘From‘, //起始时间
toLabel: ‘To‘, //结束时间
customRangeLabel: ‘<?php echo lang(‘customize‘);?>‘, //自定义
daysOfWeek: [‘Su‘, ‘Mo‘, ‘Tu‘, ‘We‘, ‘Th‘, ‘Fr‘, ‘Sa‘],
monthNames: [‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘, ‘8‘, ‘9‘, ‘10‘, ‘11‘, ‘12‘],
firstDay: 1
}
},
function (start, end) { //格式化日期显示框
$(‘#reportrange span‘).html(start.format(‘YYYY-MM-DD‘) + ‘ ~ ‘ + end.format(‘YYYY-MM-DD‘));
stime = start.format(‘YYYY-MM-DD‘);
etime = end.format(‘YYYY-MM-DD‘);
}
);
$(‘#reportrange span‘).html(moment().subtract(‘days‘, 29).format(‘YYYY-MM-DD‘) + ‘ ~ ‘ + moment().format(‘YYYY-MM-DD‘)); //页面上第一现在的内容
/**
* [选择自定义时间] 触发
*/
$(‘#reportrange‘).on(‘apply.daterangepicker‘, function()
{
stime = stime.replace(/-/g, ‘/‘);
etime = etime.replace(/-/g, ‘/‘);
stimestamp = new Date(stime).getTime() / 1000;
etimestamp = new Date(etime).getTime() / 1000;
DrawChart(stimestamp, etimestamp);//得到数据开始进行你下一步的操作
});