ExtJS DatePicker Разрешить даты только Ajax - PullRequest
Новая
       22

ExtJS DatePicker Разрешить даты только Ajax

0 голосов
/ 15 октября 2018

У меня есть интересное задание, которое я пытаюсь выполнить.Я хочу отобразить поле выбора даты в ExtJS, позволяя выбирать только определенные дни, например, так: 

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

Как видите, я не разрешаю пользователю выбирать 8-й или 9-й.Я могу получить эти даты с помощью Ajax, но я не уверен, как их соединить с полем datepicker, поэтому он будет разрешать только те даты, которые он собирает с помощью Ajax.

Пока у меня есть только календарь, но только minDate и maxDateне добьется цели для меня ... 

 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

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

minDate начинается за 42 дня до сегодняшнего дня. MaxDate заканчивается за 7 дней до сегодняшнего дня. DisabledDays отключает прослушиватель по воскресеньям и понедельникам, поэтому при выборе даты она регистрируется на консоли. 

 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);
                }
            }
0 голосов
/ 15 октября 2018

Предполагая, что вы знаете, какие даты будут отключены.Это может быть достигнуто различными способами следующим образом:

1] Вы можете использовать свойство конфигурации 'disabledDates', которое может иметь массив дат, которые должны быть отключены.Вы можете использовать его следующим образом: 

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
    }
}]

Или

2] Вы можете использовать свойство конфигурации 'disabledDatesRE', которое может иметь RegExp с датами для отключения.Вы можете использовать его следующим образом: 

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
    }
}]

Вы можете использовать свою собственную логику, используя приведенный выше код согласно требованию.

...