一、时间插件使用方式
1、daterangepicker.js依赖于 Bootstrap 、 jQuery 、 Moment.js 这三个库。页面中必需包含的脚本和样式文件有
<!-- 需要引用的依赖库 -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<!-- 引用 daterangepicker 相关文件-->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
2、html代码如下
<input type="text" class="minDate" placeholder="请选择起始日期">
<input type="text" class="maxDate" placeholder="请选择结束日期">
3、js控制时间范围
<script>
($(function () {
/**
* date时间往后延迟hour个小时和min分钟 的时间
* @param {Object} min 分钟
* @param {Object} hour 小时
* @param {Object} date 日期
*/
function delay(min, hour, date) {
var oldTime=date.getTime();
oldTime += min * 60 * 1000;
oldTime += hour *60 * 60 *1000;
return new Date(oldTime);
}
var endPicker = null;
//开始日期
$('.minDate').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoUpdateInput: false,
timePicker24Hour : true,
timePicker : false,
//minDate:startDate,
maxDate: new Date(),
//drops:"up",
"locale": {
format: 'YYYY-MM-DD HH:mm',
applyLabel: "确定",
cancelLabel: "取消",
resetLabel: "重置",
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
}
}, function (start, end) {
});
//开始日期选择按钮的点击事件监听
$('.minDate').on('apply.daterangepicker', function (ev, picker) {
$('.minDate').val(picker.startDate.format('YYYY-MM-DD '));
//初始化结束日期的空件
if(!endPicker){
$('.maxDate').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoUpdateInput: false,
timePicker24Hour: true,
timePicker: false,
minDate: delay(0,24,new Date($('.minDate').val())),
maxDate: new Date(),
//drops:"up",
"locale": {
format: 'YYYY-MM-DD HH:mm',
applyLabel: "确定",
cancelLabel: "取消",
resetLabel: "重置",
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
}
}, function (start, end, label) {
});
endPicker = $('.maxDate').data('daterangepicker')
}else{
$('.maxDate').val('');
endPicker.setMinDate(delay(0, 24, new Date($('.minDate').val())));
//console.log(delay(0, 24, new Date($('.minDate').val())));
//console.log($('.minDate').val())
// endPicker.setEndDate(delay(0, 24, new Date($('.minDate').val())));
}
});
//结束日期的监听
$('.maxDate').on('apply.daterangepicker', function (ev, picker) {
//console.log("apply:"+picker.startDate.format('YYYY-MM-DD HH:mm'));
$('.maxDate').val(picker.startDate.format('YYYY-MM-DD'));
});
//结束日期的限制
$(".maxDate").click(function () {
var start = $('.minDate').val();
if (!start || start.length == 0) {
alert("请先选择开始时间");
return;
}
});
}));
</script>
5、效果图如下
具体相关使用方法请访问网址 http://bsify.admui.com/daterangepicker/