这个也是项目中遇到的一个,因为分两个系统,一个系统用的easyUI,这个系统用的miniUI,
需求描述:该检索条件中的日历控件,只可以选择当前之前的任意一天,以后的日期不可以选择。
检索条件代码如下:
<td align="right">出生日期</td>
<td >
<input id="csksrq" name="csksrq" size="15" format="yyyy-MM-dd" class="mini-datepicker" style='width: 100px;' ondrawdate="onDrawDate">
至
<input id="csjsrq" name="csjsrq" size="15" format="yyyy-MM-dd" class="mini-datepicker" style='width: 100px;' ondrawdate="onDrawDate">
</td>
上面的代码是miniUI里面的,使用的是miniUI的datepicker,只需要添加这段代码:
ondrawdate="onDrawDate"
在JS中实现onDrawDate函数,实现如下:
function onDrawDate(e) {
var date = e.date;
var d = new Date();
if (date.getTime() > d.getTime()) {
e.allowSelect = false;
}
}
将日历控件时间和当前的时间做比较,如果当前时间小于日期控件的时间,就将allowSelect设置为false,该日期则不可以被选择。
实现的效果图如下: