my97显示双日历

大名鼎鼎的my97 日期选择控件,做开发的攻城狮应该或多或少都了解.

今天正好有个需求是现实双月份,而且截至日期要大于开始日期等需求,第一时间想到了my97控件.首先把最后的效果图放上来一睹为快!

我的页面首先有2个文本框,一个开始日期,一个结束日期

<input type=“text” id=“startTime” placeholder=“起始日期”/> - 
<input type=“text” id=“endTime” placeholder=“结束日期”/>

首先去 my97 官网下载控件,引用的时候最需要引用一个主文件即可,其他样式,图片等都不需考虑,脚本内部做了引用.

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

然后给 开始日期  结束日期 俩个文本框绑定DatePicker脚本.

$(“#startTime”).bind(“click”,function(){
             WdatePicker({});
         });
         $(“#endTime”).bind(“click”,function(){
             WdatePicker({});
         });

OK,就是这样,俩个日历控件就轻松绑定了,但是我们上面提到的需求远远不满足,我们一个一个分析.

首先:我需要现实日历格式是 yyyy-MM-dd ,对应配置 WdatePicker({dateFmt:’yyyy-MM-dd’})

我需要日历默认从上个月显示  WdatePicker({dateFmt:’yyyy-MM-dd’,startDate:’%y-{%M-1}-%d’})

我需要日历现实双月份   WdatePicker({dateFmt:’yyyy-MM-dd’,startDate:’%y-{%M-1}-%d’,doubleCalendar:true})  这样日历默认显示上个月和本月.

我需要开始日期不能大于结束日期 WdatePicker({dateFmt:’yyyy-MM-dd’,startDate:’%y-{%M-1}-%d’,doubleCalendar:true,maxDate:’#F{$dp.$D(\’endTime\’)||\’%y-%M-%d\’}'})

这里详细看下maxDate 值:#F{$dp.$D(\’endTime\’)||\’%y-%M-%d\’  如果控件ID为  endTime 有值?那么起始日期值不能大于此值,如果没有值,则不能大于今天  \’%y-%M-%d\’ 表示今天.

对于结束日期,则最小值不能小于起始日期 ,配置如下:  minDate:’#F{$dp.$D(\’startTime\’)}’   startTime 为起始日期文本框ID

最后我希望选择完开始日期后,自动弹出结束日期选择框  见配置项  onpicked:function(){endTime.click();}    这里的endTime 是结束日期文本框元素ID

最后这俩个文本框的click事件绑定如下:

$(function(){
         $(“#startTime”).bind(“click”,function(){
             WdatePicker({doubleCalendar:true,startDate:‘%y-{%M-1}-%d’,dateFmt:‘yyyy-MM-dd’,autoPickDate:true,maxDate:‘#F{$dp.$D(\’endTime\’)||\’%y-%M-%d\’}’,onpicked:function(){endTime.click();}});
         });
         $(“#endTime”).bind(“click”,function(){
             WdatePicker({doubleCalendar:true,startDate:‘%y-{%M-1}-%d’,minDate:‘#F{$dp.$D(\’startTime\’)}’,maxDate:‘%y-%M-%d’,dateFmt:‘yyyy-MM-dd’,autoPickDate:true});
         });
});

上面是最后完整代码,2013年 平安夜快乐.

End!