extjsdatefield

ExtJS: dateField - how to disable all and enable some dynamic array dates


How can I disable all calendar dates and enable from dynamic array?

For example, I have array

['1.12.21', '25.11.21', '3.12.21', '8.10.21']

I should disable all dates exceptdates from array - how can I do this?


Solution

  • You can use the Ext.form.field.Date disabledDates configuration, and setDisabledDates method to update it, see in the documentation. The array you specify here will be interpreted as a regular expression, so in your case you can set up a negated condition to disable all but some dates.

    Try the code below, also this working fiddle. This works in classic toolkit, I don't know how to do it in modern.

    Ext.application({
        name: 'Fiddle',
        launch: function () {
            const enabledDatesArray = ['01.10.21', '06.10.21', '15.10.21'];
            const disabledDatesRegex = '^(?!'+enabledDatesArray.join('|')+').*$';
            Ext.create('Ext.panel.Panel', {
                width: 400,
                renderTo: Ext.getBody(),
                items: [{
                    xtype: 'datepicker',
                    format: 'd.m.y',
                    disabledDates: [disabledDatesRegex]
                }]
            });
        }
    });