Query UI DateRangePicker自定义面板个数
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Query UI DateRangePicker自定义面板个数相关的知识，希望对你有一定的参考价值。
jQuery UI DateRangePicker 最大的特色是可以定义展示的月面板个数，可以直接选择时间范围，
还可以定义快捷日期连接，而bootstarp的Date Range Picker只能展示两个月面板，范围超过两个月的时候需要翻，
jqueryuidataRangeDemo: http://tamble.github.io/jquery-ui-daterangepicker/
bootstarpDate RangeDemo: http://www.daterangepicker.com/
依赖：
- jQuery 1.8.3+
- jQuery UI 1.9.0+ (widget factory, position utility, button, menu, datepicker)
- moment.js 2.3.0+
引入：<link href="xxx/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet">
<link href="xxx/jquery-ui-daterangepicker-0.5.0/jquery.comiseo.daterangepicker.css" rel="stylesheet">
<script src="xxx/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="xxx/moment.js"></script>
<script src="xxx/jquery-ui-daterangepicker-0.5.0/jquery.comiseo.daterangepicker.js"></script>
配置的代码：<script>
var defaults = {
initialText : ‘昨天‘,//默认显示
applyButtonText:"确定",
cancelButtonText:"取消",
clearButtonText:"",
rangeSplitter:" 至 ",
dateFormat: ‘mm-dd‘,//日期格式
altFormat: ‘yy-mm-dd‘,//Submitted date format
datepickerOptions: {//所有参数http://www.css88.com/jquery-ui-api/datepicker/
minDate:-90,//
maxDate: 0,
monthNames: [‘一月‘,‘二月‘,‘三月‘,‘四月‘,‘五月‘,‘六月‘,‘七月‘,‘八月‘,‘九月‘,‘十月‘,‘十一月‘,‘十二月‘],
dayNames: [‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘],
dayNamesShort: [‘周日‘,‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘],
dayNamesMin: [‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘],
numberOfMonths : 4,
onSelect: function(dateText) {//选择日期后执行的操作
}
},
presetRanges: [{
text: ‘今日实时‘,
dateStart: function() { return moment() },
dateEnd: function() { return moment() }
}, {
text: ‘昨天‘,
dateStart: function() { return moment().add(-1,‘days‘) },
dateEnd: function() { return moment().add(-1,‘days‘) }
},{
text: ‘前天‘,
dateStart: function() { return moment().add(-2,‘days‘ ) },
dateEnd: function() { return moment().add(-2,‘days‘) }
}, {
text: ‘最近7天‘,
dateStart: function() { return moment().add(-7,‘days‘) },
dateEnd: function() { return moment().add(-1,‘days‘) }
}, {
text: ‘最近15天‘,
dateStart: function() { return moment().add(-15,‘days‘ ) },
dateEnd: function() { return moment().add(-1,‘days‘) }
}, {
text: ‘最近30天‘,
dateStart: function() { return moment().add(-30,‘days‘) },
dateEnd: function() { return moment().add( -1,‘days‘) }
}
],
change:function (e) {
daysChange();
},
close:function () {
upSelectAUL="";
}
};
/**
*初始化日历控件
* @param options
*/
function initRangeDate(target,opt){
console.log("initRangeDate");
var options = $.extend(true,{},defaults,opt?opt:{});
target.daterangepicker(options);
};
/**
*获得选中的日期
*/
function getSelectDays(target) {
var selectedDay="";
if(!!!target){//指定默认控件
if($("#drp_autogen0").prev().length>0){
target = $("#drp_autogen0").prev();
}
}
if(!!target){
var obj = target.daterangepicker("getRange");
selectedDay = !!obj?formatRange(obj):"";//没有初始值返回 ""
}
if(selectedDay==""){//页面上没有控件或者还没有初始完成，取input值
selectedDay = $("#pastDays").val();
}
return selectedDay;
}
/**
* 设置控件时间
* @param rangeObj 开始时间,结束时间
*/
function setPastDays(target,rangeObj) {
if(!!rangeObj){
var obj={};
if(!!rangeObj.start){
obj.start=moment(rangeObj.start).toDate();
}
if(!!rangeObj.end){
obj.end=moment(rangeObj.end).toDate();
}
target.daterangepicker("setRange", obj);
}
}
/**
* 选中的天数
* 没有选择日期返回d
*/
function selectedDays(d) {
if(!!!getSelectDays()){
return d;
}else{
var jsonObj = JSON.parse(getPastDays());
if(jsonObj.end==jsonObj.start){
return 1;
}
return dateDiff(jsonObj.end,jsonObj.start)
}
}
// formats a date range as JSON
function formatRange(range) {
var dateFormat = defaults.altFormat,
formattedRange = {};
formattedRange.start = $.datepicker.formatDate(dateFormat, range.start);
formattedRange.end = $.datepicker.formatDate(dateFormat, range.end);
return JSON.stringify(formattedRange);
}
</script>
<input id="pastDays" value=‘<%=pastDaysVal%>‘ type="hidden"/>
#pastDays
用来初始化日期控件
$(function(){
//初始日历
initRangeDate($("#pastDays"));
需要重写日期的配置只需再传递一个配置对象
var opt={ icon: "",
applyButtonText:"",
cancelButtonText:"",
datepickerOptions: {
minDate:-7,
maxDate: 0,
numberOfMonths : 1,
onSelect: function(selectedDate) {}
}
}
initRangeDate($(‘#pastDays‘), opt)
这样初始化中的var options = $.extend(true,{},defaults,opt?opt:{});
会用opt对象的属性覆盖defaults 里的默认属性
初始值的问题:在初始控件之前在 需要初始化的input里按格式设置上默认值就好
<input id="pastDays" value="{"start":"2017-06-05","end":"2017-07-11"}" style="display: none;">
实现单日期选择：本身插件选择单日期，选择一个日期—点击确定，但既然是单日期就不必点击确定按钮了，所以利用jquery ui 的datepicker 中的onSelect方法当选择的时候获得选中的值，然后赋给 input,并关闭控件
datepickerOptions: {//上面默认配置里有说明
onSelect: function(selectedDate) {
$(‘ID‘).daterangepicker("setRange", {start:
moment(selectedDate, "MM-DD-YYYY").toDate()});
$(‘ID‘).daterangepicker("close");
}}
以上是关于Query UI DateRangePicker自定义面板个数的主要内容，如果未能解决你的问题，请参考以下文章
是否可以向 Material DateRangePicker 添加页脚？