My97DatePicker具有强大的日期功能,能限制日期范围,对于编写双日历比较简便。

注意事项:

My97DatePicker目录是一个整体,不可以破坏

My97DatePicker.html 是必须的文件 不可以删除

各个目录及文件的用途

WdatePicker.js  配置文件 可多个共存

config.js 语言和皮肤配置文件 (可以不引入)

calendar.js 日期库主文件(可以不引入)

1、正常调用

<input id="demo1" type="text" onClick="WdatePicker()"/>

2、图标触发

<input id="d12" type="text"/>
<img onclick="WdatePicker({el:'d12'})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle">

注释:el为挂载元素  后面传入控件的id

3、支持周显示

<input id="d121" type="text" onfocus="WdatePicker({isShowWeek:true})"/>

4、利用onpicked事件把周赋值给另外的文本框

<input type="text" class="Wdate" id="d122" onFocus="WdatePicker({isShowWeek:true,onpicked:function() {$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>

5、只读开关,高亮周末显示

设置readOnly属性 true或false设置是否为只读模式

设置highLineWeekDay属性true或false可指定是否高亮周末

6、清空按钮和今天按钮的控制

需要自定义,分别对应isShowClear 和 isShowToday 默认值都为true

7、自定义弹出的位置

<input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:100,top:50}})"/>

8、自定义日期的第一天

<input class="Wdate" type="text" id="d17" onfocus="WdatePicker({firstDayOfWeek:1})"/>

9、起始日期

注意:日期格式必须与 realDateFmt 和realTimeFmt 一致

<input type="text" id="d221" onFocus="WdatePicker({startDate:'1980-05-01'})"/>

10、设置内置参数

<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>

11、自定义样式

<input type="text" id="d241" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})" class="Wdate" style="width:300px"/>

<input type="text" id="d242" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})" class="Wdate"/>

12、双日历

<input class="Wdate" type="text" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"/>

注意:双月日历一般只用于包含年月日三个元素的场景,另外设置该属性时,autoPickDate自动设置为true

日期范围限制

1、静态限制

<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>

限制日期的范围是 2006-09-10到2008-12-20

<input type="text" class="Wdate" id="d412" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" value="2008-03-09 11:00:00"/>

限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30

<input type="text" class="Wdate" id="d413" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'2008-10'})"/>

限制日期的范围是 2008年2月 到 2008年10月

<input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>

限制日期的范围是 8:00:00 到 11:30:00

2、动态限制

只能选择今天以前的日期(包括今天)

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

使用了运算表达式 只能选择今天以后的日期(不包括今天)

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

只能选择本月的日期1号至本月最后一天

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

只能选择今天7:00:00至明天21:00:00的日期

<input id="d424" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>

使用了运算表达式 只能选择 20小时前 至 30小时后 的日期

<input id="d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/>

3、脚本自定义限制

前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01

<input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/> 
<input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>

前面的日期+3天 不能大于 后面的日期

<input type="text" class="Wdate" id="d4321" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})"/>
<input type="text" class="Wdate" id="d4322" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})"/>

前面的日期+3月零2天 不能大于 后面的日期 且 前面日期都不能大于 2020-4-3减去3月零2天 后面日期 不能大于 2020-4-3

<input type="text" class="Wdate" id="d4331" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/>
<input type="text" class="Wdate" id="d4332" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:'2020-4-3'})"/>

4、无效天

<input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>

5、无效日期

<input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>

禁用 每个月份的 5日 15日 25日

<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>

禁用 所有早于2000-01-01的日期

<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>

设置起始时间

<div class="control-group">
  <label class="control-label">竞拍时间 : </label>
  <div class="controls">
    <input type="text" class="span6 m-wrap" name="tenderEndTime" id="bidTime" placeholder="请选择时间" onfocus="WdatePicker({position:{left:0,top:-40},dateFmt:'yyyy-MM-dd HH:mm',readOnly:true,minDate:'%y-%M-%d       H:%m'})" value="" required="required">
  </div>
