js 常用日期控件使用

页面导航:首页 > 网络编程 > JavaScript > js 常用日期控件使用

js 常用日期控件使用

来源: 作者: 时间:2016-02-02 09:58 【

一、My97DatePicker当前最新版本: 4 81 使用说明:My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名My97DatePicker htm是必须文件,不可删除(4 8以后不存在

一、My97DatePicker

当前最新版本: 4.8
 
1. 使用说明:
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文件来修改样式
2. 支持的
IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+
3. 示例


<script type=text/javascript src=My97DatePicker/WdatePicker.js></script>

效果图:
简单示例效果
4. 属性表
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

note: 控件中的几个事件中的指针指向:
this: 指向文本框
dp: 指向$dp
dp.cal: 指向日期控件对象<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjwvYmxvY2txdW90ZT4NCjxwPjxzdHJvbmc+NS4gxNrWw7qvyv26zcr00NQ8L3N0cm9uZz48YnIgLz4NCjxpbWcgYWx0PQ=="这里写图片描述" src="http://www.2cto.com/uploadfile/Collfiles/20150412/20150412091243179.jpg" title="\" />
这里写图片描述
6. 日期格式表

格式 说明
y 将年份表示为最多两位数字。如果年份多于两位数,则结果中仅显示两位低位数。
yy 同上,如果小于两位数,前面补零。
yyy 将年份表示为三位数字。如果少于三位数,前面补零。
yyyy 将年份表示为四位数字。如果少于四位数,前面补零。
M 将月份表示为从 1 至 12 的数宗喎"http://www.2cto.com/kf/yidong/wp/" target="_blank" class="keylink">WPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+TU08L3RkPg0KCTx0ZD7NrMnPo6zI57n70KHT2sG9zrvK/aOsx7DD5rK5weOhozwvdGQ+DQoJPC90cj4NCgk8dHI+DQoJPHRkPk1NTTwvdGQ+DQoJPHRkPre1u9jUwrfdtcTL9dC0INK71MIg1sEgyq62/tTCICjTos7E17TMrM/CIEphbiB0byBEZWMpIKGjPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+TU1NTTwvdGQ+DQoJPHRkPre1u9jUwrfdtcTIq7PGINK71MIg1sEgyq62/tTCICjTos7E17TMrM/CIEphbnVhcnkgdG8gRGVjZW1iZXIpIKGjPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+ZDwvdGQ+DQoJPHRkPr2r1MLW0MjVxtqx7cq+zqq00yAxINbBIDMxILXEyv3X1qGjPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+ZGQ8L3RkPg0KCTx0ZD7NrMnPo6zI57n70KHT2sG9zrvK/aOsx7DD5rK5weOhozwvdGQ+DQoJPC90cj4NCgk8dHI+DQoJPHRkPkg8L3RkPg0KCTx0ZD69q9ChyrGx7cq+zqq00yAwINbBIDIzILXEyv3X1qGjPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+SEg8L3RkPg0KCTx0ZD7NrMnPo6zI57n70KHT2sG9zrvK/aOsx7DD5rK5weOhozwvdGQ+DQoJPC90cj4NCgk8dHI+DQoJPHRkPm08L3RkPg0KCTx0ZD69q7fW1tOx7cq+zqq00yAwINbBIDU5ILXEyv3X1qGjPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+bW08L3RkPg0KCTx0ZD7NrMnPo6zI57n70KHT2sG9zrvK/aOsx7DD5rK5weOhozwvdGQ+DQoJPC90cj4NCgk8dHI+DQoJPHRkPnM8L3RkPg0KCTx0ZD69q8Prse3Kvs6qtNMgMCDWwSA1OSC1xMr919ahozwvdGQ+DQoJPC90cj4NCgk8dHI+DQoJPHRkPnNzPC90ZD4NCgk8dGQ+zazJz6OsyOe5+9Ch09rBvc67yv2jrMeww+ayucHjoaM8L3RkPg0KCTwvdHI+DQoJPHRyPg0KCTx0ZD53PC90ZD4NCgk8dGQ+t7W72NDHxtq21NOmtcTK/dfWIDAgKNDHxtrM7CkgLSA2ICjQx8bawfkpIKGjPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+RDwvdGQ+DQoJPHRkPre1u9jQx8batcTL9dC0INK7INbBIMH5ICjTos7E17TMrM/CU3VuIHRvIFNhdCkgoaM8L3RkPg0KCTwvdHI+DQoJPHRyPg0KCTx0ZD5ERDwvdGQ+DQoJPHRkPre1u9jQx8batcTIq7PGINDHxtrSuyDWwSDQx8bawfkgKNOizsTXtMysz8JTdW5kYXkgdG8gU2F0dXJkYXkpIKGjPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+VzwvdGQ+DQoJPHRkPre1u9jW3LbU06a1xMr919YgKDEgLSA1MykgoaM8L3RkPg0KCTwvdHI+DQoJPHRyPg0KCTx0ZD5XVzwvdGQ+DQoJPHRkPs2syc+jrMjnufvQodPawb3Ou8r9o6zHsMPmsrnB4yAoMDEgLSA1MykgoaM8L3RkPg0KCTwvdHI+DQo8L3Rib2R5Pg0KPC90YWJsZT4NCjxwPjxzdHJvbmc+Ny4gtq/MrLHkwb+x7Twvc3Ryb25nPjxiciAvPg0K16LS4jrI1cbauPHKvbHY0OvT6yByZWFsRGF0ZUZtdCC6zSByZWFsVGltZUZtdCDSu9bCtviyu8rH0+sgZGF0ZUZtdCDSu9bCPGJyIC8+DQrE47/J0tTNqLn9z7XNs7j4s/a1xLavzKyx5MG/LMjnJXkotbHHsMTqKSwlTSi1scew1MIptcjAtM/etsjI1cbat7bOpyzE47u5v8nS1M2ouf17fb340NCx7bTvyr3Uy8vjLMjnOnslZCsxfTqx7cq+w/fM7DwvcD4NCjx0YWJsZT4NCjx0aGVhZD4NCgk8dHI+DQoJPHRoPg0KCQm48cq9PC90aD4NCgk8dGg+DQoJCcu1w/c8L3RoPg0KCTwvdHI+DQo8L3RoZWFkPg0KPHRib2R5Pg0KCTx0cj4NCgk8dGQ+JXk8L3RkPg0KCTx0ZD61scewxOo8L3RkPg0KCTwvdHI+DQoJPHRyPg0KCTx0ZD4lTTwvdGQ+DQoJPHRkPrWxx7DUwjwvdGQ+DQoJPC90cj4NCgk8dHI+DQoJPHRkPiVkPC90ZD4NCgk8dGQ+tbHHsMjVPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+JWxkPC90ZD4NCgk8dGQ+sb7UwtfuuvPSu8zsPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+JUg8L3RkPg0KCTx0ZD61scewyrE8L3RkPg0KCTwvdHI+DQoJPHRyPg0KCTx0ZD4lbTwvdGQ+DQoJPHRkPrWxx7C31jwvdGQ+DQoJPC90cj4NCgk8dHI+DQoJPHRkPiVzPC90ZD4NCgk8dGQ+tbHHsMPrPC90ZD4NCgk8L3RyPg0KCTx0cj4NCgk8dGQ+e308L3RkPg0KCTx0ZD7Uy8vjse2078q9LMjnOnslZCsxfTqx7cq+w/fM7DwvdGQ+DQoJPC90cj4NCgk8dHI+DQoJPHRkPkZ7fTwvdGQ+DQoJPHRkPnt91q685MrHuq/K/b/J0LTX1Lao0uVKU7T6wus8L3RkPg0KCTwvdHI+DQo8L3Rib2R5Pg0KPC90YWJsZT4NCjxwPjxzdHJvbmc+OC4gZXhhbXBsZTwvc3Ryb25nPjwvcD4NCjxwcmUgY2xhc3M9"brush:java;"> <script type=text/javascript src=My97DatePicker/WdatePicker.js></script>

效果图:

 

no1 no2
这里写图片描述 双月历

 

Tags:

文章评论


<