1、 下载插件
a) 官网下载地址:http://www.my97.net/down.asp
2、 如何使用:
a) 把下载到的文件解压,然后添加到项目中(注意:要完整地添加,不要修改文件的路径)
b) 添加到项目之后,在html中引入WdatePicker.js文件即可。(只需引入这个文件,其他的文件都不需要引入)
<script src="~/Resources/My97DatePicker/WdatePicker.js"></script>
c) 然后在html中使用即可。
<input id="start-time" type="text" class="Wdate" οnclick="WdatePicker({ startDate: '%y-%M-%d hh:mm:ss', dateFmt: 'yyyy-MM-dd HH:mm:ss'})" />
3、 修改他的格式。具体如何修改,可以看官方文档。如下是我自己做项目的时候需要修改的东西。
a) 官方文档:http://www.my97.net/demo/index.htm
b) 修改秒不可以被修改和选择。只需把时间格式中的ss不要即可。这样,秒这里就不能被选中了,而且是00。
<input id="start-time" type="text" class="Wdate" οnclick="WdatePicker({ startDate: '%y-%M-%d hh:mm:ss', dateFmt: 'yyyy-MM-dd HH:mm'})" />
c) 修改时分秒一个默认值:一般时分秒的默认是显示当前时间的,如果想显示固定的时间(例如:8:00:00),只需把格式改为如下即可。(同理,如果想改年月日,也可以改为固定年月日即可。)
<input id="start-time" type="text" class="Wdate" οnclick="WdatePicker({ startDate: '%y-%M-%d hh:mm:ss', dateFmt: 'yyyy-MM-dd 8:00:00'})" />
d) 修改显示的内容:(例如:把清空按钮不显示,只需添加isShowClear: false即可。)
<input id="start-time" type="text" class="Wdate" οnclick="WdatePicker({ startDate: '%y-%M-%d hh:mm:ss', dateFmt: 'yyyy-MM-dd 8:00:00',isShowClear: false})" />
还有更多的东西也可以这样修改。例如:只能选择:readOnly: true即可。
e) 还有一种方法就是,直接修改WdatePicker.js文件里面的默认值。也是一样的效果的。
f) 如何让时分秒按照自己的想法来选择呢?比如说分只能选择0和30.这样就可以修改文件WdatePicker.js里面的hmsMenuCfg:{H:[1,6],m:[30,2],s:[15,4]},属性。上面图有显示。[1,6]是表示一个小时为分隔,每一行显示6个。
所以上面的分[30,2]是30分钟为隔行,每一行显示2个。
所以就可以按照自己的需求来修改自己想要的样式。
g) 还有各种的样式和格式需求。看文档即可。