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

前端 专栏收录该内容
61 篇文章 0 订阅

插件下载地址:

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

 

使用 $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(),否则会出现不管点什么都会调用方法的现象!!!

  • 2
    点赞
  • 4
    评论
  • 16
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

功能相当强大 更人性化,更全面的功能 大部分日期控件都具备功能如:带时间显示,支持周显示,自定义格式,自动纠错,智能纠错,起始日期,操作按钮自定义,快速选择日期,支持多种调用模式等,My97DatePicker在这些方面做得更全面,更人性化,并且速度一流. 2.强大的日期范围限制功能 支持静态限制,动态限制,脚本自定义限制,以及无效天和无效日期功能,利用这样功能你可以任意定制不能选择的日期,这些日期即使毫无规律,毫无连续性,你也可以通过这些功能的组合使用轻松搞定. 3.自定义事件和丰富的API库 如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外,你还可以在自定义事件中调用提供的API库来做更多的运算和扩展,绝对可以通过很少的代 码满足你及其个性化的需求. 4.多语言支持和自定义皮肤支持 通过lang属性,可以为每个日期控件单独配置语言,当然也可以通过WdatePicker.js配置全局的语言,皮肤也是一样,只要配置skin属性即可.这样一个页面中可以显示多种语言,多种皮肤的日期控件,更棒的是,他们之间的切换是无刷新的. 5.跨无限级框架显示和自动选择显示位置 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,My97日期控件是可以跨无限级框架显示的,并且当控件处在页面边界是,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值