首先吐槽一下需求人員給了我一個很坑的需求：WdatePicker日曆控制元件裡面選擇的最小時間（minDate）的值是級聯動態改變的，而且這個值要從資料庫獲取，這樣子只能使用 ajax 來發起請求獲取minDate屬性值。

先看程式碼：

<div class="control-group">
	<label class="control-label">報讀月份：</label>
	<div class="controls">
		<input name="readMonth" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate required"
			value="${launchReadMeter.readMonth}" onclick="checkClick(this);"/>
		<span class="help-inline"><font color="red">*</font> </span>
	</div>
</div>


<script type="text/javascript">
	function checkClick(obj) {
		$(obj).attr("value","");
		var officeId = $("#officeId").val();
		var meterType = $("#meterType").val();
		if(officeId!="" && meterType!="") {
			$.ajax({
				url:'${ctx}/launchreadmeter/launchReadMeter/getReadMeter',
				type:'post',
				dataType:'json',
				async:false,
				data:{
					officeId:officeId+"",
					meterType:meterType+""
				},
				success:function(data){
					WdatePicker({minDate:data.readMonth,maxDate:'%y-%M',dateFmt:'yyyy-MM',isShowClear:false});
				}
			});
		} else {
			top.$.jBox.tip("請先選擇小區和儀表型別！");
		}
	}
</script>

 

注意：ajax 方法必須設定同步（async:false），不然 WdatePicker 時間控制元件 就失效了，因為非同步執行就會導致一個問題，onclick="checkClick(this);" 監聽方法會先執行完了，儘管還是會進入success function 但已經不會再彈出時間選擇控制元件了。

關注公眾號，分享乾貨，討論技術