My97DatePicker日期控件用法

最新推荐文章于 2022-10-31 16:22:10 发布
最新推荐文章于 2022-10-31 16:22:10 发布
阅读量6.6k 收藏 5
点赞数 3
分类专栏： Skill 文章标签： WdatePicker My97DatePicker 日期控件 java 日期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jadyer/article/details/11705587
版权

完整版见https://jadyer.github.io/2013/09/15/my97-datepicker-demo/


用法很简单，主要演示都在myDate.html

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- 它的官网是http://www.my97.net/ -->
<!-- 引入它的js(这里用的是My97.DatePicker.4.72.Release) -->
<!-- 
My97DatePicker引入到项目中后的目录结构如下
WebRoot
  |--js
  |  |--My97DatePicker
  |  |  |--lang
  |  |  |  |--zh-cn.js
  |  |  |--skin
  |  |  |  |--default
  |  |  |  |  |--datepicker.css
  |  |  |  |  |--img.gif
  |  |  |  |--datePicker.gif
  |  |  |  |--WdatePicker.css
  |  |  |--calendar.js
  |  |  |--config.js
  |  |  |--My97DatePicker.htm
  |  |  |--WdatePicker.js
 -->
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>

<!-- 下面演示My97DatePicker的一些效果 -->
<font color="blue">常规调用(若想在文本框中尾部显示日期图标，可以设置<input class="Wdate"/>)</font>
<br/>
<input type="text" onClick="WdatePicker()"/>
<br/>
<br/>
<font color="blue">图标触发(此时只有点击图标才能弹出日期选择框)</font>
<br/>
<input id="iconInvoke" type="text"/>
<img οnclick="WdatePicker({el:'iconInvoke'})" src="js/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">
<br/>
<br/>
<font color="blue">禁止清空(即用户选择完日期后，不能直接在文本框中按detele键删掉或清空，只能重新选择日期)</font>
<br/>
<input type="text" class="Wdate" onFocus="WdatePicker({isShowClear:false, readOnly:true})"/>
<br/>
<br/>
<font color="blue">自定义每周的第一天(4.6新增：设置周一为每周第一天)</font>
<br/>
<input type="text" οnfοcus="WdatePicker({firstDayOfWeek:1})"/>
<br/>
<br/>
<font color="blue">自定义日期显示格式(这里设置为yyyy-MM-dd HH:mm，这一点和Java相同，还可设置其它的如'yyyy年MM月')</font>
<br/>
<input type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})"/>
<br/>
<br/>
<font color="blue">双月日历功能(4.6新增：可以同时弹出两个月的日历)</font>
<br/>
<input type="text" οnfοcus="WdatePicker({doubleCalendar:true, dateFmt:'yyyy-MM-dd'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为2013-09-14到2013-9-20</font>
<br/>
<input type="text" οnfοcus="WdatePicker({minDate:'2013-09-14', maxDate:'2013-9-20'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为2013年9月到2013年10月</font>
<br/>
<input type="text" οnfοcus="WdatePicker({minDate:'2013-9', maxDate:'2013-10-31'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为10:00:20到14:30:00</font>
<br/>
<input type="text" οnfοcus="WdatePicker({dateFmt:'HH:mm:ss', minDate:'10:00:20', maxDate:'14:30:00'})"/>
<br/>
<br/>
<font color="blue">限制日期范围为2013-9-14 10:30到2013-9-15 16:40</font>
<br/>
<input type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'2013-09-14 10:30', maxDate:'2013-09-15 16:40'})"/>
<br/>
<br/>
<font color="blue">只能选择今天以前的日期(包括今天)</font>
<br/>
<input type="text" οnfοcus="WdatePicker({maxDate:'%y-%M-%d'})"/>
<br/>
<br/>
<font color="blue">只能选择今天以后的日期(不包括今天)(这里使用了My97DatePicker的运算表达式)</font>
<br/>
<input type="text" οnfοcus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>
<br/>
<br/>
<font color="blue">只能选择本月日期的第一天到最后一天</font>
<br/>
<input type="text" οnfοcus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld'})"/>
<br/>
<br/>
<font color="blue">只能选择今天10:20至明天14:28的日期</font>
<br/>
<input type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', minDate:'%y-%M-%d 10:20', maxDate:'%y-%M-{%d+1} 14:28'})"/>
<br/>
<br/>
<font color="blue">只能选择20个小时前到30个小时后的日期(这里使用了My97DatePicker的运算表达式)</font>
<br/>
<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'})"/>
<br/>
<br/>
<font color="blue">后面的日期大于前面的日期，且两个日期都不能大于2020-10-01</font>
<br/>
<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'})"/>
<br/>
<br/>
<font color="blue">后面的日期最少要比前面的日期大3天</font>
<br/>
<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});}'})"/>
<br/>
<br/>
<font color="blue">禁用周六日</font>
<br/>
<input type="text" onFocus="WdatePicker({disabledDays:[0,6]})"/>
<br/>
<br/>
<font color="blue">禁用每月的5日15日25日('5$'表示以5结尾)</font>
<br/>
<input type="text" onFocus="WdatePicker({disabledDates:['5$']})"/>
<br/>
<br/>
<font color="blue">禁用所有早于2000-01-01的日期('^19'表示以19开头，可用minDate实现类似功能，这里主要是演示^的用法)</font>
<br/>
<input type="text" onFocus="WdatePicker({disabledDates:['^19']})"/>
<br/>
<br/>
<font color="blue">将本月可用日期分隔成五段，分别是: 1-3、8-10、16-24、26、27、29到月末</font>
<br/>
<input type="text" onFocus="WdatePicker({minDate:'%y-%M-01', maxDate:'%y-%M-%ld', disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>
<br/>
<br/>
<font color="blue">将本月可用日期分隔成五段，分别是: 1-3、8-10、16-24、26、27、29到月末，并禁用每个周一、三、六</font>
<br/>
<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]})"/>
<br/>
<br/>
<font color="blue">禁用前一个小时和后一个小时内所有时间(鼠标点击日期输入框时，你会发现当前时间对应的前一个小时和后一个小时是灰色的)</font>
<br/>
<input type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/> 
<br/>
<br/>
<form action="servlet/DatePickerServlet" method="POST">
	<font color="blue">
		只能选择7天以内日期(包括今天)<br/>
		注意：假设用户先选择后面日期为后天，然后再选择前面日期，此时前面日期允许选择今天以前的5天<br/>
		注意：这是为了将来的编辑用途(比方说这俩日期是一个活动的起止日期，用户有权在发布活动后回来修改日期)
	</font>
	<br/>
	<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:7});}'})"/>
	<br/>
	<br/>
	<input type="submit" value="提交活动日期到服务器">
