My97DatePicker-WdatePicker日历日期插件详细示例

最新推荐文章于 2024-09-27 14:29:49 发布

豆趣编程

最新推荐文章于 2024-09-27 14:29:49 发布

阅读量2.3w

点赞数 2

分类专栏：前端文章标签： WdatePicker

本文链接：https://blog.csdn.net/lianzhang861/article/details/80425968

版权

前端专栏收录该内容

61 篇文章 6 订阅

订阅专栏

插件下载地址：

https://download.csdn.net/download/lianzhang861/10433412

此日期插件功能还可以，用着挺顺手

目前的版本是:4.8 正式版

My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
My97DatePicker.htm是必须文件,不可删除
各目录及文件的用途:
WdatePicker.js 配置文件,在调用的地方仅需使用该文件
config.js 语言和皮肤配置文件
calendar.js 日期库主文件)
目录lang 存放语言文件
目录skin 存放皮肤的相关文件
当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式

<input type="text" style="margin-top:100px;" id="stime" class="Wdate" οnclick="dateClick()"> 加上这个class=“Wdate”后input会增加一个日历小图标，好看一些

关于WdatePicker的使用配置指南请参考此博客

https://blog.csdn.net/zengxin2008/article/details/7248964#m5

我的文章主要列举一下使用实例，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>排行</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<script type="text/javascript" src="../common/My97DatePicker/4.8/WdatePicker.js"></script>
	
</head>
<body style="background: #F0EFF5;">
	
	<button id="bb" onclick="dateClick()">代替点击对象</button>
	<input type="text"  style="margin-top:100px;"  id="stime" class="Wdate" onclick="dateClick()">
	<input value="2018-5-22 00:00:00" id="stime1">
	<script>
	    
	function dateClick() {
		WdatePicker({
			//el:$dp.$('stime'),  //设置后不管是点谁触发的弹框都认为是stime绑定者弹出的，值赋给绑定者
			dateFmt : 'yyyy-MM-dd HH:mm:ss',  //格式设置相对应界面可选择也变化
			//skin:"default",  //whyGreen绿色风格，twoer橙色风格，默认default
			//startDate:'%y-%M-01 00:00:00', //默认开始选中时间，格式必须和dateFmt中保持一致,例'2018-05-21 00:00:00'
			//lang:"en",  //英文版本，默认为中文；:'en', charset:'UTF-8'；'zh-cn', charset:'gb2312'；'zh-tw', charset:'GBK'
			minDate: '#F{$dp.$D(\'stime1\',{d:-10});}',  //其中\''\中表示默认取id为stime1的值，注意stime1中的时间格式必须要dateFmt保持一致。第二个参数为调整日期，这里是向前调10天
			maxDate:'%y-%M-{%d+1} 23:59:59', //最大可选择时间，明天最后时刻
			// firstDayOfWeek: 1  //一周从周几开始，默认为0，周日开始
			highLineWeekDay:true,  //周末的日期是否高亮
			readOnly:true,  //是否允许键盘输入值，false为禁止输入，只能鼠标选
			//position:{left:100,top:50}},  //调整位置
			
		});
	}
	</script>
	<script src="rank.js"></script>
</body>
</html>

格式	说明
%y	当前年
%M	当前月
%d	当前日
%ld	本月最后一天
%H	当前时
%m	当前分
%s	当前秒
#{}	运算表达式,如:#{%d+1}:表示明天
#F{}	{}之间是函数可写自定义JS代码

格式	说明
%y	当前年
%M	当前月
%d	当前日
%ld	本月最后一天
%H	当前时
%m	当前分
%s	当前秒
#{}	运算表达式,如:#{%d+1}:表示明天
#F{}	{}之间是函数可写自定义JS代码

