多选月份的日期选择器_日期多选，月份多选，年份多选，季度多选，日历区间选择...

年月日季度日历多选设置初始值demo

/*季度样式修改*/.datepicker-cell-block{display:block;width:100%;height:40px;line-height:40px;text-align:center;margin:2px 0;}.datepicker-cell-none{display:none;}

月份：年份：季度：

/*日期选择*/

//默认初始赋值数据

vardayData=['2020-05-01','2020-05-02','2020-05-03'];

$('#daySelect')

.attr('title',dayData.join())//设置title 当值太多显示不全时有用

.datepicker({

clearButton:true,

language:'zh',

multipleDates:true,//是否多选，Boolean | Number

multipleDatesSeparator:',',//多选间隔符号

onHide:function(inst, animationCompleted){

inst.$el.attr('title', inst.$el.val())

}

})

.data('datepicker')//.selectDate([new Date('2020-05-01'),new Date('2020-05-02'),new Date('2020-05-03')])

.selectDate(dayData.map(function(n){return newDate(n)}))/*月份选择*/

//默认初始赋值数据

varmonthData=['2020-01','2020-03','2020-05'];

$('#monthSelect')

.attr('title',monthData.join())

.datepicker({

clearButton:true,

language:'zh',

view:'months',

minView:'months',

dateFormat:'yyyy-mm',

multipleDates:12,

multipleDatesSeparator:',',

onHide:function(inst, animationCompleted){

inst.$el.attr('title', inst.$el.val())

}

})

.data('datepicker')

.selectDate(monthData.map(function(n){return newDate(n)}))/*年份选择*/

//默认初始赋值数据

varyearData=['2018','2019','2020'];

$('#yearSelect')

.attr('title',yearData.join())

.datepicker({

clearButton:true,

language:'zh',

view:'years',

minView:'years',

dateFormat:'yyyy',

multipleDates:5,

multipleDatesSeparator:',',

onHide:function(inst, animationCompleted){

inst.$el.attr('title', inst.$el.val())

}

})

.data('datepicker')

.selectDate(yearData.map(function(n){return newDate(n)}))/*季度计算*/

//默认初始赋值数据

varquarterData=['2019-第2季度','2019-第3季度','2020-第1季度'].join();varquarterFn= function(month){returnmonth< 4 ? 1:

month< 7 ? 2:

month< 10 ? 3:4;

}/*季度选择*/$('#quarterSelect')

.attr('title',quarterData)

.datepicker({

clearButton:true,

language:'zh',

view:'months',

minView:'months',

dateFormat:quarterData,

multipleDates:5,

multipleDatesSeparator:',',

onHide:function(inst, animationCompleted){

inst.$el.attr('title', inst.$el.val())

},

onRenderCell:function(date,cellType){if(cellType== 'month'){if((date.getMonth()+1)%3 == 0) {return{

html:'第'+quarterFn(date.getMonth()+ 1)+'季度',

classes:'datepicker-cell-block',

}

}else{return{

html:'第n季度',

classes:'datepicker-cell-none',

}

}

}

},

onSelect:function(formattedDate, date, inst){var_val= ''$.each(inst.selectedDates,function(k,v){

k===inst.selectedDates.length- 1 ?_val+=v.getFullYear()+ '-' + '第' +quarterFn(v.getMonth()+ 1)+ '季度':

_val+=v.getFullYear()+ '-' + '第' +quarterFn(v.getMonth()+ 1)+ '季度,';

})

inst.$el.val(_val)

}

})

.data('datepicker')

.selectDate(function(){var_quarterData=quarterData?quarterData

.replace(/第1季度/g,"3")

.replace(/第2季度/g,"6")

.replace(/第3季度/g,"9")

.replace(/第4季度/g,"12")

.split(',')

.map(function(n){return newDate(n)})

:'';return_quarterData

}())