miniUI日历控件只可以选择当前之前日期

时间:2023-01-26 04:28:27

这个也是项目中遇到的一个,因为分两个系统,一个系统用的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,该日期则不可以被选择。
实现的效果图如下:
miniUI日历控件只可以选择当前之前日期