JS日期控件My97DatePicker基本用法

以下是JS日期控件My97DatePicker基本用法的完整攻略。

一、My97DatePicker是什么

My97DatePicker是一款轻便好用的日期控件，可以自由定制样式，并支持所有主流的浏览器。

二、基本用法

1. 引入My97DatePicker

在文档的标签中插入以下代码，即可引入My97DatePicker：

<link rel="stylesheet" type="text/css" href="plugins/My97DatePicker/skin/WdatePicker.css">
<script type="text/javascript" src="plugins/My97DatePicker/WdatePicker.js"></script>

其中，WdatePicker.css是控件的样式文件，WdatePicker.js是My97DatePicker主文件。

2. 在HTML页面中添加控件

在需要使用控件的页面的标签中，以input标签的形式添加控件。例如：

<input type="text" class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})">

其中，class为“Wdate”表示要使用My97DatePicker控件，onClick事件绑定的是WdatePicker()函数，dateFmt表示格式化日期的方式，可以根据实际需求修改。

3. 控件的基本样式

My97DatePicker控件有一个默认的样式，也可以手动修改为自己需要的样式。例如：

<style type="text/css">
    .Wdate{background:#fff;border:1px solid #f60;}
</style>

这个样式将控件背景设置为白色，边框为橙色。

4. 控件的高级用法

My97DatePicker控件还有许多高级用法，可以控制控件的大小、位置、开启日历、限制日期选择等等。以下是两个例子：

例1：控件限制只能选择当前日期之后的日期

<input type="text" class="Wdate" onClick="WdatePicker({minDate:'%y-%M-%d'})">

例2：控件显示后自动弹出日期选择面板

<input type="text" class="Wdate" onClick="WdatePicker({skin:'twoer',dateFmt:'yyyy年MM月dd日 HH:mm',autoPickDate:true})">

在这个示例中，skin设置了控件的样式，dateFmt设置日期的格式为“yyyy年MM月dd日 HH:mm”，autoPickDate设为true表示在调用控件时自动弹出日期选择面板。

三、注意事项

1. 每个页面只需要引入一次My97DatePicker控件即可；
2. 当页面采用AJAX方式局部刷新时，控件未能正确显示；
3. 部分中文IE浏览器版本中My97DatePicker的层级最高，导致其在一些隐藏层中不能正确显示；
4. 控件样式的修改需要有一定的CSS基础，不建议进行大面积改动。

以上就是My97DatePicker基本用法的完整攻略，希望能对您有所帮助。