`
li164589371
  • 浏览: 1303 次
社区版块
存档分类
最新评论

EXTJS自定义验证日期选择范围

阅读更多
//自定义VType类型,验证日期选择范围
		Ext.apply(Ext.form.field.VTypes, {
			//验证方法
			dateRange : function(val, field) {
				var beginDate = null,//开始日期
					beginDateCmp = null,//开始日期组件
					endDate = null,//结束日期
					endDateCmp = null,//结束日期组件
					validStatus = true;//验证状态
				if(field.dateRange){
					//获取开始时间
					if(!Ext.isEmpty(field.dateRange.begin)){
						beginDateCmp = Ext.getCmp(field.dateRange.begin);
						beginDate = beginDateCmp.getValue();
					}
					//获取结束时间
					if(!Ext.isEmpty(field.dateRange.end)){
						endDateCmp = Ext.getCmp(field.dateRange.end);
						endDate = endDateCmp.getValue();
					}
				}
				//如果开始日期或结束日期有一个为空则校验通过
				if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){
					validStatus =  beginDate <= endDate;
				}
				
				return validStatus;
			},
			//验证提示信息
			dateRangeText : '开始日期不能大于结束日期'
		});

 datefield配置:

{
				id:'beginDate1',
				fieldLabel:'入学开始日期',
				dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
				vtype:'dateRange'
			},{
				id:'endDate1',
				fieldLabel:'入学结束日期',
				dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
				vtype:'dateRange'
			}

 也可以用监听器设置datefield最大值最小值:

listeners: { 
                                'focus': function(e){ 
                                    var endTime=Ext.getCmp('endTimeId').getValue(); 
                                    if(endTime!=''){ 
                                        this.setMaxValue(endTime.format('Y-m-d')); 
                                    } 
                                } 
                            } 

 

分享到:
评论

相关推荐

    EXTJS 自定义月选择控件

    maxYear:可以选择的最大年,默认2310 maxYearText:未通过最大年份验证时提示文本,默认"maxYearNow" //公共方法 serValue(b):设置控件值,传入参数:b --array,所要设置的日期数组 getValue():返回该控件的字符串...

    extjs时间日期选择组件

    首先,`DateTimePicker.js`是EXTJS中的一个自定义组件,它通常用于创建一个包含日期和时间选择器的单个输入字段。此组件结合了EXTJS的DatePicker和TimePicker功能,允许用户在一个界面上同时选择日期和时间。它提供...

    表单验证+对话框+日期格式化+日期选择框+select美化js框架

    JavaScript库如Bootstrap Datepicker或 Pikaday 提供了美观且易用的日期选择组件,支持多种语言,可以设置日期范围限制,以及自定义日期格式。它们通常与日期格式化相结合,以提供一致的用户体验。 5. Select美化:...

    Extjs 5 日期时间控件

    6. `picker`: 自定义日期和时间选择器的实例或配置。 此外,日期时间控件还支持事件监听,如`select`事件,当用户选择了一个新的日期和时间后触发,这在处理用户输入和更新关联的数据模型时非常有用。同时,控件还...

    Extjs4.1可用的日期时间选择控件

    该控件提供了诸如格式化日期、验证日期格式等功能。 - `Ext.picker.Date`是日期选择器,通常与日期字段配合使用,当用户点击字段时,会弹出包含日历视图的对话框,用户可以从中选择一个日期。 2. **时间选择器...

    ExtJs 带清空功能的日期组件

    默认情况下,它会按照指定的格式显示和验证日期。 要创建一个带清空功能的DateField,我们需要实现以下几个步骤: 1. **扩展DateField类**: 创建一个新的类,继承自Ext.form.field.Date,然后添加我们需要的清空...

    extjs日期+时间控件

    5. **事件处理**:ExtJS控件通常支持多种事件,如`select`事件(当用户选择一个日期或时间时触发),开发者可以绑定回调函数来响应这些事件,进行进一步的数据处理或验证。 6. **本地化**:对于国际化的应用,日期...

    extjs 4.1.1a datetimefield 日期时间选择框(第二次修改版)

    2. **配置选项**:DateTimeField支持多种配置选项,如格式化日期时间的样式('Y-m-d H:i:s'),显示模式(是否分离日期和时间选择),以及是否自动验证输入等。开发者可以根据项目需求自定义这些选项。 3. **事件...

    ExtJs4.1带时间选择的日期控件

    标签“ExtJs4 时间控件”暗示了我们关注的是ExtJs4.1中的时间选择功能,这包括但不限于时间格式化、时间间隔选择、时间验证以及与其他组件的交互。例如,我们可以根据需求设置时间选择器的时间间隔(如每5分钟或每15...

    extjs3.0 日期时间控件

    在标签中提到的"扩展日期控件"可能指的是DateTimeField组件在ExtJS中的扩展功能,比如自定义格式化、验证规则、事件监听等。这些扩展功能增强了标准日期时间选择器的灵活性和可定制性,以满足不同项目的需求。 在...

    extjs3.2、3.3 时间控件 日期控件扩展

    - 用户可以设置日期选择范围,如最小日期和最大日期,以及是否开启日期验证。 - 示例代码:`var dateField = new Ext.form.DateField({ ... });` 3. **扩展与自定义** - 在“extjs3.2、3.3 时间控件 日期控件...

    extjs 4.1.1a datetimefield 日期时间选择框(修改版)

    总的来说,这个资源为使用ExtJS 4.1.1a开发需要日期时间选择功能的应用提供了便利,尤其是那些希望自定义DateTimeField行为的开发者。通过理解这个修改版的工作原理和调整,开发者可以更有效地利用ExtJS创建高效且...

    extjs 4.0 日期时间控件

    5. **验证**:你可以设置验证规则,确保用户输入的日期和时间符合业务需求,如`minValue`和`maxValue`属性可以限制可选范围。 6. **事件处理**:通过监听`select`事件,开发者可以捕获用户选择日期或时间后触发的...

    extjs中dateField日期精确到时分秒的扩展控件

    在EXTJS这个强大的JavaScript框架中,DateField是一个用于输入日期的控件,通常它只允许用户选择年、月、日。然而,在某些情况下,我们可能需要将日期字段扩展到包括小时、分钟和秒,以便更精确地管理时间数据。这篇...

    ExtJS日期时间控件

    这可能涉及到对原有控件的继承,添加新的方法、属性和样式,以实现特定的功能,比如增强的键盘导航、日期时间范围选择等。 5. **日期时间格式化**: 在处理日期时间控件时,理解JavaScript的日期时间格式化(例如...

    EXTJS.GRIDPANEL 日期格式

    ### 四、监听事件验证日期格式 代码中还包含了对store加载事件的监听,用以验证数据是否按照预期的格式正确加载: ```javascript 'load': function(store, records, options) { var r = store.getAt(0); var ...

    轻松搞定Extjs 带目录

    Extjs的组件系统非常丰富,包括按钮、日期选择器、ComboBox等,它们都可以通过配置实现复杂的交互逻辑。数据管理部分涉及到了Extjs对Ajax请求的封装、数据代理、读取器、存储等概念。Extjs对分页、表单验证、表单...

    extjs时间控件精确秒

    我们还可以监听`change`事件来执行自定义验证逻辑。例如,确保选择的时间不早于当前时间: ```javascript Ext.create('Ext.form.field.Time', { // ... listeners: { change: function(field, newValue) { ...

    extjs4能用的带时分秒的日期控件

    3. **配置控件**:根据需要设置控件的配置项,如`format`(日期时间格式)、`minValue`和`maxValue`(可选日期范围)等。 4. **运行示例**:在浏览器中打开HTML文件,查看并测试控件的运行效果。 `datetime`这个...

    ExtJs中datetimefield扩展

    4. **自定义扩展**:可能这个扩展提供了一些自定义功能,比如自定义的日期时间格式,或者增强的验证机制。 5. **样式与布局**:DateTimeField可以通过CSS样式来定制外观,同时也可以利用ExtJs的布局管理与其他组件...

Global site tag (gtag.js) - Google Analytics