`

ExtJs实现日期的SearchDateField

阅读更多

一。一些废话

    废话的不说!开代码

二。截图

三。代码结构

Ext.ns('Ext.sy');
Ext.sy.SearchDateField = Ext.extend(Ext.form.TwinTriggerField,  {
    
    format : "Y-m-d",
    editable :false,
    altFormats : "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j",
    
    disabledDaysText : "Disabled",
    
    disabledDatesText : "Disabled",
    
    minText : "The date in this field must be equal to or after {0}",
    
    maxText : "The date in this field must be equal to or before {0}",
    
    invalidText : "{0} is not a valid date - it must be in the format {1}",
    
    trigger1Class : 'x-form-date-trigger',
    trigger2Class : 'x-form-clear-trigger',
    hideTrigger2:true,
    showToday : true,
    startDay : 0,
    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
    initTime: '12', 
    initTimeFormat: 'H',
    
    width:180,
    hasSearch : false,
    safeParse : function(value, format) {
        if (Date.formatContainsHourInfo(format)) {
            
            return Date.parseDate(value, format);
        } else {
            
            var parsedDate = Date.parseDate(value + ' ' + this.initTime, format + ' ' + this.initTimeFormat);
 
            if (parsedDate) {
                return parsedDate.clearTime();
            }
        }
    },

    initComponent : function(){
        Ext.sy.SearchDateField.superclass.initComponent.call(this);

        this.addEvents(
            'select'
        );

        if(Ext.isString(this.minValue)){
            this.minValue = this.parseDate(this.minValue);
        }
        if(Ext.isString(this.maxValue)){
            this.maxValue = this.parseDate(this.maxValue);
        }

        this.disabledDatesRE = null;
        this.initDisabledDays();
    },
    initEvents: function() {
        Ext.sy.SearchDateField.superclass.initEvents.call(this);
        this.keyNav = new Ext.KeyNav(this.el, {
            "down": function(e) {
                this.onTrigger1Click();
            },
            scope: this,
            forceKeyDown: true
        });
    },


    
    initDisabledDays : function(){
        if(this.disabledDates){
            var dd = this.disabledDates,
                len = dd.length - 1,
                re = "(?:";

            Ext.each(dd, function(d, i){
                re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
                if(i != len){
                    re += '|';
                }
            }, this);
            this.disabledDatesRE = new RegExp(re + ')');
        }
    },

    
    setDisabledDates : function(dd){
        this.disabledDates = dd;
        this.initDisabledDays();
        if(this.menu){
            this.menu.picker.setDisabledDates(this.disabledDatesRE);
        }
    },

    
    setDisabledDays : function(dd){
        this.disabledDays = dd;
        if(this.menu){
            this.menu.picker.setDisabledDays(dd);
        }
    },

    
    setMinValue : function(dt){
        this.minValue = (Ext.isString(dt) ? this.parseDate(dt) : dt);
        if(this.menu){
            this.menu.picker.setMinDate(this.minValue);
        }
    },

    
    setMaxValue : function(dt){
        this.maxValue = (Ext.isString(dt) ? this.parseDate(dt) : dt);
        if(this.menu){
            this.menu.picker.setMaxDate(this.maxValue);
        }
    },

    
    getErrors: function(value) {
        var errors = Ext.sy.SearchDateField.superclass.getErrors.apply(this, arguments);

        value = this.formatDate(value || this.processValue(this.getRawValue()));

        if (value.length < 1) { 
             return errors;
        }

        var svalue = value;
        value = this.parseDate(value);
        if (!value) {
            errors.push(String.format(this.invalidText, svalue, this.format));
            return errors;
        }

        var time = value.getTime();
        if (this.minValue && time < this.minValue.clearTime().getTime()) {
            errors.push(String.format(this.minText, this.formatDate(this.minValue)));
        }

        if (this.maxValue && time > this.maxValue.clearTime().getTime()) {
            errors.push(String.format(this.maxText, this.formatDate(this.maxValue)));
        }

        if (this.disabledDays) {
            var day = value.getDay();

            for(var i = 0; i < this.disabledDays.length; i++) {
                if (day === this.disabledDays[i]) {
                    errors.push(this.disabledDaysText);
                    break;
                }
            }
        }

        var fvalue = this.formatDate(value);
        if (this.disabledDatesRE && this.disabledDatesRE.test(fvalue)) {
            errors.push(String.format(this.disabledDatesText, fvalue));
        }

        return errors;
    },

    
    
    validateBlur : function(){
        return !this.menu || !this.menu.isVisible();
    },

    
    getValue : function(){
        return this.parseDate(Ext.sy.SearchDateField.superclass.getValue.call(this)) || "";
    },

    
    setValue : function(date){
        return Ext.sy.SearchDateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
    },

    
    parseDate : function(value) {
        if(!value || Ext.isDate(value)){
            return value;
        }

        var v = this.safeParse(value, this.format),
            af = this.altFormats,
            afa = this.altFormatsArray;

        if (!v && af) {
            afa = afa || af.split("|");

            for (var i = 0, len = afa.length; i < len && !v; i++) {
                v = this.safeParse(value, afa[i]);
            }
        }
        return v;
    },

    
    onDestroy : function(){
        Ext.destroy(this.menu, this.keyNav);
        Ext.sy.SearchDateField.superclass.onDestroy.call(this);
    },

    
    formatDate : function(date){
        return Ext.isDate(date) ? date.dateFormat(this.format) : date;
    },

    
    
    
    onTrigger1Click : function(){
        if(this.disabled){
            return;
        }
        if(this.menu == null){
            this.menu = new Ext.menu.DateMenu({
                hideOnClick: false,
                focusOnSelect: false
            });
        }
        this.onFocus();
        Ext.apply(this.menu.picker,  {
            minDate : this.minValue,
            maxDate : this.maxValue,
            disabledDatesRE : this.disabledDatesRE,
            disabledDatesText : this.disabledDatesText,
            disabledDays : this.disabledDays,
            disabledDaysText : this.disabledDaysText,
            format : this.format,
            showToday : this.showToday,
            startDay: this.startDay,
            minText : String.format(this.minText, this.formatDate(this.minValue)),
            maxText : String.format(this.maxText, this.formatDate(this.maxValue))
        });
        this.menu.picker.setValue(this.getValue() || new Date());
        this.menu.show(this.el, "tl-bl?");
        this.menuEvents('on');
    },

	onTrigger2Click : function(){
		this.el.dom.value = '';
        this.triggers[1].hide();
	},
    
    menuEvents: function(method){
        this.menu[method]('select', this.onSelect, this);
        this.menu[method]('hide', this.onMenuHide, this);
        this.menu[method]('show', this.onFocus, this);
    },

    onSelect: function(m, d){
        this.setValue(d);
        this.fireEvent('select', this, d);
        this.menu.hide();
        this.triggers[1].show();
    },

    onMenuHide: function(){
        this.focus(false, 60);
        this.menuEvents('un');
    },

    
    beforeBlur : function(){
        var v = this.parseDate(this.getRawValue());
        if(v){
            this.setValue(v);
        }
    }
});
Ext.reg('searchdatefield', Ext.sy.SearchDateField);

 四。总结

       各位童鞋现在是否可以自己封装如该控件的下拉框检索控件等等了呢?

分享到:
评论

相关推荐

    extjs 4.0 日期时间控件

    在标题中提到的"extjs 4.0 日期时间控件",是指ExtJS 4.0框架中的DateTime组件,这是一个用于在Web应用中输入和显示日期与时间的控件。 描述中提到了这个控件是经过修改的中文版本。原版可能是英文,但通过定制,...

    Extjs6 日期时间控件

    在EXTJS6中,日期时间控件通常使用Combobox(组合框)来实现,Combobox是一个下拉列表,用户可以通过点击下拉按钮选择预设的值。对于日期时间控件,Combobox下拉列表包含日期和时间的组合选项,使得选择过程更为直观...

    Extjs5 日期时间

    日期用Extjs自带的Ext.form.field.Date,时间用Ext.form.field.Number和Ext.form.Label进行组装。 样式显示为横向的日期、时间,非日期弹出框下方选择日期。 调用代码:Ext.create('erp.ux.form.field.DateTimer', {...

    extjs3.0 日期时间控件

    标题中的"extjs3.0 日期时间控件"指的是ExtJS 3.0框架中的DateTimeField组件,这是一个组合了日期选择器和时间选择器的控件,允许用户以交互的方式选择精确的日期和时间。这个控件通常用于表单中,提供了一种直观且...

    ExtJS日期多选组件源码

    该组件扩展了ExtJS的基础日期选择器,实现了多选日期的功能。用户可以方便地通过该组件选取一个日期范围或单独的多个日期,并将这些日期以数组的形式返回。这大大增强了日期选择的灵活性,满足了更复杂的业务需求。 ...

    extjs时间日期选择组件

    在EXTJS这个强大的JavaScript框架中,时间日期选择组件是一个至...结合`DateTimePicker.js`和`DateTimeField.js`,并参考`使用说明.txt`,开发者可以轻松地在项目中集成这些组件,实现高效、美观的日期和时间选择功能。

    Extjs 5 日期时间控件

    在ExtJS 5中,日期时间控件是开发用户界面时经常会用到的组件,它允许用户选择和输入日期及时间值。本篇文章将深入探讨ExtJS 5的日期时间控件及其特点。 首先,ExtJS 5 的日期时间控件(DateTimeField)结合了日期...

    EXTJS5 日期时分秒控件

    EXTJS5 日期时分秒控件,直接引用到程序中使用。网上有很多extjs4版本的和EXTJS5不兼容。调用实例代码: {labelWidth:60,width: 220,name:'mydate',fieldLabel: '日期',allowBlank: false,xtype: 'datetimefield',...

    extjs My97使用 extjs时间 extjs日期使用

    extjs4.0结合My97DatePicker4.7版本使用 使用简单 方便 解决extjs中日期控件不能显示时间的问题 下载后将其放到extjs目录的examples下 直接运行date.html即可 extjs4.0版本 4.0以前的版本没有测试过 如果有4.0版本...

    ExtjS实现聊天功能

    在这个"ExtJS实现聊天功能"的项目中,我们将探讨如何利用ExtJS框架构建一个类似于QQ的聊天应用程序。 首先,我们要理解聊天功能的核心要素。一个基本的聊天应用通常包含以下部分: 1. **用户界面**:ExtJS提供了...

    Extjs 轻松实现下拉框联动

    最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵

    extjs日期+时间控件

    ExtJS提供本地化支持,通过更改`Ext.locale`和`Ext.form.field.DateField`的`localeConfig`可以实现日期时间格式的本地化。 7. **时间选择器(Time Picker)**:`Ext.picker.Time`是用于选择时间的组件,允许用户...

    extjs实现的带标签、翻页动画的书

    在本项目中,“extjs实现的带标签、翻页动画的书”显然利用了ExtJS的组件化特性和动画功能,创建了一个模拟真实书籍阅读体验的应用。 首先,我们来看看“标签”这一概念。在Web应用中,标签(Tab)通常用来组织和...

    extjs实现增删查改

    在“extjs实现增删查改”这个主题中,我们将探讨如何使用ExtJS来实现基本的数据操作功能。 首先,增删查改(CRUD,Create, Read, Update, Delete)是任何数据管理应用的核心功能。在ExtJS中,我们可以利用Grid ...

    extjs 年月日期插件

    extjs中有时候查询需要通过日期(年月)查询。而这就是一个只显示年月的日期插件,很好用

    网上下载的三个ExtJs时间日期控件

    在网上,你可以找到各种各样的ExtJs时间日期控件,这些控件可以满足不同的需求和设计风格。本资源包含了三个不同的ExtJs时间日期控件,它们各有特色,总有一款能符合你的项目需求。 1. 文件"7cb99b07-f884-3e48-bb...

    extjs日期显示(如何转换日期格式)

    extjs 日期显示(如何转换日期格式) extjs 中显示日期时间的方法是在后台传递来的数据是 Date 类型的数据,日期时间格式为 timestamp,是 13 位的 long data 数字类型的时间。在 extjs6 中,可以使用配置消息转换...

    Extjs 实现增删改查

    Extjs 实现增删改查,可以与后台代码结合起来,利于实现

    extjs 日期时间

    在压缩包中的"Datetime"文件很可能是包含了实现日期时间选择器的示例代码和相关的HTML、CSS以及JavaScript文件。这些文件可能包括: 1. HTML 文件:展示了如何在页面中嵌入和使用日期时间选择控件。 2. CSS 文件:...

    ExtJs 带清空功能的日期组件

    在ExtJs框架中,日期组件(DateField)是用于用户输入日期的常见控件。然而,标准的ExtJs DateField并未内置清空日期的功能,这可能会在某些应用场景中造成不便。为了解决这个问题,我们需要自定义一个扩展,为日期...

Global site tag (gtag.js) - Google Analytics