Выбор дат. Ext.form.field.Date
Для работы с датами в ExtJs предназначен класс Ext.form.field.Date. Он позволяет задать поле выбора даты:
Ext.onReady(function(){ var dateField=Ext.create('Ext.form.field.Date', { fieldLabel: 'Выбрать дату', format: 'd/m/Y' renderTo: Ext.getBody() }); });
Свойство format
задает формат даты. По умолчанию используется формат m/d/Y. Благодаря заданию формата при выборе даты 21 ноября 2012
у нас в поле появится не 11/21/2012, как принято в США, а более удобная для нас форма 21/11/2012
Чтобы задать дату, мы используем объект Date(год, месяц, день)
, причем отсчет месяцев начинается с 0, то есть февраль будет иметь номер 1.
Можно также отключить возможность выбора определенных дат, применяя свойство disabledDates:
Ext.onReady(function(){ var dateField=Ext.create('Ext.form.field.Date', { fieldLabel: 'Выбрать дату', format: 'd/m/Y', maxValue: new Date(2012, 11, 21), minValue: new Date(2011, 11, 21), disabledDates: ['25/11/2012', '22/11/2012'], renderTo: Ext.getBody() }); });
С помощью свойств maxValue
и minValue
задается макcимально и минимально возможные даты для выбора. Если их не задать, нам
будут доступны все даты.
Мы также можем отключить возможность выбора определенных дней недели. Например, чтобы отключить воскресенья и вторники, нам надо написать:
disabledDates: [0,2]
, так как воскресенье считается нулевым днем недели.
Чтобы задать дату, которая будет выбрана по умолчанию при загрузке страницы, можно использовать метод setValue: dateField.setValue('21/12/2012');
Альтернативные форматы
Возможно, пользователи будут склонны задавать дату в том формате, какой им больше нравятся, а не в том, какой мы определили. В этом случае можно указать набор альтернативных форматов, которые, при вводе, будут автоматически изменяться на главный определенный нами формат:
Ext.onReady(function(){ var dateField=Ext.create('Ext.form.field.Date', { fieldLabel: 'Выбрать дату', padding: 10, format: 'd/m/Y', altFormats: 'd m Y|d.m.Y', renderTo: Ext.getBody() }); });
Альтернативные форматы задаются с помощью свойства altFormats
и перечисляются через вертикальную черту.