DatePicker是一个提供日期输入编辑的组件,继承自TextField组件,拥有TextField标签的属性以及TextField对象的方法和事件。
在screen文件中我们通过<a:datePicker>标签来定义一个DatePicker对象。
<a:datePicker name="start_date" bindTarget="sys_user_create_ds" viewSize="2"
enableBesideDays="both" enableMonthBtn="both">
<a:events>
<a:event handler="login" name="enterdown"/>
</a:events>
</a:datePicker>
datePicker标签可以设置一个id属性,id是组件的唯一标识,我们可以在页面脚本中用$('id')的方法获得该id对应的组件对象,进而可以调用相应的函数方法。
datePicker标签的bindTarget属性可指定一个dataset对象的id,name属性可指定该dataset其中一个field的名字。这两个属性必须联合使用,其功能是将DatePicker对象绑定到dataset中的一个field上,进而我们只要对dataset进行操作就能即时反映在DatePicker上,另外DatePicker上的文字编辑也会立刻修改dataset中的数据。
events标签定义了需要响应的事件函数,例如enterdown事件,当键盘键入回车键时,DatePicker会触发enterdown事件,这样我们可以通过配置一个客户端函数login来响应。
function login(){
var lds = $('login_dataset');
var record = lds.getCurrentRecord();
Aurora.request({url:'login.svc', para:record.data, success:function(){
window.location.href='role_select.screen'
},scope:this});
}
渲染函数(dayRenderer)
很多情况下我们需要将显示的日期表进行一些特殊处理,例如我们需要将今天之前的日期设为不能选择状态。这个时候我们就需要 在datepicker标签上指定dayRenderer渲染函数来实现.
首先我们需要实现一个dayRenderer函数,来判断当前日期,然后返回一段html代码。
function rendererDay(cell,date,text,currentMonth){
var today=new Date();
if(date < new Date(today.getFullYear(),today.getMonth(),today.getDate())){
cell.disabled=true;
}
return text;
}
接下来在datepicker标签上指定dayRenderer属性为rendererDay.
<a:datePicker dayRenderer="rendererDay"/>
表 1.
属性名
|
用途
|
默认值
|
是否必填
|
---|
dayRenderer
|
日期渲染函数。dayRenderer 属性指定一个回调函数的函数名,该函数可带三个参数,依次为cell,date,text。
cell - 显示日期的单元格,当cell.disabled=true时,该日期无法被选择。
date - 日期对应的date对象。
text - 日期所显示的文本,函数的反回值需为包含此参数的HTML字符串。
|
|
|
enableBesideDays
|
enableBesideDays属性指定当月日期表是否显示上月结尾和(或)下月开头的日期。
取值
both | none | pre | next
| both
|
|
enableMonthBtn
|
enableMonthBtn 属性指定日期表是否显示上月按钮和(或)下月按钮。
取值
both | none | pre | next
| both
|
|
viewSize
|
显示日期表的个数,已当前月开始依次排列。最大值是4。
| 1
|
|
表 2.
事件名
|
用途
|
---|
select
|
选择日期时触发的事件。
|
其他
|
请参阅TextField对象的事件
|
Comments
2 Responses to the article