My97DatePicker日历插件

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‘]})"/>

时间: 2024-11-05 16:10:45

My97DatePicker日历插件的相关文章

My97DatePicker日历插件特殊日期做标记的使用

最近项目中有用到日历表,针对特殊日期做标记.项目中需求是查询到本月有录像则在对应日期做标记.项目中使用到了jQuery的My97DatePicker日历插件. 下面就介绍下如何使用My97DatePicker日历插件及实现对应功能. 一.项目中引入My97DatePicker包 二.jsp页面中引入WdatePicker.js <script type="text/javascript" src="/common/js/My97DatePicker/WdatePicke

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

转:http://www.xiongge.club/744.html My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 <input class="Wdate" id="d1" onclick="WdatePicker()" /> 下面重点说明日期范围限制: 1)静态限制 你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期

javascript日历插件

最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一大把的日历控件,但是没有几个是自己想要的,虽然效果是实现了,但是看他们的源码,头有点大,所以自己也在研究这方面的东西.周末用了2天来研究别人写的代码 自己也试着做做demo,今天正好基本功能完成了,所以趁着这个机会分享下:我们可以先来看看效果:JSFiddler地址如下: demo链接请点击我 基本的配置如下:    targetCls '',    输入框dom

Kalendae——一款功能强大的日历插件

url:http://zjingwen.github.io/SetTimeOutGoBlog/kalendae/index.html (如果打开过慢,或者打不开,原因你懂得.) 一.Kalendae--一款功能强大的日历插件,英文版的,我英文太渣,有没有找到,中文文档.只能自己慢慢翻译,鼓捣了. 二.基本信息 Kalendae支持多种日历样式,可双联.单联.多联,支持单选日期,多选日期.联排选择.跨月选择.而且依赖图片极少,对于使用css来重构UI界面,非常有利. 依赖于了kaledae.js.

根据一篇js日历插件改写的

1 <!-- 2 控件调用示例: 3 --> 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 7 <html xmlns="http://www.w3.org/1999/xhtml"> 8 9 <he

【UI插件】简单的日历插件(下)—— 学习MVC思想

前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么就应该考虑其它UI库的接入问题 这个意思就是,我们的系统中所有UI插件应该有一些统一行为,我们如果希望统一为所有的插件加一点什么东西,需要有位置可加 这个意味着,可能我们所有的插件需要继承至一个抽象的UI类,并且该类提供了通用的几个事件点 ② 上次做的日历插件虽然说是简单,其耦合还是比较严重的(其实

基于jQuery的日历插件

上个星期看到同事做一个有关日历提醒功能的需求,为了找个插件也是费了不少心思,然后刚好有时间就试着写了一个简单demo 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天,需要一个7X6的表格去装载 ·如果知道了某个月份1号是星期几,这个月份有多少天,一个循环就可以显示某个月的日历了吧(眼睛都放光了*.*) ·加上一些控件让用户可以方便操作吧(比如可以输入年份.月份,可以点击选择年份.月份) 新建一个html文件,html结构: <

结束日期必须大于开始日期--My97DatePicker日历控制的又一方便之处

在做时间查询时,有时需要两个日期,从一个日期到另外一个日期的那种,但是这样会有一个问题,比如后者的结束日期晚于开始日期怎么办?用JS写验证,麻烦,呵呵,用这个日历控件,可方便实现结束日期只显示开始日期之后的日期,具体的参看以下效果图: 比如我选择开始日期是7月28,那结束的日期将只能从7月28日后面的日期里来选择,省去了我们JS验证结束日期小于开始日期的麻烦. 具体代码如下: 开始日期的input id = "startDate" 结束日期的input id = "endDa

JavaScript之jQuery-7 jQuery 使用插件(使用插件、日历插件、表单验证插件)

一.jQuery 使用插件 插件的查找与帮助 - jQuery 官方网站的插件库(http://plugins.jquery.com) 提供了大量的插件.并给出去了每个插件的用户评级.版本及bug等 - 库中列出了每个插件的ZIP文件下载.演示.示例代码及教程 使用插件 - step 1:将插件包导入到页面中,并确保它在jQuery源文件之后 <script src="jqeury-1.11.1.js"></script> <script></