zoukankan      html  css  js  c++  java
  • My97日历控件常用功能记录

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

    1 可以选择任何日期

    <input id="txtDate" class="Wdate" type="text" onfocus="WdatePicker()" />

    2 今天以前的日期

    <input type="text" class="Wdate" 
    onfocus="WdatePicker({maxDate:'%y-%M-#{%d}'})" />

    3 今天以后的日期

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

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

    <!--今天以前的日期不包括今天-->
    <input type="text" class="Wdate" 
        onfocus="WdatePicker({maxDate:'%y-%M-#{%d-1}'})" />
     <!--今天以后的日期不包括今天-->
    <input type="text" class="Wdate" 
        onfocus="WdatePicker({minDate:'%y-%M-#{%d+1}'})" />

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

    <input type="text" class="Wdate" 
    onfocus="WdatePicker({maxDate:'%y-%M-#{%d}',minDate:'%y-%M-#{%d}'})" />

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

    <input id="txtStartDate" type="text" class="Wdate" 
        onclick="WdatePicker({maxDate:'#F{$dp.$D(\'txtEndDate\',{d:-1})}'})" />
    <input id="txtEndDate" type="text" class="Wdate" 
        onclick="WdatePicker({minDate:'#F{$dp.$D(\'txtStartDate\',{d:1})}'})" />

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

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

    <input type="text" class="Wdate" 
        onfocus="WdatePicker({maxDate:'%y-%M-#{%d}',
        minDate:'%y-%M-#{%d-7}'})" />
    <!--选择今天以后7天的日期-->
    <input type="text" class="Wdate" 
        onfocus="WdatePicker({minDate:'%y-%M-#{%d}',
        maxDate:'%y-%M-#{%d+7}'})" />

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

    <input id="txtB" type="text"  class="Wdate"
        onclick="WdatePicker({minDate:'%y-%M-#{%d}',
        maxDate:'#F{$dp.$D(\'txtE\',{d:-1})}'})"/>
    <input id="txtE" type="text"  class="Wdate"
        onFocus="WdatePicker({minDate:'#F{$dp.$D(\'txtB\',{d:1})||
        \'%y-%M-#{%d+2}\'}'})"/>

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

    <input id="txtBegin" class="Wdate" type="text" 
        onfocus="var d5222=$dp.$('txtEnd');
        WdatePicker({onpicked:function(){txtEnd.focus();},
        maxDate:'#F{$dp.$D(\'txtEnd\')}'})" />
    <input id="txtEnd" class="Wdate" type="text" 
        onfocus="WdatePicker({minDate:'#F{$dp.$D(\'txtBegin\')}'})" />

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

    <!--给文本加上class=Wdate 文本框的右边就有日历小图标-->
    <input class="Wdate" type="text" onfocus="WdatePicker()" />
    <!--禁止文本框输入-->
    <input class="Wdate" type="text" onfocus="WdatePicker({readOnly:true})" />
    <!--禁止文本框输入-->
    <input class="Wdate" type="text" onfocus="WdatePicker({isShowClear:false})" />
     <!--当然几种功能也能放到一起-->
    <input class="Wdate" type="text" 
    onfocus="WdatePicker({readOnly:true,isShowClear:false})" />

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

    注:上面又涉及到开始日期和结束日期两个日期框的,文本框控件必须要有id,这个id函数里面会用到,如果您的开发中使用了Aspnet中的MasterPage,那么文本框的id在生成页面后会改变,类似于:ctl00_ContentPlaceHolder1_txtEndDate,如果还是用文本框本身的id是不会起作用的,我的做法是查看源文件将生成的id复制到函数里。

  • 相关阅读:
    CF1539 VP 记录
    CF1529 VP 记录
    CF875C National Property 题解
    CF1545 比赛记录
    CF 1550 比赛记录
    CF1539E Game with Cards 题解
    CF1202F You Are Given Some Letters... 题解
    vmware Linux虚拟机挂载共享文件夹
    利用SOLR搭建企业搜索平台 之九(solr的查询语法)
    利用SOLR搭建企业搜索平台 之四(MultiCore)
  • 原文地址:https://www.cnblogs.com/oec2003/p/1617697.html
Copyright © 2011-2022 走看看