CODEWITHSUNDEEP
ajaxextjs
Peace
Peace

Reputation: 191

ExtJS DatePicker Allow Dates Only by Ajax

I have an interesting task that I am trying to do. I want to display a datepicker field on ExtJS allow certain days to be picked only though so for example:

09/12/2018
09/11/2018
09/10/2018
09/07/2018
09/06/2018

As you see, I am not allowing the user to select 8th or 9th. I can pull these dates using Ajax but I am not sure how to connect them to the datepicker field so it will only allow dates that it picks up using Ajax.

So far I have below calendar but minDate and maxDate only won't do the trick for me...

 title: 'Choose a future date:',
    width: 330,
    bodyPadding: 10,
    items: [{
        xtype: 'datepicker',
        maxDate: new Date(),
        handler: function (picker, date) {
            // do something with the selected date
        }
    }]

https://docs.sencha.com/extjs/6.2.1/classic/Ext.picker.Date.html

Upvotes: 0

Views: 420

Answers (2)

Sandy.....
Sandy.....

Reputation: 2870

Assuming you know which dates to be disabled. It can be achieved by different ways as follows:

1] You can use 'disabledDates' config property which may have array of dates to be disabled. You can use it as follows:

title: 'Choose a future date:',
width: 330,
bodyPadding: 10,
items: [{
    xtype: 'datepicker',
    maxDate: new Date(),
    disabledDates: ['09/08', '09/09'],
    handler: function (picker, date) {
        // do something with the selected date
    }
}]

Or

2] You can use 'disabledDatesRE' config property which may have RegExp with dates to be disabled. You can use it as follows:

title: 'Choose a future date:',
width: 330,
bodyPadding: 10,
items: [{
    xtype: 'datepicker',
    maxDate: new Date(),
    disabledDatesRE: new RegExp("(?:09/08/2018|09/09/2018)"),
    handler: function (picker, date) {
        // do something with the selected date
    }
}]

You can use your own logic by using above code as per the requirement.

Upvotes: 2

Peace
Peace

Reputation: 191

minDate starts from 42 days before today maxDate ends at 7 days before today disabledDays disables sundays and mondays listener in place so when you select a date it will log it to the console.

 items: [{
        title: 'Please select a date:',
        width: 330,
        bodyPadding: 10,
        items: [{
            xtype: 'datepicker',
            disabledDays: [0,6],
            minDate: Ext.Date.add(new Date(), Ext.Date.DAY, -42),
            maxDate: Ext.Date.add(new Date(), Ext.Date.DAY, -7),
            listeners: {
                select: function (picker, date) {
                    console.log(date);
                }
            }

Upvotes: 0

Related Questions