WdatePicker常用配置属性

一、WdatePicker常用配置属性（可以在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	可以使用此功能禁用所指定的一个或多个日期

二、WdatePicker常用内置函数

函数名	返回值类型	作用域	参数	描述
$dp.$	Element	全局	el [string]: 对象的ID	相当于document.getElementById
$dp.show	void	全局	无	显示日期选择框
$dp.hide	void	全局	无	隐藏日期选择框
$dp.$D	String	全局	id [string]: 对象的ID arg [object]: 日期差量,可以设置成 {y:[值],M:[值],d:[值],H:[值],m:[值],s:[值]} 属性 y,M,d,H,m,s 分别代表年月日时分秒 {M:3,d:7} 表示 3个月零7天 {d:1,H:1} 表示1天多1小时	将id对应的日期框中的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串
$dp.$DV	String	全局	v [string]: 日期字符串 arg [object]: 同上例的arg	将传入的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串

三、多语言支持

通过lang属性,可以为每个日期控件单独配置语言

1、繁体中文

2、英文

3、简体中文

四、皮肤配置

1、皮肤列表

WdatePicker目录下有个config.js,里面有段代码:

var skinList =
[
{name:'default', charset:'gb2312'},
{name:'whyGreen', charset:'gb2312'},
{name:'blue', charset:'gb2312'},
{name:'simple', charset:'gb2312'}
];

这就是皮肤列表,每个项有name和charset两个属性.

(1)、name 表示皮肤的名称,在配置的时候,skin属性只能是配置列表里面已有的项,否则将自动返回第一项
(2)、charset 表示对应皮肤目录下的css文件:datepicker.css所对应的编码格式

2、皮肤安装说明

(1)、将皮肤文件包拷贝到 skin 目录
(2)、打开 config.js 配置皮肤列表

五、日期调用方式

1、常规调用

在input单击或获得焦点调用

2、图标触发

使用其他的元素如:<img><div>等触发WdatePicker函数来调用弹出日期框

六、只读开关,高亮周末功能

1、设置readOnly属性 true 或 false 可指定日期框是否只读
2、设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末

七、操作按钮自定义

清空按钮和今天按钮,可以根据需要进行自定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true

例如：<input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>

八、自定义弹出位置

当控件处在页面边界时,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.

例如：<input class="Wdate" type="text" id="d16" οnfοcus="WdatePicker({position:{left:100,top:50}})"/>

九、起始日期功能（日期格式必须与 realDateFmt 和 realTimeFmt 一致）

其中日期格式

y	将年份表示为最多两位数字。如果年份多于两位数，则结果中仅显示两位低位数。
yy	同上，如果小于两位数，前面补零。
yyy	将年份表示为三位数字。如果少于三位数，前面补零。
yyyy	将年份表示为四位数字。如果少于四位数，前面补零。
M	将月份表示为从 1 至 12 的数字
MM	同上，如果小于两位数，前面补零。
d	将月中日期表示为从 1 至 31 的数字。
dd	同上，如果小于两位数，前面补零。
H	将小时表示为从 0 至 23 的数字。
HH	同上，如果小于两位数，前面补零。
m	将分钟表示为从 0 至 59 的数字。
mm	同上，如果小于两位数，前面补零。
s	将秒表示为从 0 至 59 的数字。
ss	同上，如果小于两位数，前面补零。
w	返回星期对应的数字 0 (星期天) - 6 (星期六) 。
D	返回星期的缩写一至六 (英文状态下 Sun to Sat) 。
W	返回周对应的数字 (1 - 53) 。
WW	同上，如果小于两位数，前面补零 (01 - 53) 。

1、静态限制

可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围

(1)、限制日期的范围是 2006-09-10到2008-12-20

(2)、限制日期的范围是 2008年2月到 2008年10月

(3)、限制日期的范围是 8:00:00 到 11:30:00

2. 动态限制

可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,还可以通过#{}进行表达式运算,如:#{%d+1}:表示明天

其中，动态变量表

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

例如：

(1)、只能选择今天以前的日期(包括今天)

(2)、使用运算表达式只能选择今天以后的日期(不包括今天)

(3)、只能选择本月的日期1号至本月最后一天

(4)、只能选择今天7:00:00至明天21:00:00的日期

