bootstrap-datepicker实现只能选择每一年的某一个月份

1、问题描述

最近碰到一个需求，要求日期控件选择的时候，只能选择某一年的1月份。

2、解决方法

使用setStartDate()和setEndDate()函数对日期选择框进行范围限制。

3、我的代码

【免费】bootstrap-datepicker实现只能选择每一年的某一个月份资源-CSDN文库

3.1、有bug的代码

注意：这段代码虽然也实现了“只能选择某个年份的1月份”的效果，但是是有Bug的。这个bug比较好玩，所以我特地放在这里。可以多点点试试看。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>有bug的</title></head><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript" src="./js/bootstrap-datepicker.min.js"></script><script type="text/javascript" src="./js/bootstrap-datepicker.zh-CN.min.js"></script><link rel="stylesheet" type="text/css" href="./css/bootstrap-datepicker3.min.css" /><body><script type="text/javascript">$(function() {//年-月格式$('.YearMonth').datepicker({format: 'yyyy-mm',startView: 2, //日期控件打开时候显示的视图 2  代表年份maxViewMode: 2, //最大视图模式 默认值 4  2代表年份minViewMode: 1, //最小视图模式 设置视图模式的最小限制 2  代表年份autoclose: 'true',todayHighlight: 'true',language: 'zh-CN',orientation: 'button',clearBtn: true})var flag = false;$("#IndexDateBegin").change(function() {console.log($(this).val())if (flag) {$(this).datepicker("setStartDate", null);$(this).datepicker("setEndDate", null);flag = false;console.log("flag=" + flag)}});$("#IndexDateBegin").datepicker().on('changeYear', function(e) {console.log("changeYear");console.log(e.date)var sCapacity = $("#Capacity").val();var currYear = String(e.date).split(" ")[3];if (!flag) {$(this).datepicker("setEndDate", currYear + "-01");$(this).datepicker("setStartDate", currYear + "-01");flag = true;}console.log(currYear + ":" + flag);});});</script>日期：<input type="text" class="YearMonth" name="IndexDateBegin" id="IndexDateBegin" value="" onfocus="this.blur();" /></body>
</html>

3.2、正确的代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>正确的</title></head><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript" src="./js/bootstrap-datepicker.min.js"></script><script type="text/javascript" src="./js/bootstrap-datepicker.zh-CN.min.js"></script><link rel="stylesheet" type="text/css" href="./css/bootstrap-datepicker3.min.css" /><body><script type="text/javascript">window.onload=function(){// $("#IndexDateBegin").datepicker("setStartDate", null);// $("#IndexDateBegin").datepicker("setEndDate", null);// if($("#IndexDateBegin").val()==""){// 	$("#IndexDateBegin").val(new Date().getFullYear()+"-0"+(new Date().getMonth()+1));// }}$(function() {//年-月格式$('.YearMonth').datepicker({format: 'yyyy-mm',startView: 2, //日期控件打开时候显示的视图 2  代表年份maxViewMode: 2, //最大视图模式 默认值 4  2代表年份minViewMode: 1, //最小视图模式 设置视图模式的最小限制 2  代表年份autoclose: 'true',todayHighlight: 'true',language: 'zh-CN',orientation: 'button',clearBtn: true//useCurrent: false})//flag的作用就是判断，datepicker日期控件是否点了“年份”，如果点了“年份”，则根据选中的“年份”限定“月份”范围只能是当前选中“年份”的1月份！var flag = false;//用于记录changeYear的次数，因为datepicker控件的默认年份是当前年份。var clickNum=0;// $(".clear").click(function(){// 	console.log("clear")// 	alert("1223");// });$("#IndexDateBegin").change(function() {if($(this).val()==""){clickNum=0;//alert("1223");}console.log($(this).val())if (flag) {$(this).datepicker("setStartDate", null);$(this).datepicker("setEndDate", null);flag = false;console.log("flag=" + flag)}});$("#IndexDateBegin").datepicker().on('changeYear', function(e) {clickNum=clickNum+1;//$(this).val("");console.log("changeYear");console.log(e.date)var sCapacity = $("#Capacity").val();var currYear = String(e.date).split(" ")[3];if(!flag){if(clickNum==1){$(this).datepicker("setEndDate", currYear + "-01");}if(clickNum>1){$(this).datepicker("setEndDate", currYear + "-01");$(this).datepicker("setStartDate", currYear + "-01");}flag = true;}console.log(currYear + ":" + flag);});});</script>日期：<input type="text" class="YearMonth" name="IndexDateBegin" id="IndexDateBegin" value="" onfocus="this.blur();" /></body>
</html>

注意：其实这个正确代码也有点小bug，只是不影响使用！