需求
日期选择框只能选择月份,且只能选择只能是当前月份前12个月到当前月份,且可以动态显示与删除日期选择框
插件
所用插件库:bootstrap-datepicker
Github:https://github.com/uxsolutions/bootstrap-datepicker
官方文档:https://bootstrap-datepicker.readthedocs.io/en/stable/
前端样式
日期选择框
相关功能
1.初始化(不赋值)
let dateMonthConfig = {
language: "zh-CN", //语言
todayHighlight: true, //是否今日高亮
format: 'yyyymm', //点击月份后显示在input中的格式
autoclose: true, //是否开启自动关闭
startView: 'months', //开始视图层,为月视图层
maxViewMode:'years', //最大视图层,为年视图层
minViewMode:'months', //最小视图层,为月视图层
startDate:moment().subtract(11,'month').toDate(), //控制可选的最早月份,为前12个月(含当前月)
endDate:moment().toDate() //控制可选的最晚月份,为当前月
};
$('#your dom id').datepicker(dateMonthConfig);
2.初始化(赋值)
let dateMonthConfig = {
language: "zh-CN", //语言
todayHighlight: true, //是否今日高亮
format: 'yyyymm', //点击月份后显示在input中的格式
autoclose: true, //是否开启自动关闭
startView: 'months', //开始视图层,为月视图层
maxViewMode:'years', //最大视图层,为年视图层
minViewMode:'months', //最小视图层,为月视图层
startDate:moment().subtract(11,'month').toDate(), //控制可选的最早月份,为前12个月(含当前月)
endDate:moment().toDate() //控制可选的最晚月份,为当前月
};
$('#your dom id').datepicker(dateMonthConfig);
//判断动态的时间(date:String 格式:'YYYYMM')是否为当前月,为当前月取月头日期
if(moment(date).isSame(moment().format('YYYYMM'),'month')){
$('#your dom id').datepicker('setDate',moment(date+"01").startOf('month').toDate());
}
//不为当前月取月尾日期
else{
$('#your dom id').datepicker('setDate',moment(date+"01").endOf('month').toDate());
}
//这里使用插件的setDate方法,设置为传递的时间的当前月的最后一天
//PS:必须设置为传递时间的最后一天,否则无法选择设置的最早月份(startDate是按天进行加减的)
//PS:配置里的format与moment里的format格式不一样,配置里的yyyymm = moment里的 YYYYMM
3.销毁
if(datepickerDom.data('datepicker')){
datepickerDom.data('datepicker').destroy();
}
PS:这里在销毁前一定要判断是否为datepicker 绑定