console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>年月日季度日历多选demo</title>
<link rel="stylesheet" type="text/css" href="//lib.baomitu.com/air-datepicker/2.2.3/css/datepicker.css"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
<script type="text/javascript" src="//lib.baomitu.com/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<script type="text/javascript" src="//lib.baomitu.com/air-datepicker/2.2.3/js/i18n/datepicker.zh.min.js"></script>
<style>
body{padding: 20px;}
.demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 2px;text-overflow: ellipsis;}
/* 季度样式修改 */
.datepicker-cell-block{display: block; width: 100%; height: 40px; line-height:40px;text-align: center; margin: 2px 0;}
.datepicker-cell-none{display: none;}
</style>
</head>
<body>
日期：<input type="text" id="daySelect" class="demo-input" placeholder="请选择日期" readonly="readonly"/>
月份：<input type="text" id="monthSelect" class="demo-input" placeholder="请选择月份" readonly="readonly"/>
年份：<input type="text" id="yearSelect" class="demo-input" placeholder="请选择年份" readonly="readonly"/>
季度：<input type="text" id="quarterSelect" class="demo-input" placeholder="请选择季度" readonly="readonly"/>
<script>
/* 日期选择 */
// 默认初始赋值数据
var dayData = ['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 new Date(n)}))
/* 月份选择 */
// 默认初始赋值数据
var monthData = ['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 new Date(n)}))
/* 年份选择 */
// 默认初始赋值数据
var yearData = ['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 new Date(n)}))
/* 季度计算 */
// 默认初始赋值数据
var quarterData = ['2019-第2季度','2019-第3季度','2020-第1季度'].join();
var quarterFn = function(month){
return month < 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 new Date(n)})
: '';
return _quarterData
}())
</script>
</body>
</html>