`
gwh_08
  • 浏览: 335343 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext.form.DateField 取值范围问题

    博客分类:
  • Ext
EXT 
阅读更多

项目中有时需要用到起始日期和结束日期,要做到起始日期必须小于结束日期。在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名相同
   }) 
分享到:
评论
1 楼 stormhouse 2011-10-31  
受用了,,

相关推荐

    Ext.form表单中各种属性应用详解

    **Ext.form.DateField** 是一个日期选择器,继承自 **Ext.form.TriggerField**,专门用于日期的选择和输入。 - **altFormats**: 类型为 `String`,定义用于解析用户输入的其他日期格式,默认为 `'m/d/Y|m-d-y|m-d-Y...

    EXT.form组件

    `Ext.form.TriggerField`的`triggerClass`允许你自定义触发按钮的样式,而`Ext.form.DateField`则可以通过`altFormats`来定义不同的日期输入格式。 EXT.form组件的事件处理也很重要,例如`Ext.form.TriggerField`的...

    ExtJs 带清空功能的日期组件

    DateField是Ext.form.field.Date的实例,它继承自Ext.form.field.Text。DateField提供了一个日期选择器,允许用户通过日历图标选择日期,或者直接在文本框中输入日期。默认情况下,它会按照指定的格式显示和验证日期...

    Ext扩展dateField时间控件,可以选择年月日、年月、年、月

    在本文中,我们将深入探讨`Ext`框架中的`dateField`扩展,特别是在允许用户选择不同时间范围方面的能力,如年月日、年月、年或仅月。`Ext`是Sencha公司开发的一个强大的JavaScript应用框架,常用于构建富客户端Web...

    Ext DateField控件 - 只选择年月

    1. **类定义**:创建一个新的DateField子类,可能命名为`MonthPicker`,继承自Ext.form.field.DateField。 2. **配置项**:定义新的配置选项,如`allowOnlyMonthYear`,用于开启只选择年月模式。 3. **模板修改**:...

    Ext Extjs 禁止文本和日期编辑

    var textField = Ext.create('Ext.form.field.Text', { fieldLabel: '文本字段', id: 'readOnlyTextField' }); // 动态设置 readOnly 为 true textField.setReadOnly(true); ``` 在上述代码中,我们首先创建了一...

    Ext-datatimefield日期与时间选择器精确至时分秒

    1.此控件支持Ext3.2及以上版本 2.用法与Ext.form.DateField一样,xtype:'datetimefield' 3.不需要导入css或其他js 4.解决某些插件导入会显示对象未定义问题

    EXT核心API详解

    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组件描述,各个组件含义

    **2.19 Date Field (Ext.form.DateField)** - **xtype**: `datefield` - **功能描述**:Date Field 是一个用于输入日期的文本框。 - **主要用途**:适用于需要用户输入日期的场景。 **2.20 Field (Ext.form.Field)...

    ExtJS入门教程(超级详细)

    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 DateField控件是Ext JS库中的一个组件,主要用于处理日期相关的输入。在Web应用程序中,用户经常需要输入或选择日期,DateField控件提供了一个交互式的界面来完成这一任务。然而,有时我们可能只需要用户选择...

    ext_表单提交_数据校验

    `Ext.form.DateField`提供了日期选择功能,同时具备强大的校验机制。通过`format`参数,可以自定义日期的显示格式,如`'y-m-d'`。`disabledDays`参数允许禁用某些日期,如周末或其他特定日期,以满足特定业务规则。...

    ExtJs_xtype一览

    - `datefield`:`Ext.form.DateField`,日期选择输入框。 - `timefield`:`Ext.form.TimeField`,时间输入框。 - `field`:`Ext.form.Field`,表单的基础字段。 - `fieldset`:`Ext.form.FieldSet`,用于组织...

    EXT from培训教材

    2. **日期字段**:使用`Ext.form.DateField`创建,用于选择日期。例如: ```javascript new Ext.form.DateField({ fieldLabel: 'Hire Date', name: 'hire_date', width: 90, allowBlank: false, // 不允许为空 ...

    Extjs学习笔记之三 extjs form更多的表单项

    可以通过如下代码新建一个日期选择框: 代码如下: new Ext.form.DateField({ id: ‘diliveryDate’, format: ‘Y年m月d日’, maxValue: new Date(), minValue: ‘1900-01-01’, disabledDays: [0, 6], ...

    Extjs fieldset两行两列布局

    new Ext.form.ComboBox({ // 创建ComboBox组件 hiddenName: 'ns', fieldLabel: '', triggerAction: 'all', store: new Ext.data.SimpleStore({ fields: ['name', 'code'], data: [['', '1'], ['', '0']] }),...

    Ext Js权威指南(.zip.001

    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 ...

    ExtJs组件类的对应表

    4. **`datefield`** - `Ext.form.DateField`,日期选择项,用于输入日期。 5. **`timefield`** - `Ext.form.TimeField`,时间录入项,用于输入时间。 6. **`field`** - `Ext.form.Field`,表单字段基类,所有...

    ext 的ppt ext 的ppt ext 的pptext 的pptext 的ppt

    - `Ext.form.DateField`:用于选择日期。 - `Ext.form.Hidden`:用于隐藏字段,不显示在用户界面上。 - `Ext.form.HtmlEditor`:提供一个HTML编辑器,允许用户编辑富文本。 在输入验证方面,Ext Form提供了丰富的...

Global site tag (gtag.js) - Google Analytics