日期插件My97DatePicker

最新推荐文章于 2021-06-03 04:00:37 发布

山城程序员

最新推荐文章于 2021-06-03 04:00:37 发布

阅读量494

点赞数

分类专栏： js插件文章标签： jquery 插件

js插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

My97相信大家都不陌生，应该是我所见过的最强大的一个日历控件了，最近的项目中也比较多地用到了此控件，而且项目中经常会有不同时间范围的需求，在此列出一些比较常用的日期范围格式的设置，尽管在My97的官方文档中有很详细的介绍，正是因为很详细所以查找起来不是很方便。

1 可以选择任何日期

2 今天以前的日期

3 今天以后的日期

上面设置今天以前和今天以后的日期用到的是maxDate和minDate，%y-%M-#{%d} 表示的是当天的日期，如果想今天以前或是今天以后的日期不包括今天，设置表达式中的d减去1或是加上1即可，如下：

<input type="text" class="Wdate"     οnfοcus="WdatePicker({maxDate:'%y-%M-#{%d-1}'})" />
    
    <input type="text" class="Wdate"     οnfοcus="WdatePicker({minDate:'%y-%M-#{%d+1}'})" />

4 同样如果只能选择今天设置maxDate和minDate都为今天就行，不过这个不常用到

5 两个日期框，结束日期大于开始日期

如果将结束日期框的onclick里的{d:1} 改成{d:0}，就表示结束日期可以选择和开始日期同一天

6 今天以前或以后N天的日期

7 两个日期框，结束日期大于开始日期，并且都是今天以后的日期

8 两个日期框，第一个选择后触发第二个弹出

常用的日期范围选择先就总结这么多，还有些的功能比如给文本框加个日历小图标、禁止文本框输入、禁止日历控件清空等也是很常用的，代码如下：

<input class="Wdate" type="text" οnfοcus="WdatePicker()" />
    
    <input class="Wdate" type="text" οnfοcus="WdatePicker({readOnly:true})" />
    
    <input class="Wdate" type="text" οnfοcus="WdatePicker({isShowClear:false})" />
    
    <input class="Wdate" type="text" οnfοcus="WdatePicker({readOnly:true,isShowClear:false})" />

这里只是列出了些常用的功能，要想了解更多还是去看官方文档吧。至于日期范围的选择，看懂了那些代码就可以很容易地根据需求进行更改了。

附上一个小实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery学习第一部分</title>
<script type="text/javascript" src="js/date/WdatePicker.js"></script>
<style type="text/css">
html,body{
font-size: 13px;
font: normal;
}
table{
font-size: 13px;
}
</style>
</head>
<body>
好用的日期插件My97DatePicker，下面是日期选择范围的示例，包括设定日期选择的起始日期、日期的格式化以及日期的最大值<br/>
<table>
<tbody>
<tr>
<th>开始日期</th>
<td>
<input type="text" id="beginDate" readonly="readonly" name="endDate" class="Wdate"
onclick="WdatePicker({startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'endDate\')}'} )"/>
</td>
</tr>
<tr>
<th>结束日期</th>
<td>
<input type="text" id="endDate" readonly="readonly" name="endDate" class="Wdate"
onclick="WdatePicker({startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'beginDate\')}'})"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>

山城程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
日期插件My97DatePicker

My97相信大家都不陌生，应该是我所见过的最强大的一个日历控件了，最近的项目中也比较多地用到了此控件，而且项目中经常会有不同时间范围的需求，在此列出一些比较常用的日期范围格式的设置，尽管在My97的官方文档中有很详细的介绍，正是因为很详细所以查找起来不是很方便。1 可以选择任何日期2 今天以前的日期3 今天以后的日期上面设置今天以前和今天以后的日期用到的是maxDate
复制链接

扫一扫