首先吐槽一下需求人员给了我一个很坑的需求: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 但已经不会再弹出时间选择控件了。
推荐阅读:http://www.cnblogs.com/yuhanzhong/archive/2011/08/10/2133276.html