属性	类型	默认值	说明
静态属性:只能在WdatePicker.js中配置,一般情况下,不建议您修改静态属性的值
$wdate	bool	true	是否自动引入Wdate类设置为true时,可直接在引入WdatePicker.js的页面里使用 class="Wdate" Wdate可在skin目录下的WdatePicker.css文件中定义建议使用默认值
$dpPath	string	''	是否显示指定程序包的绝对位置,一般情况下为空即可(程序自动创建),该属性是为防止极其少数的情况下程序创建出错而设置的设置方法: 如果,程序包所在http中的地址为 http://localhost/proName/My97DatePicker/ 则 $dpPath = '/proName/My97DatePicker/'; 建议使用默认值
可配置属性:可以在WdatePicker方法是配置
el	Element 或 String	null	指定一个控件或控件的ID,必须具有value或innerHTML属性(如input,textarea,span,div,p等标签都可以),用户存储日期显示值(也就是dateFmt格式化后的值)
vel	Element 或 String	null	指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值(也就是realDateFmt和realTimeFmt格式化后的值)
position	object	{}	日期选择框显示位置注意:坐标默认单位是px,是相对当前框架坐标(不受滚动条),left属性只接受数字,top属性除接受数字外还可以接受 'above' 上方显示, 'under' 下方显示, 'auto' 系统根据页面大小自动选择(默认) 如: {left:100,top:50}表示固定坐标[100,50] {top:50}表示横坐标自动生成,纵坐标指定为 50 {left:100}表示纵坐标自动生成,横坐标指定为 100 {top:'above'}表示上方显示 {top:'under'}表示下方显示请参考示例
lang	string	'auto'	当值为'auto'时自动根据客户端浏览器的语言自动选择语言当值为其他时从langList中选择对应的语言你可以参考语言配置
skin	string	'default'	皮肤名称默认自带 default和whyGreen两个皮肤另外如果你的css够强的话,可以自己做皮肤你可以参考皮肤配置
dateFmt	string	'yyyy-MM-dd'	日期显示格式你可以参考自定义格式
realDateFmt	string	'yyyy-MM-dd'	计算机可识别的,真正的日期格式无效日期设置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必须与它们相匹配建议使用默认值
realTimeFmt	string	'HH:mm:ss'
realFullFmt	string	'%Date %Time'
minDate	string	'1900-01-01 00:00:00'	最小日期(注意要与上面的real日期相匹配)
maxDate	string	'2099-12-31 23:59:59'	最大日期(注意要与上面的real日期相匹配)
startDate	string	''	起始日期,既点击日期框时显示的起始日期为空时,使用今天作为起始日期(默认值) 否则使用传入的日期作为起始日期(注意要与上面的real日期相匹配) 你可以参考起始日期示例
isShowWeek	bool	false	是否显示周你可以参考周显示示例
highLineWeekDay	bool	true	是否高亮显示周六周日
isShowClear	bool	true	是否显示清空按钮
isShowToday	bool	true	是否显示今天按钮
isShowOthers	bool	true	为true时,第一行空白处显示上月的日期，末行空白处显示下月的日期,否则不显示
readOnly	bool	false	是否只读
errDealMode	int	0	纠错模式设置可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记
autoPickDate	bool	null	为false时点日期的时候不自动输入,而是要通过确定才能输入为true时即点击日期即可返回日期值为null时(推荐使用) 如果有时间置为false 否则置为true
qsEnabled	bool	true	是否启用快速选择功能
quickSel	Array	null	快速选择数据,可以传入5个快速选择日期注意:日期格式必须与 realDateFmt realTimeFmt realFullFmt 相匹配你可以参考快速选择示例
disabledDays	Array	null	可以使用此功能禁用周日至周六所对应的日期 0至6 分别代表周日至周六你可以参考无效天示例
disabledDates	Array	null	可以使用此功能禁用所指定的一个或多个日期你可以参考无效日期示例
opposite	bool	false	默认为false, 为true时,无效天和无效日期变成有效天和有效日期你可以参考有效天与有效日期示例
onpicking	function	null	此四个参数为事件参数你可以参考自定义事件示例
onpicked	function	null
onclearing	function	null
oncleared	function	null

使用 $dp.$D 函数可以将日期框中的值,加上定义的日期差量:
两个参数: id={字符类型}需要处理的文本框的id值 , obj={对象类型}日期差量

日期差量用法:
属性y,M,d,H,m,s分别代表年月日时分秒

补充：

最近有个需求是选择时间后就请求ajax，但是在事件选择上有问题

首先想到的是用onchange，但是选择完日期如果不点确定直接点别的地方话，虽然input值变了而且选择日期框消失了，但是不会触发onchange 方法，而且就算点了确定，还得onblur的时候才能触发。（此插件了重写了onchange方法）

然后试了试onblur方法，还是不好用

解决办法：用我上述的onpicked方法，这样选择后不定义确定也能秒触发

<input type="text" name="repairDate"
                           value="${assessPunish.CREATE_TIME}"
                           onFocus="WdatePicker({onpicked:loadDefaultNum,dateFmt : 'yyyy-MM',lang:'zh-cn'})"
                           id="repairDate" class="input-text Wdate w100" autocomplete="off"
                    >

注意要将onpicked写在配置信息里，不是写在input里，而且里面的方法例如onpicked:loadDefaultNum不能加括号不能写成onpicked:loadDefaultNum（），否则会出现不管点什么都会调用方法的现象！！！