JS选择日期控件。需要使当前日期以后的日期不能选择_dayjs过去4个月和当月之后不可选-优快云博客

在开发中遇到需要禁止选择当前日期以前日期的需求，通过自定义ltCurrentDate验证方式实现了这一功能。但在表单提交时，如果日期输入框不在视口内，验证提示无法显示且输入框无法获取焦点。为解决这个问题，引入了jQuery UI的datepicker插件，通过设置`maxDate`属性限制最大日期为当前日期，从而达到预期效果。参考官方文档了解更多配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.extend($.fn.datebox.defaults.rules,{
	   gtStartDate: {
		   validator: function(value,param){//
			   if(param[0] && value)
			   {
				   if(value.length > 10)
				   {
					   value = value.substring(0,10);
				   }
				   var ed_arr = value.split('-');
				   var endDate = new Date(ed_arr[0],ed_arr[1]-1,ed_arr[2]);
			   var sDate = $(param[0]).datebox('getValue');
			   if(sDate)
			   {
				   if(sDate.length > 10)
				   {
					   sDate = sDate.substring(0,10);
				   }
				   var sd_arr = sDate.split('-');
				   var startDate = new Date(sd_arr[0],sd_arr[1]-1,sd_arr[2]).getTime();
				   if((endDate.getTime() - startDate) > 0)
				   {
					   return true;
				   }
			   }
		   }
		   return false;
	   },
	   message:"结束时间必须大于开始时间"
    	   }
       });
   /*

页面使用方式：

for="inforCommend.startDate">开始时间:</label></td>
							<td><input  class="easyui-datebox" type="text" name="inforCommend.startDate" required=true editable="false"
								id="infor_commend_startDate" /></td>
							<td width="20"></td>


							<td nowrap="nowrap" align="right"><label
								for="inforCommend.endDate">结束时间:</label></td>
							<td><input class="easyui-datebox"  type="text" name="inforCommend.endDate" editable="false" required=true validType="gtStartDate['#infor_commend_startDate']" invalidMessage="结束时间必须大于开始时间"
								id="infor_commend_endDate" /></td>

	*/
   $.extend($.fn.datebox.defaults.rules,{
	   ltCurrentDate: {
		   validator: function(value,param){
			   if(value)
			   {
				   if(value.length > 10)
				   {
					   value = value.substring(0,10);
				   }
				   var ed_arr = value.split('-');
				   var selectedDate = new Date(ed_arr[0],ed_arr[1]-1,ed_arr[2]);
				   var currentDate = new Date();
				   if((currentDate.getTime() - selectedDate.getTime()) >= 0)
				   {
					   return true;
				   }
			   }
		   return false;
	   },
	   message:"日期必须小于等于当前日期"
    	   }
       });

由于项目是使用的easyui 但是查了下easyui datebox 发现没有提供类似的属性。

于是自己写了个ltCurrentDate 的校验方式。

当表单提交或鼠标移开是会进行验证。如果不合法此会弹出invalidMessage属性的提示信息。

验证了可以使用。但是当提交按钮和日期input需要页面滚动才能看到彼此时。问题就来了。表单提交。

触发验证，提示信息已经弹出来了，但是当页面滚到日期input时，提示信息是没有的。而且日期input由于是editable=false的。所以不能获得focus，所以用户看不出哪里不合法。晕了。

于是找来下先jquery ui中的 datepicker插件不错，而且支持这个需求。

需要文件;

jquery-ui-1.8.21.custom.min.js
<link type="text/css" href="<%=commonCssPath %>/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />

jquery.ui.datepicker-zh-CN.js:

;jQuery(function($){	
	$.datepicker.regional["zh-CN"]={
		closeText:"关闭",
		prevText:"<上月",
		nextText:"下月>",
		currentText:"今天",
		monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
		monthNamesShort:["一","二","三","四","五","六","七","八","九","十","十一","十二"],
		dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
		dayNamesShort:["周日","周一","周二","周三","周四","周五","周六"],
		dayNamesMin:["日","一","二","三","四","五","六"],
		weekHeader:"周",
		dateFormat:"yy-mm-dd",
		firstDay:1,
		isRTL:!1,
		showMonthAfterYear:!0,
		yearSuffix:"年"},
		$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);
});

如何使用：

$('#i_startDate').datepicker({maxDate:new Date()});

更多属性参见官方文档。http://api.jqueryui.com/datepicker/