<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{height:5000px}
*{margin:0; padding:0;}
ul {overflow:hidden;}
li {float:left; margin:20PX 100px 200px 0; list-style: none;}
input{width: 300px;}

div{overflow:hidden;}
div input{margin:20PX 100px 200px 50px; }
#span1{ display:block;width:100px; height:50px; background: #ccc;}
</style>
<script src="My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>最简单显示:（年月日）
<input type="text" class="Wdate" placeholder="yyyy-mm-dd" onFocus="WdatePicker({lang:'zh-cn'})">
</li>

<li >显示年月日:
<input type="text" class="Wdate" placeholder="dateFmt:'yyyyMMdd'" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})">
</li>

<li>显示年:
<input type="text" class="Wdate" placeholder="dateFmt:'yyyy'" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy'})">
</li>

<li>显示年月:
<input type="text" class="Wdate" placeholder="dateFmt:'yyyyMM'" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM'})">
</li>

<li>显示年月日时分秒:
<input type="text" class="Wdate" placeholder="dateFmt:'yyyyMMdd HH:mm:ss'" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})">
</li>

<li>显示格式化（年月日时分秒）:
<input type="text" class="Wdate" placeholder="dateFmt:'yyyy年MM月dd日 HH时:mm分:ss秒'" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy年MM月dd日 HH时:mm分:ss秒'})">
</li>

<li>显示年月日时分秒（只读,不能输入时间）:
<input type="text" class="Wdate" placeholder="readOnly:true" onFocus="WdatePicker({lang:'zh-cn',readOnly:true})">
</li>

<li>隐藏清空按钮:
<input type="text" class="Wdate" placeholder="isShowClear:false" onFocus="WdatePicker({lang:'zh-cn',isShowClear:false})">
</li>

<li>设置今天为最小日期:
<input type="text" class="Wdate" placeholder="minDate:new Date()" onFocus="WdatePicker({lang:'zh-cn',minDate:new Date()})">
</li>

<li>设置今天为最大日期:
<input type="text" class="Wdate" placeholder="maxDate:new Date()" onFocus="WdatePicker({lang:'zh-cn',maxDate:new Date()})">
</li>

<li>设置明天为最小日期:
<input type="text" class="Wdate" placeholder="minDate:'%y-%M-{%d+1}'" onFocus="WdatePicker({lang:'zh-cn',minDate:'%y-%M-{%d+1}'})">
</li>

<li>只能选择本月第一天到最后一天:
<input type="text" class="Wdate" placeholder="minDate:'%y-%M-01',maxDate:'%y-%M-%ld'" onFocus="WdatePicker({lang:'zh-cn',minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})">
</li>

<li>显示周:
<input type="text" class="Wdate" placeholder="readOnly:true,isShowWeek:true" onFocus="WdatePicker({lang:'zh-cn',readOnly:true,isShowWeek:true})">
</li>

</ul>

<hr /><hr /><hr /><hr /><hr />

<!-- 下面演示My97DatePicker的一些效果 -->
<ul>
<li>点击输入框触发
<input type="text" onClick="WdatePicker()"/>
</li>

<li>图标触发(此时只有点击图标才能弹出日期选择框)
<input id="iconInvoke" type="text"/>
<img onclick="WdatePicker({el:'iconInvoke'})" src="js/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">
</li>

<li>禁止清空(即用户选择完日期后，不能直接在文本框中按detele键删掉或清空，只能重新选择日期)
<input type="text" class="Wdate" onFocus="WdatePicker({isShowClear:false, readOnly:true})"/>
</li>

<li>自定义每周的第一天(4.6新增：设置周一为每周第一天)
<input type="text" onfocus="WdatePicker({firstDayOfWeek:1})"/>
</li>

<li>自定义日期显示格式(这里设置为yyyy-MM-dd HH:mm，这一点和Java相同，还可设置其它的如'yyyy年MM月')
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})"/>
</li>

<li>双月日历功能(4.6新增：可以同时弹出两个月的日历)
<input type="text" onfocus="WdatePicker({doubleCalendar:true, dateFmt:'yyyy-MM-dd'})"/>
</li>

<li>限制日期范围为2013-09-14到2013-9-20
<input type="text" onfocus="WdatePicker({minDate:'2013-09-14', maxDate:'2013-9-20'})"/>
</li>

<li>限制日期范围为2013年9月到2013年10月
<input type="text" onfocus="WdatePicker({minDate:'2013-9', maxDate:'2013-10-31'})"/>
</li>

<li>限制日期范围为10:00:20到14:30:00
<input type="text" onfocus="WdatePicker({dateFmt:'HH:mm:ss', minDate:'10:00:20', maxDate:'14:30:00'})"/>
</li>

<li>限制日期范围为2013-9-14 10:30到2013-9-15 16:40
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'2013-09-14 10:30', maxDate:'2013-09-15 16:40'})"/>
</li>

<li>只能选择今天以前的日期(包括今天)
<input type="text" onfocus="WdatePicker({maxDate:'%y-%M-%d'})"/>
</li>

<li>只能选择今天以后的日期(不包括今天)(这里使用了My97DatePicker的运算表达式)
<input type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>
</li>

<li>只能选择本月日期的第一天到最后一天
<input type="text" onfocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld'})"/>
</li>

<li>只能选择今天10:20至明天14:28的日期
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'%y-%M-%d 10:20', maxDate:'%y-%M-{%d+1} 14:28'})"/>
</li>

<li>只能选择20个小时前到30个小时后的日期(这里使用了My97DatePicker的运算表达式)
<input 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'})"/>
</li>

