`
李荣郝彬
  • 浏览: 733 次
  • 性别: Icon_minigender_2
  • 来自: 濮阳
最近访客 更多访客>>
社区版块
存档分类
最新评论

extjs 日期开始结束

阅读更多

Ext.form.DateField 日期范围控制 

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

    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; 
                } 
            }); 
    然后分别定义起始日期和结束日期控件:
    var startDate = new Ext.form.DateField({ 
                    fieldLabel : '开始日期', 
                    emptyText : '请选择', 
                    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 : '请选择', 
                    readOnly : true, 
                    allowBlank : false, 
                    format : 'Y-m-d',//日期格式 
                    name : 'enddt', 
                    id : 'endDate', 
                    vtype : 'daterange',//daterange类型为上代码定义的类型 
                    startDateField : 'startdt'//必须跟startDate的id名相同 
                }) 
分享到:
评论

相关推荐

    extjs日期+时间控件

    配置选项包括开始和结束日期限制(`minDate`和`maxDate`)、默认显示日期(`value`)等。 9. **自定义控件**:如果标准的日期时间控件无法满足需求,开发者可以创建自定义组件,组合使用`Ext.form.field.Date`和`...

    extjs及extgantt

    6. **拖放调整**:允许用户通过拖放操作改变任务的开始日期、结束日期或依赖关系。 7. **任务信息面板**:提供详细的任务信息,包括描述、进度、状态等。 在实际开发中,使用Ext Gantt需要注意以下几点: - **兼容...

    解决datefield组件 日期选择框在IE8下显示不完整的问题

    extjs中,经常会用到datefield组件控制用户对日期的操作,比如日志管理,需要开始时间、结束时间,但是IE8下日期选择框会显示不全,解决方法参加代码。 同时改代码解决了开始时间、结束时间的时间范围控制的问题,即...

    Extjs Lib 包

    date varchar(20), --所属日期(如2011-01) ) go create table shopSumCost( --5.档口总费用表 id int identity(1,1) primary key, --id shopId int , --档口ID shopUserId int, --用户ID ...

    ExtJS和Sencha touch可用到的倒计时插件

    在ExtJS中,你可以找到一些第三方插件,如`Ext.ux.Countdown`,它允许开发者设置一个结束时间,并在指定的容器中显示从现在到该时间的剩余秒数。这个插件通常包括配置选项,如字体大小、颜色、样式等,以便自定义...

    extjs 时间范围选择自动判断的实现代码

    这个功能确保用户选择的结束日期不会早于开始日期,从而避免逻辑错误。以下是如何在EXTJS中实现这一功能的详细步骤: 1. **定义联动处理函数**: 在EXTJS中,我们可以自定义验证函数来实现这一功能。这里的关键是`...

    ext4.2 日历日期控件,可以选择时分秒

    1. **多选模式**:用户可以选择单个日期和时间,也可以选择一个时间范围,例如会议的开始和结束时间。 2. **直观界面**:日历视图清晰展示月份和日期,时间选择通常通过滑块或下拉菜单实现,确保用户能快速定位所需...

    ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

    例如,可能增加了开始编辑、结束编辑、取消编辑等方法,以及编辑开始、编辑结束等事件,这些都为开发者提供了更大的灵活性。 5. **样式和视觉效果**:为了提供更好的用户体验,重构可能还包括了对编辑器样式的改进...

    ext grid 基本功能的学习 另付js 对上周月季度的计算等

    例如,可以通过减去特定天数来得到上周的开始和结束日期,通过操作月份来获取上个月,以及根据当前日期计算上个季度的起始和结束日期。 6. **Ext Tree**:标签中提到了Ext Tree,它是Ext JS中的树形组件,常用于...

    ExtJs 正则表达式小结

    1. 非负整数(正整数+0):`"^\d+$"`,这里`\d`代表数字,`^`和`$`分别表示匹配字符串的开始和结束,确保整个字符串都是数字。 2. 正整数:`"^[0-9]*[1-9][0-9]*$"`,排除了以0开头的数字。 3. 非正整数(负整数+0...

    calendar日历图标大全

    2. 跨日期范围选择:通常由两个日期标记,一个开始日期,一个结束日期,表示一个时间段。 3. 加号/减号:用于增加或减少日期,常见于月视图和年视图中。 4. 日、周、月视图切换:这些图标帮助用户在不同时间粒度之间...

    日历控件及Demo源码

    拖放到 .aspx 页面中即可 后台获取日期方法: protected void Button1_Click(object sender, ... Label1.Text="开始日期:"+ CodefanCalendar1.Text+" 结束日期:"+CodefanCalendar2.Text; } 简单方便,兼容性好~

    Ext时间控件.rar

    在日程管理应用中,用户可以设定事件开始和结束的具体时刻。时间控件通常会与表单结合使用,通过事件监听和验证机制确保用户输入的时间符合业务规则。 实现这样一个时间控件,开发者可能需要利用ExtJS的以下核心...

    ext scheduler -java

    在EXT Scheduler中,资源甘特图可以直观地表示资源的分配情况,包括开始和结束时间、持续时间、依赖关系等。这有助于项目经理和团队成员了解任务的当前状态,优化工作流程,并进行有效的决策。 【实现细节】:使用...

    [php原创]倒计时提醒服务201311042153 v1.0最终版

    2. **数据存储**(data):这里可能存储着用户创建的倒计时任务信息,如任务名称、结束日期、提醒方式等。数据可能以JSON、XML或SQL数据库的形式存储,以便程序读取和处理。 3. **邮件服务**(pmail):倒计时提醒...

    Gantt Chart source code for Silverlight

    甘特图,源于亨利·甘特的名字,是一种利用条形图来表示项目计划的时间表,它清晰地展示了任务的开始与结束日期,以及任务间的依赖关系。在Silverlight中实现甘特图,可以提供动态的、实时的项目进度更新,对于项目...

    甘特图插件带例子

    - **规划项目**:设定任务开始和结束日期,以及它们之间的依赖关系。 - **监控进度**:实时查看任务进度,及时发现延误或提前完成的情况。 - **资源调度**:优化资源分配,确保关键路径上的任务得到优先处理。 - **...

Global site tag (gtag.js) - Google Analytics