</div>
<div class="control-group">
  <label class="control-label">采购截止时间 : </label>
  <div class="controls">
    <input type="text" class="span6 m-wrap" name="tenderEndTime" id="endTime" placeholder="请选择时间" onfocus="WdatePicker({position:{left:0,top:-40},dateFmt:'yyyy-MM-dd                                                   HH:mm',readOnly:true,minDate:'#F{$dp.$D(\'bidTime\')}'})" value="" required="required">
  </div>
</div>

<div class="control-group">
  <label class="control-label">收货时间 : </label>
  <div class="controls">
    <input style="text-indent:10px;" id="reciveTime" class="span6 m-wrap" placeholder="请选择时间" name="deliveryStartTime" onfocus="WdatePicker({position:{left:0,top:-40},dateFmt:'yyyy-MM-                              dd',readOnly:true,minDate:'#F{$dp.$D(\'endTime\')}'})" required="required"/>
  </div>
</div>

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

  1. 日历插件My97DatePicker的使用

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

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

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

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

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

  4. Jquery中的日历插件

    这个插件很简单:只需要在HTML代码中引入插件如下,CLASS名和click事件函数固定! <!doctype html> <html lang="en"> ...

  5. 日历插件js,jquery

    常用的日历插件 DatePicker My97DatePicker   文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有问题一起学习欢迎留言. ...

  6. 被逼着写的jquery工作日管理日历插件

    因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo.我的天,我面试的可是.net工程师啊.虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上 ...

  7. 日历插件FullCalendar应用:(二)数据增删改

    接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...

  8. 一款基于jQuery日历插件的开发过程

    这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的  也就是说  日历的样式是定制的: /******************************** ...

  9. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

随机推荐

  1. nosql的介绍以及和关系型数据库的区别

    一直对非关系型数据库和关系型数据库的了解感觉不太深入,在网上收集了一些关于sql和nosql的区别和优缺点分享给大家. Nosql介绍 Nosql的全称是Not Only Sql,这个概念早起就有人提 ...

  2. 吴裕雄--天生自然C++语言学习笔记:C++ 判断

    判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的). 下面是大多数编程语言中典型的判断结构的一般形式: 判断语句 if 语句 一 ...

  3. Docker Python 例子

    版权所有,未经许可,禁止转载 章节 Docker 介绍 Docker 和虚拟机的区别 Docker 安装 Docker Hub Docker 镜像(image) Docker 容器(container ...

  4. Spring 控制反转容器(Inversion of Control – IOC)

    系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of Contro ...

  5. 【剑指Offer】面试题09. 用两个栈实现队列

    题目 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead ,分别完成在队列尾部插入整数和在队列头部删除整数的功能.(若队列中没有元素,delete ...

  6. 从谷歌Pixel3不堆硬件看智能手机下一个十年将被AI制霸

    别看现在的智能手机行业热闹异常--厂商混战.新品频出.噱头涌现,但能引领手机行业发展趋势的依旧是苹果和谷歌.如果说苹果的iPhone树立了一个个智能手机行业进化的标杆,那么谷歌其实就是在为安卓手机的发 ...

  7. oracle数据库语言(2)----数据操作语言

    DML(数据操纵语言)Data Manipulation Language 用于增.删.改 数据库中的数据 常伴随着TCL(事物操作语言)----commit(保存):rollback(回滚): ), ...

  8. 如何搞定Critical Thinking写作?

    受中国传统教育模式与国外一流大学之间的差异的影响,在海外留学的学子们常常会在新的学习生活中面临许多难题,Critical Thinking就是其中之一.国内的教育方法常常以灌输式的教育模式为主,忽略了 ...

  9. tortoiseGit 的简单使用说明

    拉取仓库到本地 参考 下面几张图片,把仓库拉取到本地. 本地修改并推送 进入文件夹后,按照 下面几张图片切换到本地的开发分支 当修改完成之后,按照 下面几张图片 的方法把修改推送到远程仓库的开发分支. ...

  10. Adaboost的python实现

    不要总是掉包欧,真的丢人啊,一起码起来! '''函数的功能:单层决策树分类函数参数说明: xMat:数据矩阵 i:第i列,第几个特征 Q:阈值返回分类结果: re'''import numpy as ...