My97DatePicker是一个非常使用的组件,它的界面组成为一个时间的下拉框,通过选择可以将下拉框中的日期加载到对应的文本框中,效果如下图所示
一、My97DatePicker的使用过程
1.自己可以去网上下载一个My97DatePicker的组件
2.将解压后的文件之间拷贝到WebRoot目录下就行了
3.接着我们就要对My97DatePicker进行配置了,首先对日历组件的显示页面进行配置,找到需要加入日历组件的对象,编写如下代码,这里我们以生日为例,name属性可以根据自己的需求更改,其他属性为固定的,无需更改。
<input type="text" name="birthday" class="Wdate" onclick="WdatePicker()" readonly="readonly"><br>
4.我们还需要添加一个script标签,内容如下所示,在这里我们src用的是相对路径,适用于每个项目,无需更改
<script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/My97DatePicker/WdatePicker.js"></script>
二、My97DatePicker的初始化设置
我们可以打开My97DatePicker目录下的WdatePicker.js对日历界面进行初始化设置
1.最早时间的设置,作为生日显示的时候,为了防止选择虚假的生日我们进行minDate的设置。如下所示,我将minDate设置成1900-01-01 00:00:00,故用户在使用时,不可以选择比其早的时间,大家可以根据自己的需要设置不同的minDate。
minDate:"1900-01-01 00:00:00",
2.同理,我们可以对maxDate进行设置,用户就不可以选择比该日期还大的日期了。
maxDate:"2016-12-10 23:59:59",
3.对初始化显示时间我们可以进行设置,可以根据需求选择一些常用的日期,可以减少用户的选择量。
startDate:"2000-12-10 23:59:59",