ExtJS DatePicker Allow Dates Only by Ajax - ajax

Question

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

Answer 1

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.

Answer 2

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);
}
}