日期控件My97 DatePicker 的使用

1.解压后添加My97DatePicker文件夹

2.引入WdatePicker.js文件

日期控件My97DatePicker的使用.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日期控件My97DatePicker的使用</title>
<script type="text/javascript" src="js/My97DatePicker4.7.2/WdatePicker.js" ></script>
</head>
<body>
</body>
</html>

在使用该日期控件的文件中加入WdatePicker.js (仅这一个文件即可,其他文件会自动引入,请勿删除或改名)

3.在使用的标签上添加

日期控件My97DatePicker的使用.html

<strong><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日期控件My97DatePicker的使用</title>
<script type="text/javascript" src="js/My97DatePicker4.7.2/WdatePicker.js" ></script>
</head>
<body>
<input type="text" onclick="WdatePicker()" />
</body>
</html></strong>

效果图：

日期控件My97DatePicker的使用.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日期控件My97DatePicker的使用</title>
<script type="text/javascript" src="js/My97DatePicker4.7.2/WdatePicker.js" ></script>
</head>
<body>
<input type="text" onclick="WdatePicker()" />
<input type="text" onclick="WdatePicker({startDate:'%y-%M-%d %h:%m:%s',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>
</body>
</html>

效果图：

4.日期格式:(可以自定义显示格式)

y 将年份表示为最多两位数字。如果年份多于两位数，则结果中仅显示两位低位数。
yy 同上，如果小于两位数，前面补零。
yyy 将年份表示为三位数字。如果少于三位数，前面补零。
yyyy 将年份表示为四位数字。如果少于四位数，前面补零。
M 将月份表示为从 1 至 12 的数字
MM 同上，如果小于两位数，前面补零。
MMM 返回月份的缩写一月至十二月 (英文状态下 Jan to Dec) 。
MMMM 返回月份的全称一月至十二月 (英文状态下 January to December) 。
d 将月中日期表示为从 1 至 31 的数字。
dd 同上，如果小于两位数，前面补零。
H 将小时表示为从 0 至 23 的数字。
HH 同上，如果小于两位数，前面补零。
m 将分钟表示为从 0 至 59 的数字。
mm 同上，如果小于两位数，前面补零。
s 将秒表示为从 0 至 59 的数字。
ss 同上，如果小于两位数，前面补零。
w 返回星期对应的数字 0 (星期天) - 6 (星期六) 。
D 返回星期的缩写一至六 (英文状态下 Sun to Sat) 。
DD 返回星期的全称星期一至星期六 (英文状态下 Sunday to Saturday) 。
W 返回周对应的数字 (1 - 53) 。
WW 同上，如果小于两位数，前面补零 (01 - 53) 。

格式字符串值
yyyy-MM-dd HH:mm:ss 2008-03-12 19:20:00
yy年M月 08年3月
yyyyMMdd 20080312
yyyy年M年d HH时mm分 2008年3月12日 19时20分
H:m:s 19:20:0
y年 8年
MMMM d, yyyy 三月 12, 2008

5.config.js配置皮肤

皮肤可以到官网下载

My97DatePicker目录下有个config.js,里面有段代码:

var skinList =
[
{name:'default', charset:'UTF-8'},
{name:'whyGreen', charset:'UTF-8'}
];

这就是皮肤列表,每个项有name和charset两个属性.
name 表示皮肤的名称,在配置的时候,skin属性只能是配置列表里面已有的项,否则将自动返回第一项
charset 表示对应皮肤目录下的css文件:datepicker.css所对应的编码格式
皮肤安装说明

分两步轻松实现:
1 将皮肤文件包拷贝到 skin 目录
2 打开 config.js 配置皮肤列表

6、常用功能及设置方法

参考自：http://jingyan.baidu.com/article/e6c8503c7244bae54f1a18c7.html

常用功能及设置方法.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用功能及设置方法.html</title>
<script type="text/javascript" src="js/My97DatePicker4.7.2/WdatePicker.js" ></script>
</head>
<style>
ul li{
list-style-type:none;
border: 1px solid black;
width : 470px;
height: 320px;
display: inline-block;
margin: 10px;
}
</style>
<body>
<ul>
<li>
<h5>最简单配置</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn'})" />
</li>
<li>
<h5>显示年：dateFmt:'yyyy'</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy'})" />
</li>
<li>
<h5>显示年月：dateFmt:'yyyyMM'</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyyMM'})" />
</li>
<li>
<h5>显示年月日：dateFmt:'yyyyMMdd'</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyyMMdd'})" />
</li>
<li>
<h5>显示年月日时分秒：dateFmt:'yyyyMMdd HH:mm:ss'</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyyMMdd HH:mm:ss'})" />
</li>
<li>
<h5>格式化:年月日时分秒：dateFmt:'yyyy年MM月dd日 HH时:mm分:ss秒'</h5>
<input type="text" class="Wdate" style="width: 400px;display: inline-block;"
onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy年MM月dd日 HH时:mm分:ss秒'})" />
</li>
<li>
<h5>设置只读：readOnly:true</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',readOnly:true})" />
</li>
<li>
<h5>隐藏清空按钮：isShowClear:false</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',isShowClear:false})" />
</li>
<li>
<h5>设置今天为最小日期：minDate:new Date()</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',minDate:new Date()})" />
</li>
<li>
<h5>设置今天为最大日期：maxDate:new Date()</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',maxDate:new Date()})" />
</li>
<li>
<h5>设置明天为最小日期：minDate:'%y-%M-{%d+1}'</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',minDate:'%y-%M-{%d+1}'})" />
</li>
<li>
<h5>只能选择本月第一天到最后一天：minDate:'%y-%M-01',maxDate:'%y-%M-%ld'</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})" />
</li>
<li>
<h5>开始日期不能大于结束日期，且都不能大于今天：</h5>
<!--开始日期-maxDate:'#F{$dp.$D(\'endDate\')||\'new Date()\'}'
结束日期-minDate:'#F{$dp.$D(\'startDate\')}',maxDate:new Date()-->
<input id="startDate" type="text" class="Wdate"
onfocus="WdatePicker({lang:'zh-cn',maxDate:'#F{$dp.$D(\'endDate\')||\'new Date()\'}'})" />
<input id="endDate" type="text" class="Wdate"
onfocus="WdatePicker({lang:'zh-cn',minDate:'#F{$dp.$D(\'startDate\')}',maxDate:new Date()})" />
</li>
<li>
<h5>设置显示周</h5>
<input type="text" class="Wdate" onfocus="WdatePicker({lang:'zh-cn',isShowWeek:true})" />
</li>
</ul>
</body>
</html>