项目中有时需要用到起始日期和结束日期,要做到起始日期必须小于结束日期。在extjs中已经有现成的函数,摘录如下:
view plaincopy to clipboardprint?
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if (!date) {
return;
}
if (field.startDateField
&& (!this.dateRangeMax || (date.getTime() != this.dateRangeMax
.getTime()))) {
var start = Ext.getCmp(field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
} else if (field.endDateField
&& (!this.dateRangeMin || (date.getTime() != this.dateRangeMin
.getTime()))) {
var end = Ext.getCmp(field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
/*
* Always return true since we're only using this vtype to set
* the min/max allowed values (these are tested for after the
* vtype test)
*/
return true;
}
});
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if (!date) {
return;
}
if (field.startDateField
&& (!this.dateRangeMax || (date.getTime() != this.dateRangeMax
.getTime()))) {
var start = Ext.getCmp(field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
} else if (field.endDateField
&& (!this.dateRangeMin || (date.getTime() != this.dateRangeMin
.getTime()))) {
var end = Ext.getCmp(field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
/*
* Always return true since we're only using this vtype to set
* the min/max allowed values (these are tested for after the
* vtype test)
*/
return true;
}
});
然后分别定义起始日期和结束日期控件:
view plaincopy to clipboardprint?
var startDate = new Ext.form.DateField({
fieldLabel : '开始日期',
emptyText : '请选择',
disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六
labelWidth : 100,
readOnly : true,
allowBlank : false,
format : 'Y-m-d',//日期格式
name : 'startdt',
id : 'startdt',
vtype : 'daterange',//daterange类型为上代码定义的类型
endDateField : 'endDate'//必须跟endDate的id名相同
})
var endDate = new Ext.form.DateField({
fieldLabel : '结束日期',
emptyText : '请选择',
disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六
readOnly : true,
allowBlank : false,
format : 'Y-m-d',//日期格式
name : 'enddt',
id : 'endDate',
vtype : 'daterange',//daterange类型为上代码定义的类型
startDateField : 'startdt'//必须跟startDate的id名相同
})
var startDate = new Ext.form.DateField({
fieldLabel : '开始日期',
emptyText : '请选择',
disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六
labelWidth : 100,
readOnly : true,
allowBlank : false,
format : 'Y-m-d',//日期格式
name : 'startdt',
id : 'startdt',
vtype : 'daterange',//daterange类型为上代码定义的类型
endDateField : 'endDate'//必须跟endDate的id名相同
})
var endDate = new Ext.form.DateField({
fieldLabel : '结束日期',
emptyText : '请选择',
disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六
readOnly : true,
allowBlank : false,
format : 'Y-m-d',//日期格式
name : 'enddt',
id : 'endDate',
vtype : 'daterange',//daterange类型为上代码定义的类型
startDateField : 'startdt'//必须跟startDate的id名相同
})
分享到:
相关推荐
**Ext.form.DateField** 是一个日期选择器,继承自 **Ext.form.TriggerField**,专门用于日期的选择和输入。 - **altFormats**: 类型为 `String`,定义用于解析用户输入的其他日期格式,默认为 `'m/d/Y|m-d-y|m-d-Y...
`Ext.form.TriggerField`的`triggerClass`允许你自定义触发按钮的样式,而`Ext.form.DateField`则可以通过`altFormats`来定义不同的日期输入格式。 EXT.form组件的事件处理也很重要,例如`Ext.form.TriggerField`的...
DateField是Ext.form.field.Date的实例,它继承自Ext.form.field.Text。DateField提供了一个日期选择器,允许用户通过日历图标选择日期,或者直接在文本框中输入日期。默认情况下,它会按照指定的格式显示和验证日期...
在本文中,我们将深入探讨`Ext`框架中的`dateField`扩展,特别是在允许用户选择不同时间范围方面的能力,如年月日、年月、年或仅月。`Ext`是Sencha公司开发的一个强大的JavaScript应用框架,常用于构建富客户端Web...
1. **类定义**:创建一个新的DateField子类,可能命名为`MonthPicker`,继承自Ext.form.field.DateField。 2. **配置项**:定义新的配置选项,如`allowOnlyMonthYear`,用于开启只选择年月模式。 3. **模板修改**:...
var textField = Ext.create('Ext.form.field.Text', { fieldLabel: '文本字段', id: 'readOnlyTextField' }); // 动态设置 readOnly 为 true textField.setReadOnly(true); ``` 在上述代码中,我们首先创建了一...
1.此控件支持Ext3.2及以上版本 2.用法与Ext.form.DateField一样,xtype:'datetimefield' 3.不需要导入css或其他js 4.解决某些插件导入会显示对象未定义问题
53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....
**2.19 Date Field (Ext.form.DateField)** - **xtype**: `datefield` - **功能描述**:Date Field 是一个用于输入日期的文本框。 - **主要用途**:适用于需要用户输入日期的场景。 **2.20 Field (Ext.form.Field)...
53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....
Ext DateField控件是Ext JS库中的一个组件,主要用于处理日期相关的输入。在Web应用程序中,用户经常需要输入或选择日期,DateField控件提供了一个交互式的界面来完成这一任务。然而,有时我们可能只需要用户选择...
`Ext.form.DateField`提供了日期选择功能,同时具备强大的校验机制。通过`format`参数,可以自定义日期的显示格式,如`'y-m-d'`。`disabledDays`参数允许禁用某些日期,如周末或其他特定日期,以满足特定业务规则。...
- `datefield`:`Ext.form.DateField`,日期选择输入框。 - `timefield`:`Ext.form.TimeField`,时间输入框。 - `field`:`Ext.form.Field`,表单的基础字段。 - `fieldset`:`Ext.form.FieldSet`,用于组织...
2. **日期字段**:使用`Ext.form.DateField`创建,用于选择日期。例如: ```javascript new Ext.form.DateField({ fieldLabel: 'Hire Date', name: 'hire_date', width: 90, allowBlank: false, // 不允许为空 ...
可以通过如下代码新建一个日期选择框: 代码如下: new Ext.form.DateField({ id: ‘diliveryDate’, format: ‘Y年m月d日’, maxValue: new Date(), minValue: ‘1900-01-01’, disabledDays: [0, 6], ...
new Ext.form.ComboBox({ // 创建ComboBox组件 hiddenName: 'ns', fieldLabel: '', triggerAction: 'all', store: new Ext.data.SimpleStore({ fields: ['name', 'code'], data: [['', '1'], ['', '0']] }),...
Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...
4. **`datefield`** - `Ext.form.DateField`,日期选择项,用于输入日期。 5. **`timefield`** - `Ext.form.TimeField`,时间录入项,用于输入时间。 6. **`field`** - `Ext.form.Field`,表单字段基类,所有...
- `Ext.form.DateField`:用于选择日期。 - `Ext.form.Hidden`:用于隐藏字段,不显示在用户界面上。 - `Ext.form.HtmlEditor`:提供一个HTML编辑器,允许用户编辑富文本。 在输入验证方面,Ext Form提供了丰富的...