时间

简介

帮助用户选择时间的控件,主要功能包括:
1.时分秒的连动(coordinate),分秒超过60或小于0时,自动调整相关位;如果12小时制当时间小于0或者大于12时,自动调整上午/下午.
2.可以设置两种显示方式12小时制(上/下午)和24小时制(showMeridian);

通用时间格式
虽然时间控件提供了2种不同的显示方式,但是为了编程统一,控件内部统一使用24小时制,以下是固定使用24小时制的地方:
    1.设置(setValue)和取值(getValue)方法
    2.value属性
    3.提交给后台的数据固定为HH:MM:SS格式

使用方法

2.1 静态框架使用方法仅EAS7.5版本

<wafctrl:timePicker id="tp_view" name="tp_view" value="11:30:00" operateState="view" viewDisplayType="disable"></wafctrl:timePicker>

2.2 JS动态创建 EAS8.0+

var options = {id:"timePicker1",style:"height:50px"};
var textDom = waf.createDOM("timePicker", options);
waf.appendDOM(waf("body"), textDom);
waf.initComponent("timePicker", options, textDom);

2.3 通用DOM创建 EAS8.0+

<input id="tmpID" name="tmpName_el" type="text" class="enter2tab ui-timepicker" ctrlrole="timePicker" data-domcreated="true" tabindex="0">
<!--DOM创建好之后，使用js初始化控件-->
$("#id").wafTimePicker(options);

2.4 方法&事件使用 EAS7.5+

//调用方法
waf("#id").wafTimePicker('method', parameter...);
//eg:获取和设置值
waf("#id").wafTimePicker("getValue");
waf("#id").wafTimePicker("setValue");
//eg:更改事件
waf("#id").wafTimePicker("option","onchange",fn);

属性说明

coordinate Boolean 缺省值: false EAS7.5+

设置是否允许联动修改时间,分秒超过60或小于0时,自动调整相关位;如果12小时制当时间小于0或者大于12时,自动调整上午/下午.

disabled Boolean 缺省值: false EAS7.5+

定义时间控件为禁用状态,既不可用,也不可点击,默认值为false

editable Boolean 缺省值: true EAS7.5+

定义时间控件输入框是否可以编辑

height Integer 缺省值: null EAS7.5+

定义时间控件的高度

hidden Boolean 缺省值: false EAS7.5+

定义时间控件是否不可见

id String 缺省值: null 不可以在运行期改变 EAS7.5+

定义时间控件的id

minuteStep Integer 缺省值: 1 EAS7.5+

定义修改分钟的幅度

name String 缺省值: null 不可以在运行期改变 EAS7.5+

定义时间控件的名称

readonly Boolean 缺省值: false EAS7.5+

规定时间控件为只读状态，不能修改，但可以选中或者拷贝，默认值为false

secondStep Integer 缺省值: 1 EAS7.5+

定义修改秒的幅度

showMeridian Boolean 缺省值: false EAS7.5+

设置是否用12小时制显示

showSecond Boolean 缺省值: true EAS7.5+

设置是否显示秒.

style String 缺省值: null EAS7.5+

定义时间控件的样式

tabindex Integer 缺省值: 0 EAS7.5+

定义按下tab键时时间控件获得焦点的顺序

tagClass String 缺省值: null EAS7.5+

定义时间控件样式类，可以添加一个或多个

value String 缺省值: null EAS7.5+

定义时间控件的初始值，可以直接指定静态值或者通过EL表达式静态值和EL表达式的值的格式均为’HH:MM:SS’固定24小时制格式,与显示设置无关

width Integer 缺省值: null EAS7.5+

定义时间控件的宽度

方法说明

disable 参数: (none) 返回值类型: (none) EAS7.5+

禁用时间控件.[参考样例]

enable 参数: (none) 返回值类型: (none) EAS7.5+

启用时间控件. [参考样例]

option 参数: (property[,value]) 返回值类型: (any) EAS7.5+

获得或设置时间控件某属性的值，当value参数存在时，设置控件的property属性值，且无返回值，否则返回控件的property属性值. [参考样例]

参数说明:
- property-必要参数，时间控件的属性
- value-可选参数，时间控件的属性值
返回值说明：
当value参数不存在时，有返回值，该返回值为与property对应的属性值，可以是任意类型的javascript对象。

getValue 参数: (none) 返回值类型: (Object) EAS7.5+

返回时间控件中选择的时间值. [参考样例]

参数说明:无
返回值说明：
Object - 包括三个属性hour, minute, second;数据为24小时制

setValue 参数: (date) 返回值类型: (none) EAS7.5+

设置时间控件的值. [参考样例]

参数说明:
    -date - 需要设置的时间值, 类型可以是Date, String, Object
    -Date类型 - 使用其中的时分秒
    -String类型 - 格式为”HH:MM:SS”,时间为24小时制
    -Object类型 - 包括三个属性hour, minute, second;数据为24小时制
返回值说明：无

事件说明

onchange 参数: (event,value)说明: 返回值类型: (Boolean) EAS7.5+

当时间发生改变时触发.[参考样例]
参数说明：
    - event-事件对象.
    - value-对象,包括两个值previous(改变前的值),current(改变后的值).
返回值说明：
    - 当返回值为false时,则不允许改变.

onselect 参数: (event,value)说明: 返回值类型: (none) EAS7.5+

当通过面板选择或者通过键盘改变时间时触发.[参考样例]
参数说明：
- event-事件对象.
- value-选择的时间对象,结构如:{hour:,minute:,second:*},固定为24小时制.
返回值说明：无

onshow 参数: (event,panel)说明: 返回值类型: (none) EAS7.5+

当时间显示时触发.[参考样例]
参数说明：
- event-事件对象.
- panel-显示的面板对象,可以修改,能改反映在显示上.
返回值说明：无

onfocus 参数: (event) 返回值类型: (none) EAS7.5+

datePicker获得焦点时将触发onfocus事件[参考样例]

onblur 参数: (event) 返回值类型: (none) EAS7.5+

datePicker失去焦点将触发onblur事件[参考样例]

onclick 参数: (event) 返回值类型: (none) EAS7.5+

datePicker被单击时将触发onclick事件[参考样例]

ondblclick 参数: (event) 返回值类型: (none) EAS7.5+

datePicker被双击时将触发ondblclick事件[参考样例]

onkeyup 参数: (event) 返回值类型: (none) EAS7.5+

在datePicker上释放按键时，将触发onkeyup事件[参考样例]

onkeydown 参数: (event) 返回值类型: (none) EAS7.5+

在datePicker上按下键盘上的键时，将触发onkeydown事件[参考样例]

onkeypress 参数: (event) 返回值类型: (none) EAS7.5+

当浏览器捕获到datePicker有键盘输入时触发onkeypress事件[参考样例]

onmouseover 参数: (event) 返回值类型: (none) EAS7.5+

当鼠标指针进入datePicker内时，触发onmouseover事件[参考样例]

onmouseup 参数: (event) 返回值类型: (none) EAS7.5+

当鼠标指针在datePicker内，并且鼠标按键被释放时，触发onmouseup事件[参考样例]

onmousedown 参数: (event) 返回值类型: (none) EAS7.5+

当鼠标指针在datePicker内按下鼠标键时，触发onmousedown事件[参考样例]

onmouseout 参数: (event) 返回值类型: (none) EAS7.5+

当鼠标指针离开datePicker时，触发onmouseout事件[参考样例]

onmousemove 参数: (event) 返回值类型: (none) EAS7.5+

当鼠标指针在datePicker内移动时，触发onmousemove事件[参考样例]

时间

简介