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

最新推荐文章于 2024-04-10 10:25:34 发布

金斗潼关

最新推荐文章于 2024-04-10 10:25:34 发布

阅读量981

点赞数

分类专栏：工作前端文章标签： bootstrap javascript

本文链接：https://blog.csdn.net/weixin_42032770/article/details/132818032

版权

工作同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

前端

12 篇文章 0 订阅

订阅专栏

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，只是不影响使用！