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. [改善Java代码]频繁插入和删除时使用LinkedList

    一.分析 前面有文章分析了列表的表里方式,也就是“读”的操作.本文将介绍表的“写”操作:即插入.删除.修改动作. 二.场景 1.插入元素 列表中我们使用最多的是ArrayList,下面看看他的插入(a ...

  2. [改善Java代码]构造代码块会想你所想

    建议37: 构造代码块会想你所想 镜像博文:http://www.cnblogs.com/DreamDrive/p/5413408.html http://www.cnblogs.com/DreamD ...

  3. MSP430常见问题之AD转换类

    Q1:MSP430F149 AD 的输入阻抗有多大?A1:RC<2000欧*30PF Q2:MSP430 ADC12 模块的速度?A2: ADC12 的转换速率是转换所需的ADC12CLK 以及 ...

  4. 【转】istringstream、ostringstream、stringstream 类介绍 .

    http://www.cnblogs.com/gamesky/archive/2013/01/09/2852356.html 好吧,懒死我算了

  5. 用Gradle 构建android程序

    前言 android gradle 的插件终于把混淆代码的task集成进去了,加上最近,android studio 用的是gradle 来构建项目, 下定决心把android gralde 构建项目 ...

  6. Visual Studio Team Foundation Server 2015(TFS 秘钥、序列号)

    Visual Studio Team Foundation Server 2015 序列号:PTBNK-HVGCM-HB2GW-MXWMH-T3BJQ

  7. Jersey(1.19.1) - XML Support

    As you probably already know, Jersey uses MessageBodyWriters and MessageBodyReaders to parse incomin ...

  8. Asp.net中基于Forms验证的角色验证授权

    Asp.net的身份验证有有三种,分别是"Windows | Forms | Passport",其中又以Forms验证用的最多,也最灵活. Forms 验证方式对基于用户的验证授 ...

  9. java开发：分享一下使用urlrewrite实现网址的个性访问

    很多网站都有一些比较个性的域名访问方式,如:http://www.xxx.com/u/pp  点开就可以看到pp的个人主页了,这种地址比较容易让人记住,那今天就来讲讲这种技术的实现方式. 1.使用ja ...

  10. Javascript之简单按钮搜索功能

    学习JavaScript我觉得真实的感觉就是可以任意设计,“没有做不到只有想不到!”即使简单,但是任何东西的复杂都是从简单.基础开始的!这是我自己做的一个超简单的"搜索引擎"按钮, ...