</form>

下面列出的是和Java通信是用到的Web.xml和DatePickerServlet.java

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
						http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<servlet>
		<servlet-name>DatePickerServlet</servlet-name>
		<servlet-class>com.jadyer.datepicker.DatePickerServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>DatePickerServlet</servlet-name>
		<url-pattern>/servlet/DatePickerServlet</url-pattern>
	</servlet-mapping>
	
	<welcome-file-list>
		<welcome-file>myDate.html</welcome-file>
	</welcome-file-list>
</web-app>
package com.jadyer.datepicker;

import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DatePickerServlet extends HttpServlet {
	private static final long serialVersionUID = 4451017213106489231L;
	
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String startTime = request.getParameter("startTime");
		String endTime = request.getParameter("endTime");
		Date beginDate = null;
		Date endDate = null;
		try {
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
			beginDate = sdf.parse(startTime);
			endDate = sdf.parse(endTime);
		} catch (ParseException e) {
			e.printStackTrace();
		}
		long betweenDays = (endDate.getTime()-beginDate.getTime())/(24*60*60*1000);
		System.out.println("[" + startTime + "]-->[" + endTime + "]相隔[" + betweenDays + "]天");
	}
}
玄玉
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET使用My97DatePicker日期控件实例
10-22
主要为大家详细介绍了ASP.NET使用My97DatePicker日期控件实例，如何使用My97DatePicker日期控件，本文为大家介绍，感兴趣的小伙伴们可以参考一下
My97的WdatePicker({dateFmt:'yyyy-MM'})兼容ie9
LOVE_MOLY的博客
12-18 6510
问题：My97在ie9格式化WdatePicker({dateFmt:'yyyy-MM'})出现都是1的情况，如下图： 针对的JS版本：My97 DatePicker 4.72 Release 原因：在 IE9 中，dom 节点宽高不知道为什么变成了 0，所以年月被隐藏了，只要想办法设置好宽高就可以正常显示了 解决办法：在$dp.dd.style.left=F+"px";的后面添加上
只需两步带你轻松使用My97DatePicker日期控件
weixin_56912303的博客
10-31 582
只需两步带你轻松使用My97DatePicker日期控件
My97DatePicker日期控件的使用
LFSenior
10-17 609
2. 特色功能 平面显示 日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上 示例2-1 平面显示演示 div1"> WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr())}})
日历组件My97DatePicker的使用
qq_36994788的博客
12-10 409
My97DatePicker是一个非常使用的组件，它的界面组成为一个时间的下拉框，通过选择可以将下拉框中的日期加载到对应的文本框中，效果如下图所示一、My97DatePicker的使用过程1.自己可以去网上下载一个My97DatePicker的组件2.将解压后的文件之间拷贝到WebRoot目录下就行了3.接着我们就要对My97DatePicker进行配置了，首先对日历组件的显示页面进行配置，找到需要
My97DatePicker日期插件使用
king_qc的博客
12-05 635
1.首先下载JS插件，导入至项目中。 2.在html中引入js： &lt;script type="text/javascript" src="js/plugins/My97DatePicker/WdatePicker.js"&gt;&lt;/script&gt;  3.使用，onClick或者onfocus触发： &lt;input class="Wdate" name="per.
日期控件My97DatePicker的使用
02-08
日期控件My97DatePicker的使用 日期控件My97DatePicker的使用
My97DatePicker日期控件
12-28
My97DatePicker，是一款非常实用的日期控件，这款日期控件不依赖于任何库，可以独立使用，支持独立的设置日期的格式，控制默认日期，控制日期显示范围，并且支持多种语言，还有非常多的日期皮肤样式，非常的小巧实用...
日期信息存入mysql数据库
收破烂的小熊猫
01-14 1088
最近要制作一个人员信息，需要使用到My97DatePicker的日期控件，然后获取到选定的日期信息，调用loushang框架的后端cmd存入到数据库。 数据库表 person_info 可自行设计，只使用到create_time 字段 注意：create_time (创建时间) 类型为date 前端页面 ： //引入My97DatePicker控件的js 可自行去百度下...
My97 DatePicker 4.72 Release js日历选择器，可直接用在项目中，目前最稳定的版本4.72，兼容IE10、火狐、谷歌浏览器
04-11
目前找到的最稳定的版本。兼容IE10、火狐、谷歌浏览器 感谢作者开发这样好的工具。 这个版本的主题有两种。可以在WdatePicker.js中修改skin字段。 主题列表在：config.js
My97DatePicker v4.72版本，兼容google，ie，firefox
01-15
My97DatePicker v4.72版本，兼容google，ie，firefox。
My97DatePicker4.7.2 日期控件
04-04
My97DatePicker4.7.2 日期控件
日历控件-My97DatePicker-4.7
08-29
经典日期控件My97DatePicker使用说明_files
My97DatePicker4.72
11-29
My97DatePicker4.72日期控件
前端日期控件——My97DatePicker控件用法说明
IManiy的博客
09-24 620
My97DatePicker是一款功能强大的日期控件 先在官网下载控件包 官网下载地址：http://www.my97.net/down.asp 现在最新的版本是4.8 把控件包拷贝到项目中，js引用 本身写法是jQuery的把jQuery文件引入 &lt;script type="text/javascript" src="My97DatePicker/WdatePicker.js"...
My97DatePicker的使用
W_DongQiang的博客
06-15 340
今天项目中看到了一个很简洁，操作也很方便的时间控件，顺便收藏一下。My97DatePicker基本用法1.My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。 1、下载My97DatePicker组件包 下载地址：http://download.csdn.net/detail/emoven/82490732、在页面中引入该组件js文件：     &lt;script type=...
日期控件如何处理后台传回的Date类型的数据
我爱编程持之以恒
05-07 3084
问题描述： jsp中日期控件的定义如下 <td> <input type="text" id="certificateValidity" name="certificateValidity" readonly="readonly" value="<fmt:formatDate value='${certificateValidity}' pattern="y...
JavaScript：My97DatePicker日期选择器组件的使用
qq_40435659的博客
09-18 399
  前言： 　　在实际项目开发中，日期选择是一个十分常见而且重要的问题，在表单中设计到日期的验证时，如果让用户自己输入时间的话，那么使用正则进行验证其正确性是不可取的，因为他一般只能验证日期的格式，无法准确的验证其日期正确性。此时可以使用日期选择器组件来帮助我们完整。   用法：     使用日期在选择其组件其实很简单，我们只需要在*.html文件里面引入日期选择器的*.js文件，并在i...
my97datePicker日期插件
最新发布
06-10
使用my97DatePicker插件非常简单，只需要在HTML页面中引入相关的CSS和JavaScript文件，然后在需要添加日期选择器的地方添加一个input标签，设置其class为Wdate，即可自动转换成日期选择器。 例如，以下代码可以在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值