My97DatePicker日历插件

一、前言

现在的出行类网站都有日历,所以介绍一款基于JQuery的日历插件

二、使用插件

进入官网: http://www.my97.net/demo/index.htm   进行下载

解压得到My97DatePicker文件夹,将其放入项目内, 因为引入的是外部插件这里我将其放在lib文件夹内，

<!--因为是基于JQuery的插件,需先引用最好是1.10以上的版本的JQuer库-->
<script src="js/jquery-1.12.4.js"></script>
<!--在根据自己的路径添加日历插件-->
<script src="lib/My97DatePicker/WdatePicker.js"></script>

三、注意事项

My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名

My97DatePicker.htm是必须文件,不可删除(4.8以后不存在此文件)

各目录及文件的用途: 

WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名

config.js 语言和皮肤配置文件,无需引入(4.8以后合并入WdatePicker.js)

calendar.js 日期库主文件,无需引入

My97DatePicker.htm 临时页面文件,不可删除(4.8以后不存在此文件)

目录lang 存放语言文件,你可以根据需要清理或添加语言文件

目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包

当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式

支持的浏览器:

IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0

四、常用功能及示例

<input id="d11" type="text" onClick="WdatePicker()"/>

 

<!--添加class="Wdate"，可以在input标签内显示日历图标-->
<input id="d11" type="text" class="Wdate" onClick="WdatePicker()"/>

如果el的值是this,可省略,即所有的el:this都可以不写 

设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末,默认高亮

自定义日期显示格式 dateFmt:'yyyy年MM月dd日 HH时mm分ss秒',   效果示例 : 2018年10月12日 21时38分29秒

设置doubleCalendar属性  是否是双月模式,如果该属性为true,则弹出同时显示2个月的日期框

只用这些就能做出个简单的日历,还有换皮肤...其他功能可以去官网查看自行学习