My97DatePicker时间选择器

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2010年7月3日 23:10 本文热度 5836

一. 简介内置函数

[ul]
[li]下拉,输入,导航选择日期自定义事件[/li][/ul]

$dp.cal.getp 用法详见内置函数

[ul]
[li]只读开关,高亮周末功能属性表[/li][/ul]

2. 特色功能内置函数

[ul]
[li]支持多种容器自定义和动态切换皮肤[/li][/ul]

示例 2-4-3 年月

示例 2-4-4 取得系统可识别的日期值(重要)

类似于 1999年7月5日这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如 1999-07-05

真实的日期值是:

注意:在实际应用中,一般会把vel指定为一个hidden控件,这里是为了把真实值展示出来,所以使用文本框

关键属性: vel 指定一个控件或控件的id,必须具有value属性(如input),用于存储真实值(也就是realdatefmt和realtimefmt格式化后的值)

[ul]
[li]编辑功能语言配置[/li][/ul]

示例3-1 多语言示例

繁体中文:

英文:

简体中文:

注意:默认情况lang='auto',即根据浏览器的语言自动选择语言.

[ul]
[li]自定义和动态切换皮肤立刻转到皮肤中心[/li][/ul]

通过skin属性,可以为每个日期控件单独配置皮肤,当然也可以通过wdatepicker.js配置全局的皮肤

皮肤列表和皮肤安装说明详见皮肤配置

示例3-2 皮肤演示

默认皮肤default: skin:'default'

注意:在wdatepicker里配置了skin='default',所以此处可省略,同理,如果你把wdatepicker里的skin配置成'whygreen'那么在不指定皮肤的情况下都使用'whygreen'皮肤了

whygreen皮肤: skin:'whygreen'

注意:更多皮肤,请到皮肤中心下载

4. 日期范围限制动态变量表

示例4-5-6 #f{}也是可以使用的

本示例利用自定义函数随机禁用0-23中的任何一个小时

打开小时选择框,你会发现有一个小时被禁用的,而且每次禁用的小时都不同

[ul]
[li]有效天与有效日期内置函数[/li][/ul]

示例5-2-2 使用onpicked实现日期选择联动

选择第一个日期的时候,第二个日期选择框自动弹出

日期从: 至

来源：(http://blog.sina.com.cn/s/blog_4cb400450100dsj0.html) - my97datepicker时间选择器_翰林_新浪博客

注意:下面第一个控件代码的写法

至

注意:$dp.$是一个内置函数,相当于document.getelementbyid

示例5-2-3 将选择的值拆分到文本框

年月日时分秒

年

月

日

时

分

秒

注意:el:'d523'中,如果你不需要d523这个框,你可以把他改成hidden,但是el属性必须指定

$dp.$和$dp.cal.getp都是内置函数

onclearing 和 oncleared 事件语言配置

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时,无效天和无效日期变成有效天和有效日期

你可以参考有效天与有效日期示例