(5)、只能选择 20小时前至 30小时后的日期

十、通过JS自定义任何你想要的日期限制

例如：自动转到随机生成的一天


<script>
//返回一个随机的日期
function randomDate(){
var Y = 2000 + Math.round(Math.random() * 10);
var M = 1 + Math.round(Math.random() * 11);
var D = 1 + Math.round(Math.random() * 27);
return Y+'-'+M+'-'+D;
}
</script><input type="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date}) "/>

十一、禁用某天

可以使用此功能禁用周日至周六所对应的日期,相关属性:disabledDays (0至6 分别代表周日至周六)

例如：禁用周六所对应的日期

十二、禁用部分日期

例如

1、['2008-02-01','2008-02-29'] 表示禁用 2008-02-01 和 2008-02-29
2、['2008-..-01','2008-02-29'] 表示禁用 2008-所有月份-01 和 2008-02-29
3、['200[0-8]]-02-01','2008-02-29'] 表示禁用 [2000至2008]-02-01 和 2008-02-29
4、['^2006'] 表示禁用 2006年的所有日期

5、['....-..-01','%y-%M-%d'] 表示禁用所有年份和所有月份的第一天和今天
6、['%y-%M-#{%d-1}','%y-%M-#{%d+1}'] 表示禁用昨天和明天
7、['....-..-.. 10\:00\:00'] 表示禁用每天10点 (注意 : 需要使用 \: )

8、禁用每个月份的 5日 15日 25日

其中： '5$' 表示以 5 结尾

9、禁用所有早于2000-01-01的日期

其中：'^19' 表示以 19 开头

10、本月可用日期分隔成五段分别是: 1-3 8-10 16-24 26,27 29-月末

WdatePicker常用配置属性相关推荐

echarts使用中过程中的常用配置属性常见问题及绘制地图
echarts使用中的常见的问题 1.给折线图画一条水准线 2.图表自适应容器 3.x轴文字过长显示不全的问题 4.echarts的点击事件 5.数据中如果有空值时如何实现连接空值或者显示断开 6. ...
echarts常用配置属性大全
title tooltip: {show:true,//显示策略,默认值true,可选为:true(显示) | false(隐藏)text: '主标题',//主标题文本,'\n'指定换行link:'' ...
springboot核心配置文件 application.properties 或者 yml 常用配置详解
properties 文件: properties文件是以KV格式存在的, 字符集默认为 iso-8859-1 如何需要输入中文需更改字符集utf-8 备注以 # 开头. 常 ...
bigint hive java类型_三十、Hive的数据类型以及常用的属性配置
上篇文章我们在服务器上部署了Hive并将它的Metastore存储在了MySQL上,本文介绍一下Hive的数据类型以及常用的一些属性配置.关注专栏<破茧成蝶--大数据篇>,查看更多相关的内 ...
三十、Hive的数据类型以及常用的属性配置
上篇文章我们在服务器上部署了Hive并将它的Metastore存储在了MySQL上,本文介绍一下Hive的数据类型以及常用的一些属性配置.关注专栏<破茧成蝶--大数据篇>,查看更多相关的内 ...
echarts 之常用的属性配置
目录 echarts 之常用的属性配置饼形图相关柱状图相关简单的柱状图多柱状图折线图 echarts 之常用的属性配置饼形图相关 series: [{type: "pie&quo ...
Keycloak Spring Security适配器的常用配置
在上一篇Keycloak系列文章中,我们把Keycloak同Spring Security成功适配,其中用了一个keycloak.json的配置.它包含了不少属性,我觉得在深入学习Keycloak的过 ...
Maven pom.xml 全配置（二）不常用配置
Maven pom.xml 全配置(二)不常用配置这里贴出Maven pom.xml文件中使用率较少的配置参数,如果此篇文档中没有找到你想要的参数,移步Maven pom.xml 全配置(一)常用配 ...
Maven pom.xml 全配置（一）常用配置
Maven pom.xml 全配置(一)常用配置这里贴出一个Maven中出现频率较高的配置参数注释,方便理解项目中Maven的配置具体的作用.如果在此博文中没有找到你想看到的参数,可以移步Maven ...

WdatePicker常用配置属性

WdatePicker常用配置属性相关推荐

最新文章

热门文章