bootstrap-datepicker 月份选择 完全指南

需求

日期选择框只能选择月份，且只能选择只能是当前月份前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 绑定