DateField with enabled dates

Have you ever used DateField and specified disabled dates? And what about specifying enabled dates? Just continue reading ;)

Preparation

At first we will need to extend default DateField and name our new DateField. I named it EnablingDateField, but you can name it as you like.

BXR.extra.EnablingDateField = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        name: 'enabling-datefield'
    });
BXR.extra.EnablingDateField.superclass.constructor.call(this,config);
};
Ext.extend(BXR.extra.EnablingDateField,Ext.form.DateField);
Ext.reg('bxr-extra-enabling-datefield',BXR.extra.EnablingDateField);

Changing the regular expression

Because we want to set enabled dates and not disabled dates we will need to change the pattern that is testing for each date. So we will override the initDisabledDays method. Replace line Ext.extend(BXR.extra.EnablingDateField,Ext.form.DateField); with this code:

Ext.extend(BXR.extra.EnablingDateField,Ext.form.DateField, {
    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 + ').)+);
            this.getErrors();
        }
    }
});

Now we will match exactly the opposite that with original pattern - that is what we wanted!

Enhancements

For the smarter usage, we will want to add setEnabledDates method and enabledDates config parameter.

After definition of initDisabledDays insert new method:

    ,setEnabledDates: function(arr){
        if(arr.length != 0){
            this.setDisabledDates(arr);
        }else{
            this.setDisabledDates(['0-0-0']);
        }
        this.getErrors();
    }

Adding this method will allows you to call setEnabledDates(arrayWithEnabledDates) on your new EnablindDateField object and set new array of enabled dates. The default array ['0-0-0'] will disable all dates.

And the last modification, extend the basic config. Add these two lines after name definition

,format: MODx.config.manager_date_format
,disabledDates: config.enabledDates ? config.enabledDates : ['0-0-0']

The format option will take the MODx manager's date format and set it as a default for DateField. And the second line will take the enabledDates option and pass it to the disabledDates option (and if its empty, it will pass ['0-0-0'], causing that all dates will be disabled). And that's it!

Everything together

BXR.extra.EnablingDateField = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        name: 'enabling-datefield'
        ,format: MODx.config.manager_date_format
        ,disabledDates: config.enabledDates ? config.enabledDates : ['0-0-0']
    });
    BXR.extra.EnablingDateField.superclass.constructor.call(this,config);
};
Ext.extend(BXR.extra.EnablingDateField,Ext.form.DateField, {
    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 + ').)+$');
            this.getErrors();
        }
    }

    ,setEnabledDates: function(arr){
        if(arr.length != 0){
            this.setDisabledDates(arr);
        }else{
            this.setDisabledDates(['0-0-0']);
        }
        this.getErrors();
    }
});
Ext.reg('bxr-extra-enabling-datefield',BXR.extra.EnablingDateField);

Now you can use xtype bxr-extra-enabling-datefield like the default DateField.

Post By John Peca ExtJS, MODX