My97DatePickerBeta 日历插件

<!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>

时间： 2024-10-25 02:20:09

My97DatePickerBeta 日历插件的相关文章

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结构: <

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

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

重写的HTML5酒店入住日期选择日历插件

<!DOCTYPE HTML><html lang="zh-CN"><head><title>接触角测定仪</title><script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="application/javascript" language="javascript">&

EasyUI Calendar 日历插件，只显示年月。

从别人的博客园搬过来的,放在这里只是为了方便自己用.已经注明原文出处,尊重别人的劳动成果. 原文地址:http://www.cnblogs.com/hmYao/p/5779463.html 此日历插件依赖于easyui的js和css. html: <input id="db" /> js: 初始化加载db标签 $('#db').datebox({ onShowPanel: function() { //显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 spa

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

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