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

    1、问题描述

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

    2、解决方法

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

    3、我的代码

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

    3.1、有bug的代码

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>有bug的title>
    6. 	head>
    7. 	<script type="text/javascript" src="./js/jquery.min.js">script>
    8. 	<script type="text/javascript" src="./js/bootstrap-datepicker.min.js">script>
    9. 	<script type="text/javascript" src="./js/bootstrap-datepicker.zh-CN.min.js">script>
    10. 	<link rel="stylesheet" type="text/css" href="./css/bootstrap-datepicker3.min.css" />
    11. 	<body>
    12. 		<script type="text/javascript">
    13. 			$(function() {
    14. 				//年-月格式
    15. 				$('.YearMonth').datepicker({
    16. 					format: 'yyyy-mm',
    17. 					startView: 2, //日期控件打开时候显示的视图 2  代表年份
    18. 					maxViewMode: 2, //最大视图模式 默认值 4  2代表年份
    19. 					minViewMode: 1, //最小视图模式 设置视图模式的最小限制 2  代表年份
    20. 					autoclose: 'true',
    21. 					todayHighlight: 'true',
    22. 					language: 'zh-CN',
    23. 					orientation: 'button',
    24. 					clearBtn: true
    25. 				})
    26. 				var flag = false;
    27.  
    28. 				$("#IndexDateBegin").change(function() {
    29. 					console.log($(this).val())
    30. 					if (flag) {
    31. 						$(this).datepicker("setStartDate", null);
    32. 						$(this).datepicker("setEndDate", null);
    33. 						flag = false;
    34. 						console.log("flag=" + flag)
    35. 					}
    36. 				});
    37.  
    38. 				$("#IndexDateBegin").datepicker().on('changeYear', function(e) {
    39. 					console.log("changeYear");
    40. 					console.log(e.date)
    41. 					var sCapacity = $("#Capacity").val();
    42. 					var currYear = String(e.date).split(" ")[3];
    43. 					if (!flag) {
    44. 						$(this).datepicker("setEndDate", currYear + "-01");
    45. 						$(this).datepicker("setStartDate", currYear + "-01");
    46. 						flag = true;
    47. 					}
    48.  
    49. 					console.log(currYear + ":" + flag);
    50. 				});
    51. 			});
    52. 		script>
    53. 		日期：<input type="text" class="YearMonth" name="IndexDateBegin" id="IndexDateBegin" value="" onfocus="this.blur();" />
    54. 	body>
    55. html>

           

    3.2、正确的代码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>正确的title>
    6. 	head>
    7. 	<script type="text/javascript" src="./js/jquery.min.js">script>
    8. 	<script type="text/javascript" src="./js/bootstrap-datepicker.min.js">script>
    9. 	<script type="text/javascript" src="./js/bootstrap-datepicker.zh-CN.min.js">script>
    10. 	<link rel="stylesheet" type="text/css" href="./css/bootstrap-datepicker3.min.css" />
    11. 	<body>
    12. 		<script type="text/javascript">
    13. 			window.onload=function(){
    14. 				// $("#IndexDateBegin").datepicker("setStartDate", null);
    15. 				// $("#IndexDateBegin").datepicker("setEndDate", null);
    16. 				// if($("#IndexDateBegin").val()==""){
    17. 				// 	$("#IndexDateBegin").val(new Date().getFullYear()+"-0"+(new Date().getMonth()+1));
    18. 				// }
    19. 			}
    20. 			$(function() {
    21. 				//年-月格式
    22. 				$('.YearMonth').datepicker({
    23. 					format: 'yyyy-mm',
    24. 					startView: 2, //日期控件打开时候显示的视图 2  代表年份
    25. 					maxViewMode: 2, //最大视图模式 默认值 4  2代表年份
    26. 					minViewMode: 1, //最小视图模式 设置视图模式的最小限制 2  代表年份
    27. 					autoclose: 'true',
    28. 					todayHighlight: 'true',
    29. 					language: 'zh-CN',
    30. 					orientation: 'button',
    31. 					clearBtn: true
    32. 					//useCurrent: false
    33. 				})
    34. 				//flag的作用就是判断，datepicker日期控件是否点了“年份”，如果点了“年份”，则根据选中的“年份”限定“月份”范围只能是当前选中“年份”的1月份！
    35. 				var flag = false;
    36. 				//用于记录changeYear的次数，因为datepicker控件的默认年份是当前年份。
    37. 				var clickNum=0;
    38. 				// $(".clear").click(function(){
    39. 				// 	console.log("clear")
    40. 				// 	alert("1223");
    41. 				// });
    42. 				
    43. 				$("#IndexDateBegin").change(function() {
    44. 					if($(this).val()==""){
    45. 						clickNum=0;
    46. 						//alert("1223");
    47. 					}
    48. 					console.log($(this).val())
    49. 					if (flag) {
    50. 						$(this).datepicker("setStartDate", null);
    51. 						$(this).datepicker("setEndDate", null);
    52. 						flag = false;
    53. 						console.log("flag=" + flag)
    54. 					}
    55. 				});
    56. 				
    57. 				$("#IndexDateBegin").datepicker().on('changeYear', function(e) {
    58. 					clickNum=clickNum+1;
    59. 					//$(this).val("");
    60. 					console.log("changeYear");
    61. 					console.log(e.date)
    62. 					var sCapacity = $("#Capacity").val();
    63. 					var currYear = String(e.date).split(" ")[3];
    64. 					if(!flag){
    65. 						if(clickNum==1){
    66. 							$(this).datepicker("setEndDate", currYear + "-01");
    67. 						}
    68. 						if(clickNum>1){
    69. 							$(this).datepicker("setEndDate", currYear + "-01");
    70. 							$(this).datepicker("setStartDate", currYear + "-01");
    71. 						}
    72. 						
    73. 						flag = true;
    74. 					}
    75. 					
    76. 					
    77.  
    78. 					console.log(currYear + ":" + flag);
    79. 				});
    80. 			});
    81. 		script>
    82. 		日期：<input type="text" class="YearMonth" name="IndexDateBegin" id="IndexDateBegin" value="" onfocus="this.blur();" />
    83. 	body>
    84. html>

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

            只要你别每次点一半（只点年份不点月份）就清除了，就没有问题了。碰到这个bug，只要点进年份，再点进月份。只要完整的把年份月份都点完，那么日期框的所有年份又都是可用的了！

    4、运行效果

            

    5、总结

            因为网上没有查到现成的代码可以用，所以只能自己写了。网上查资料的时候看到了这篇文章关于javascript：更改时如何获取Bootstrap Datepicker的年份和月份 | 码农家园 (codenong.com)

    给了我启发！ 

    6、参考资料

    关于javascript：更改时如何获取Bootstrap Datepicker的年份和月份 | 码农家园 (codenong.com) 

    bootstrap-datepicker — bootstrap-datepicker documentation 

    GitHub - uxsolutions/bootstrap-datepicker: A datepicker for twitter bootstrap (@twbs) 

  • 相关阅读:
    Spring（八）Spring 整合 MyBatis、Junit
    gitlab拉取项目报128 fatal: unable to access ‘xxx.git/‘
    【代码随想录】算法训练计划01
    聊聊「画图」和工具
    会声会影2024中文版好用吗？
    推荐一个python、AI学习社区：ShowMeAI
    14 结构性模式-适配器模式
    【大数据 - Doris 实践】数据表的基本使用（一）：基本概念、创建表
    RabbitMQ入门教程（安装，管理插件，Publisher/Consumer/交换机/路由/队列/绑定关系，及如何保证100%投递等）
    winform 自定义数值(数字)输入框
  • 原文地址：https://blog.csdn.net/weixin_42032770/article/details/132818032