<li>后面的日期大于前面的日期，且两个日期都不能大于2020-10-01
<input type="text" id="date01" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date02\')||\'2020-10-01\'}'})"/>
到
<input type="text" id="date02" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date01\')}', maxDate:'2020-10-01'})"/>
</li>

<li>后面的日期最少要比前面的日期大3天
<input type="text" id="date03" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date04\',{d:-3});}'})"/>
到
<input type="text" id="date04" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date03\',{d:3});}'})"/>
</li>

<li>禁用周六日
<input type="text" onFocus="WdatePicker({disabledDays:[0,6]})"/>
</li>

<li>禁用每月的5日15日25日('5$'表示以5结尾)
<input type="text" onFocus="WdatePicker({disabledDates:['5$']})"/>
</li>

<li>禁用所有早于2000-01-01的日期('^19'表示以19开头，可用minDate实现类似功能，这里主要是演示^的用法)
<input type="text" onFocus="WdatePicker({disabledDates:['^19']})"/>
</li>

<li>将本月可用日期分隔成五段，分别是: 1-3、8-10、16-24、26、27、29到月末
<input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>
</li>

<li>将本月可用日期分隔成五段，分别是: 1-3、8-10、16-24、26、27、29到月末，并禁用每个周一、三、六
<input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$'], disabledDays:[1,3,6]})"/>
</li>

<li>禁用前一个小时和后一个小时内所有时间(鼠标点击日期输入框时，你会发现当前时间对应的前一个小时和后一个小时是灰色的)
<input type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/>
</li>
</ul>

只能选择7天以内日期(包括今天)<br/>
注意：假设用户先选择后面日期为后天，然后再选择前面日期，此时前面日期允许选择今天以前的5天<br/>
注意：这是为了将来的编辑用途(比方说这俩日期是一个活动的起止日期，用户有权在发布活动后回来修改日期)<br/>
<div>
<input type="text" id="startTime" name="startTime" onFocus="WdatePicker({isShowClear:false, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm', maxDate:'#F{$dp.$D(\'endTime\')}', minDate:'#F{$dp.$D(\'endTime\',{d:-7})||\'%y-%M-%d\'}'})"/>
到
<input type="text" id="endTime" name="endTime" onFocus="WdatePicker({isShowClear:false, readOnly:true, dateFmt:'yyyy-MM-dd HH:mm', minDate:'#F{$dp.$D(\'startTime\')}', maxDate:'#F{$dp.$D(\'startTime\',{d:8});}'})"/>
</div>

</body>
</html>

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

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

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

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

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

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

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

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

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

  5. 【UI插件】简单的日历插件（下）—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  6. 【UI插件】开发一个简单日历插件（上）

    前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...

  7. Jquery中的日历插件

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

  8. 仿iphone日历插件(beta)

    前言 小伙伴们好,很久不见了.最近工作进入正常期了,所以慢慢的悠闲的时间久没有了,所以不能每天水一篇了. 最近也在听师傅(http://home.cnblogs.com/u/aaronjs/)的教导开 ...

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

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

随机推荐

  1. Ubuntu 16.04 安装mysql并设置远程访问

    说明: 一个朋友在使用ubuntu-server 16.04安装mysql,设置远程访问的时候出现了问题,请我帮忙.但是,我也没有使用过ubuntu安装mysql,于是乎搜索了很多技术文件,比着葫芦画 ...

  2. WebForm基础

    客户端与网页端: C/S(客户端): 两种方式:winform WPF 数据是存在其它的电脑上或服务器上 运行时需要从服务器上下载相应的数据 数据加工的过程是在用户电脑上执行 好处是数据请求速度比较快 ...

  3. web前端之HTML中元素的区分

    作为前端人员,我们就是要与各种超文本标记打交道,用到各种不同的标签元素.在使用的时候不知道有没有注意到他们的分类归属?现在就来说一说博主的见解: 目前博主总结了三种分类方法:一是按封闭来划分,一是按显 ...

  4. Codeforces Round #385 (Div. 2) A,B,C 暴力，模拟，并查集

    A. Hongcow Learns the Cyclic Shift time limit per test 2 seconds memory limit per test 256 megabytes ...

  5. 搞清css的单位 px,em,rem的区别

    前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...

  6. C#引用C++开发的DLL

    C#语言使用方便,入门门槛较代,上手容易,并且语法与C,java有很类似的地方,IDE做的也好,通用性好,是MS下一代开发的主要力量.但是其开源代码较少,类库不是十分完美,在架构方面还有一些需要做的工 ...

  7. iOS - AppRealTest App 真机测试

    前言 1.准备 开发者账号 自从 Xcode7 出来之后,一般的真机测试不需要开发者账号,也就不需要看这篇教程,只有 app 具有 "推送" 等功能的时候,要真机测试就必须要开发者 ...

  8. Nginx模块之———— RTMP模块 统计某频道在线观看流的客户数

    获得订阅者人数,可以方便地显示观看流的客户数. 查看已经安装好的模块 /usr/local/nginx/sbin/nginx -V 安装从源编译Nginx和Nginx-RTMP所需的工具 sudo a ...

  9. C语言的总结

    在C语言考试的中,我成绩不是很好,其实在学习C语言的时候我没有好好去学过,我知道了是我自己的错误,我不应该抱着侥幸的心里去上课的,我会去好好听课的哦l

  10. mysql 基础篇5（mysql语法---数据）

    6 增删改数据 -- ********一.增删改数据********* --- -- 1.1 增加数据 -- 插入所有字段.一定依次按顺序插入 INSERT INTO student VALUES(1 ...