日期时间

简介

日期时间控件是基于JQueryUI中datePicker控件制作的，它提供在Web上展示和选择日期时间的功能，它可以指定日期的显示格式和语言，控制日期的选择和显示范围，或是设置日期面板中的导航按钮的显示和行为。
通过type属性可以设置日期控件的类型，现在可以设置以下两种类型(类型不能动态设置)
type=”date”只显示日期没有时间
type=”datetime”显示日期和时间(时间格式固定为hh:mm:ss)

使用方法

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

<wafctrl:datePicker id="id" name="name" />

2.2 JS动态创建 EAS8.0+

var options = {id:"datePicker1",style:"height:50px"};
var dom = waf.createDOM("datePicker", options);
waf.appendDOM(waf("body"), dom);
waf.initComponent("datePicker", options, dom);

2.3 通用DOM创建 EAS8.0+


<input id="tmpID" name="tmpName_el" type="text" class="hasDatepicker enter2datePicker ui-datepicker-input" data-domcreated="true" datePickerindex="0" ctrlrole="datePicker">

<!--DOM创建好之后，使用js初始化控件-->
$("#id").wafDatePicker(options);

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

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

属性说明

changeMonth Boolean 缺省值: false EAS7.5+

设置是否允许以下拉框的方式修改月.

changeYear Boolean 缺省值: false EAS7.5+

设置是否允许以下拉框的方式修改年.

dateFormat String 缺省值: ‘yy-mm-dd’ EAS7.5+

设置日期的显示格式

disabled Boolean 缺省值: false EAS7.5+

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

edidatePickerle Boolean 缺省值: true EAS7.5+

定义日期控件输入框是否可以编辑

firstDay Integer 缺省值: 1 EAS7.5+

设置日期面板中每周的第一天,0:周日;1:周一;2周二,以此类推.

height Integer 缺省值: null EAS7.5+

定义日期控件的高度

hidden Boolean 缺省值: false EAS7.5+

定义日期控件是否不可见

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

定义日期控件的id

maxDate String 缺省值: null EAS7.5+

设置可选的最大日期,可以使用相对日期(y’代表年,’m’代表月,’w’代表周,’d’代表日,例如:’+1m+1w’),或者绝对日期(根据dateFormat的设置,例如:2011-01-01).

minDate String 缺省值: null EAS7.5+

设置可选的最小日期,可以使用相对日期(y’代表年,’m’代表月,’w’代表周,’d’代表日,例如:’-1y-1m’),或者绝对日期(根据dateFormat的设置,例如:2011-01-01).

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

定义日期控件的名称

numberOfMonths Number, Array 缺省值: 1 EAS7.5+

设置同时显示几个月,当设置为数组时,第一个值表示行,第二个值表示列,例如:[2,3]表示2行3列,同时显示6个月.

readonly Boolean 缺省值: false EAS7.5+

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

selectOtherMonths Boolean 缺省值: false EAS7.5+

设置是否可以选择其他月,这个选项只有当showOtherMonths为true时才有意义.

showSecond Boolean 缺省值: true EAS7.5+

设置是否显示秒,只在type=%22datetime%22时有效.

showOn String 缺省值: ‘button’ EAS7.5+

设置如何显示面板1.通过按钮点击(‘button’)2.通过按钮点击或者获得焦点(‘both’).

showOtherMonths Boolean 缺省值: false EAS7.5+

设置是否显示其他月.

stepMonths Number 缺省值: 1 EAS7.5+

设置翻页步长.

style String 缺省值: null EAS7.5+

定义日期控件的样式

tabindex Integer 缺省值: 0 EAS7.5+

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

tagClass String 缺省值: null EAS7.5+

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

type String 缺省值: ‘date’ 不可以在运行期改变 EAS7.5+

设置控件类型:date表示日期控件datetime表示日期时间控件

value String 缺省值: null EAS7.5+

定义日期控件的初始值，可以直接指定静态值或者通过EL表达式动态计算type=’date’时,静态值使用固定格式’yyyy-mm-dd’,这个格式与dateFormat的内容无关type=’datetime’时,静态值使用固定格式’yyyy-mm-ddhh:mm:ss’,这个格式与dateFormat的内容无关EL表达式使用的对象必须是java.util.Date

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对象。

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

返回日期控件是否禁用. [参考样例]

参数说明：无
返回值说明：
Boolean - 日期控件是否禁用

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

关闭日期面板. [参考样例]

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

打开日期面板.[参考样例]

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

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

参数说明：无
返回值说明：
Date - 日期控件中选择的日期值,如果没有选择返回null

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

设置日期控件的值. [参考样例]

参数说明：
    date - 需要设置的日期值, 类型可以是Date, String, Number
    注意: String类型可以表示绝对日期或者相对日期, 规则如下:
        绝对日期例如:01/26/2009’,格式要符合dateFormat属性.
        相对日期例如:’+1m +7d’,其中’y’代表 years, ‘m’代表months, ‘w’代表 weeks, ‘d’代表 days.
    注意: Number类型可以表示相对日期, 规则如下:
        相对日期例如:+7 表示7天后, -7 表示7天前.
返回值说明：无

事件说明

beforeShow 参数: (input,inst) 返回值类型: (Boolean/Object) EAS7.5+

在datePicker打开前触发的事件.[参考样例]
参数说明：
    - input: inputHTML对象.
    - inst: datePicker的实例.
返回值说明：
    - false: 取消 datePicker的打开.
    - object: 会将对象合并到datePicker的设置中.

beforeShowDay 参数: (date) 返回值类型: (Array) EAS7.5+

在每个日期显示前触发的事件,可以通过此事件的返回值,确定某个日期是否可以选择,某个日期的样式,某个日期的tip显示.[参考样例]
参数说明：
    - date: 日期对象
返回值说明：
    - 长度为3的数组,功能分别为:
    - [0]为true/false,代表对应日期是否能够选择.
    - [1]为一个class名称,代表对应日期的显示式样,默认为’.
    - [2]对应日期的tip.

onChangeMonthYear 参数: (year,month,inst) 返回值类型: (none) EAS7.5+

当年月改变时触发的事件.[参考样例]
参数说明：
    - year: 变更后的年.
    - month: 变更后的月(1-12).
    - inst: datePicker的实例.
返回值说明：无

onClose 参数: (dateText,inst) 返回值类型: (none) EAS7.5+

当datePicker关闭时触发的事件.[参考样例]
参数说明：
- dateText: 选择日期的字符串,如果没有选择,则为’.
- inst: datePicker的实例.
返回值说明：无

onSelect 参数: (dateText,inst) 返回值类型: (none) EAS7.5+

当选择datePicker中的日期时触发的事件.[参考样例]
参数说明：
- dateText: 选择日期的字符串.
- inst: datePicker的实例.
返回值说明：无

onchange 参数: (changeValue,inst) 返回值类型: (Boolean) EAS7.5+

当datePicker中的日期改变时触发的事件.[参考样例]
参数说明：
- changeValue对象,包括两个值previous(改变前的Date值),current(改变后的Date值).
- inst: datePicker的实例.
返回值说明：当返回值为false时,则不允许改变.

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事件.[参考样例]