WdatePicker 限制選擇最小最大日期

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\'}'
	});
});


發佈了130 篇原創文章 · 獲贊 42 · 訪問量 36萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章