VS自带了一个日历控件：Calendar，但是它有一个缺陷：即在选择，隐藏，显示的时候都会引起回传

Calendar控件的一些用法：
    取值：Calendar1.SelectedDate.ToShortDateString();  //YYYY-MM-DD
          Calendar1.SelectedDate.Month;  //从1开始，即几月即是几，不用+1

本文主角：My97DatePicker
用法：
1.复制控件文件夹至项目根目录
2.将文件夹下的WdatePicker.js文件引入页面(直接拖入页面的<head>标签内)
3.在页面中添加一个text，在其源码中增加CssClass="Wdate"和onclick="WdatePicker()"
eg: 
 <input class="Wdate" type="text" onclick="WdatePicker()"/>
效果图：

上面的样式都可以在其提供的css文件中修改
资源下载：
http://www.jb51.net/jiaoben/18012.html#down  

=================================
重要参数 
【startDate】 ： 可以指定 日历展示的时候，定位在哪一天，默认是 当天 ；可以进行个性化设置  比如把 当天+1作为 日历展示的时候指向的日期；  startDate:'%y-%M-#{%d}'--》当天 startDate:'%y-%M-#{%d+1}'--》  当天加1  

【dateFmt】   ：可以指定要显示的内容的格式  'yyyy-MM-dd'显示年月日   在text中以 yyyy-MM-dd的方式呈现，如果是 yyyy年MM月dd日 则text里面以 yyyy年MM月dd日的形式呈现 ；
   如果加上 HH:mm:ss 则还会显示时间， 
 

【maxDate】 ：最大日期
【minDate】：最小日期 
'%y-%M-#{%d}' 表示当天日期  

以另外的text的日期为准操作，比如两个text，开始日期不能大于结束日期
'#F{$dp.$D(\'txtEndDate\',{d:-1})}'  使用其他text的日期内容为限制txtEndDate是那个text的id标签
 
     <input type="text" id="myStart" value="" class="Wdate"  onclick="WdatePicker({maxDate:'#F{$dp.$D(\'myEnd\',{d:-1})}',startDate:'%y-%M-#{%d}',dateFmt:'yyyy年MM月dd日'})" />

    <input type="text" id="myEnd" value="" class="Wdate"  onclick="WdatePicker({minDate:'#F{$dp.$D(\'myStart\',{d:0})}',startDate:'%y-%M-#{%d}',dateFmt:'yyyy年MM月dd日'})" />

d:0表示 最小值可以和myStart文档框的时间相同，d:-1表示最大值比 myEnd文本框的值小1天
属性的顺序，minDate/MaxDate----startDate----dateFmt

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 style="width: 75px" placeholder="开始时间" type="text"

name="beginintime" value="" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'endintime\')}',startDate:'%y-%M-#{%d+1}',dateFmt:'yyyy-MM-dd'})"

id="beginintime" />

-

<input style="width: 75px"  placeholder="结束时间" type="text"

name="endintime" value="" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'beginintime\')}',startDate:'%y-%M-%dd',dateFmt:'yyyy-MM-dd'})"

id="endintime" />

<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复制到函数里。 

 

My97DatePicker{js日历插件}的更多相关文章

  1. js日历插件 中文、英文日历

    日历插件 来源网站:http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 六款英文日历 http://www.bobd.cn/desi ...

  2. JS日历插件 - My97 DatePicker用法详解

    一.简介 1. 注意事项 (1)My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名: (2)各目录及文件的用途: WdatePicker.js 配 ...

  3. My97DatePicker(js日期插件) v4.8

    1.下载地址 https://files.cnblogs.com/files/yu-shang/My97DatePicker.zip 2.文档地址 http://my97.net/demo/index ...

  4. 纯js日历插件

    成品的效果图 1.HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  5. 日历插件My97DatePicker的使用

    在开发过程中,我们会经常遇到让用户输入日期的表单,这类表单处理起来也不是太繁琐,就是简单的字符串和日期之间的转换.但是,如果用户不按照已设定的日期格式进行输入,必定会造成不必要的麻烦.为了更好的处理这 ...

  6. JQuery日历插件My97DatePicker日期范围限制

    My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 <input class="Wdate" ...

  7. 记录-JQuery日历插件My97DatePicker日期范围限制

    对于日期控件,有时会有不能选择今天以前的日期这种需求..... My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 & ...

  8. jquery.jCal.js显示日历插件

    描述:日历插件jCal用于需要输入日期的表单文本框. 兼容浏览器:IE浏览器/Firefox/Google Chrome 官方链接: http://www.overset.com/2008/05/1 ...

  9. 完全原生javascript简约日历插件，js、html

    效果图: 效果如图所示,尽管看上去并不是很美观,但是,基本上的功能还是已经完成了,码了一天多的时间,权当做复习一下js吧. 整个做下来差不多码了500多行代码~其实只是很多的样式也包括了在其中了,虽然 ...

随机推荐

  1. 屏蔽cBox广告的方法 无需安装软件

    在hosts文件中加入两句代码: 127.0.0.1 games.cntv.cn 127.0.0.1 d.cntv.cn

  2. Linux 命令 - wget: 非交互式网络下载器

    命令格式 wget [option]... [URL]... 命令参数 启动选项 -V, --version 打印版本信息 -h, --help 打印帮助信息 日志和输入文件选项 -o logfile ...

  3. 初学Android: 四大组件之Activity

    1.activity (1)一个Activity通常就是一个单独的屏幕(窗口),简单来说activity就是一个交互界面,一般应用程序都要由一个或者多个activity组成. (2)Activity之 ...

  4. 抽象类[abstract]_C#

    抽象类(abstract) abstract修饰符可以和类.方法.属性.索引器及事件一起使用.在类声明中使用abstract修饰符以指示某个类只能是其它类的基类.标记为抽象或包含在抽象类中的成员必须通 ...

  5. spring aop配置及用例说明（4）

    欢迎交流转载:http://www.cnblogs.com/shizhongtao/p/3476161.html 这里简单对xml的配置方式做一下描述.代码还是上一篇(http://www.cnblo ...

  6. linux同步

    1. 内核同步 主要是防止多核处理器同时访问修改某段代码,或者在对设备驱动程序进行临界区的保护. 1 .互斥量 头文件 #include<linux/mutex.h> 初始化方法: 静态初 ...

  7. OpenJudge 2721 忽略大小写比较字符串大小

    1.Link: http://bailian.openjudge.cn/practice/2721/ 2.Content: 总时间限制: 1000ms 内存限制: 65536kB 描述 一般我们用st ...

  8. 我们一起学Windows Phone 8-01-开发环境搭建

    我们仅讨论Windows Phone 8的开发,不考虑兼容向下兼容.也不会提供任何盗版软件的下载.破解. 需要准备 知识:.NET相关开发经验,C#语言开发经验.如果有WPF或Silverlight开 ...

  9. nodejs remote链接mysql数据库总结

    nodejs链接远端mysql,这个折腾了一个上午才搞定.本以为,直接使用就OK了,但是发现不行,后来查阅各种资料后,终于找到了方法. nodejs链接远端数据库主要分为几个步骤: 1)安装node- ...

  10. MySQL定时检查是否宕机并邮件通知

    我们有时候需要一些检查MySQL是否宕机,如果宕机了应自动重新启动应用并通知运维人员!此脚本用来简单的实现MySQL宕机后自动重启并邮件通知运维,此为SHELL脚本,当然也有一些朋友喜欢用Python ...