天天看点

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

$(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});
         });
});      

继续阅读