Ext.form.DateField简单用法及日期范围控制

Ext.form.DateField简单用法及日期范围控制

项目中有时需要用到起始日期和结束日期，要做到起始日期必须小于结束日期。在extjs中已经有现成的函数，摘录如下：

view
source

print?

01.

Ext.apply(Ext.form.VTypes,
{

02.

daterange
:

function

(val,
field) {

03.

var

date
= field.parseDate(val);

04.

if

(!date)
{

05.

return

;

06.

}

07.

if

(field.startDateField

08.

&&
(!

this

.dateRangeMax
|| (date.getTime() !=

this

.dateRangeMax

09.

.getTime())))
{

10.

var

start
= Ext.getCmp(field.startDateField);

11.

start.setMaxValue(date);

12.

start.validate();

13.

this

.dateRangeMax
= date;

14.

}

else

if

(field.endDateField

15.

&&
(!

this

.dateRangeMin
|| (date.getTime() !=

this

.dateRangeMin

16.

.getTime())))
{

17.

var

end
= Ext.getCmp(field.endDateField);

18.

end.setMinValue(date);

19.

end.validate();

20.

this

.dateRangeMin
= date;

21.

}

22.

/*

23.

*
Always return true since we're only using this vtype to set

24.

*
the min/max allowed values (these are tested for after the

25.

*
vtype test)

26.

*/

27.

return

true

;

28.

}

29.

});

然后分别定义起始日期和结束日期控件：

view
source

print?

01.

var

startDate
=

new

Ext.form.DateField({

02.

fieldLabel
:

'开始日期'

,

03.

emptyText
:

'请选择'

,

04.

disabledDays
: [1, 2, 5],

//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六

05.

labelWidth
: 100,

06.

readOnly
:

true

,

07.

allowBlank
:

false

,

08.

format
:

'Y-m-d'

,

//日期格式

09.

name
:

'startdt'

,

10.

id
:

'startdt'

,

11.

vtype
:

'daterange'

,

//daterange类型为上代码定义的类型

12.

endDateField
:

'endDate'

//必须跟endDate的id名相同

13.

})

14.

var

endDate
=

new

Ext.form.DateField({

15.

fieldLabel
:

'结束日期'

,

16.

emptyText
:

'请选择'

,

17.

disabledDays
: [1, 2, 5],

//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六

18.

readOnly
:

true

,

19.

allowBlank
:

false

,

20.

format
:

'Y-m-d'

,

//日期格式

21.

name
:

'enddt'

,

22.

id
:

'endDate'

,

23.

vtype
:

'daterange'

,

//daterange类型为上代码定义的类型

24.

startDateField
:

'startdt'

//必须跟startDate的id名相同

25.

})