Выбор дат. 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()
	});
});
Выбор даты в ExtJs 4

Свойство 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 и перечисляются через вертикальную черту.

    Поддержать сайт на родительском проекте КГБ