WdatePicker 限制选择最小最大日期

最新推荐文章于 2024-07-04 17:15:56 发布

joexk

最新推荐文章于 2024-07-04 17:15:56 发布

阅读量5.3k

点赞数 1

分类专栏： jQuery 文章标签：前端 jquery

本文链接：https://blog.csdn.net/zhouxukun123/article/details/103755537

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 需求
限制最小、最大日期选择，如最小日期只能选择上一年度日期，最大日期只能选择到当天日期。

2 解决
使用WdatePicker日期插件，设置minDate、maxDate，代码如下：

<div class="form-group">
	<label class="col-sm-2 control-label">日期<span class="red">*</span></label>
	<div class="col-lg-1" style="width: 185px">
		<input id="addStartTime" name="testStartTime" class="Wdate" type="text"
			   <%--onclick="WdatePicker({minDate:'2018-01-01',maxDate:'#F{$dp.$D(\'addEndTime\')||\'%y-%M-%d\'}'});"--%>
			   nullmsg="起始日期不能为空!" datatype="*1-64" autocomplete="off" readonly/>
	</div>
	<div class="col-lg-1" style="width: 3%;text-align: center;margin: 0;padding: 0">-</div>
	<div class="col-lg-1" style="width: 180px;margin: 0;padding: 0">
		<input id="addEndTime" name="testEndTime" class="Wdate" type="text" 
			   nullmsg="结束日期不能为空!" datatype="*1-64" autocomplete="off" readonly/>
	</div>
</div>

js 代码如下：

// 获取上一年度第一天
var thisYear = new Date().getFullYear();
var lastYearFirstDay = thisYear-1+"-01"+"-01";
// 设置起始时间的最小值限定为上一年度第一天
$('#addStartTime').unbind('click').bind('click', function () {
	WdatePicker({
		readOnly: true,
		minDate: lastYearFirstDay,
		maxDate: '#F{$dp.$D(\'addEndTime\')||\'%y-%M-%d\'}'
	});
});

$('#addEndTime').unbind('click').bind('click', function () {
	WdatePicker({
		readOnly: true,
		minDate: lastYearFirstDay || '#F{$dp.$D(\'addStartTime\')}' ,
		maxDate: '#F{\'%y-%M-%d\'}'
	});
});