Работа с датами в Ext JS 4

Для работы с датами в Ext JS имеется класс Ext.Date, который расширяет функциональность стандартного объекта JavaScript Datе.

Мы можем использовать стандартный объект Date для задания даты:

var date = new Date(2012, 10, 22, 16, 15);

Дополнительная функциональность, которую привносит ExtJS в данном случае состоит в том, что мы можем форматировать дату в соответствии с любым определенным нами шаблоном и выделять из нее нужную информацию.

Чтобы вывести дату в определенном формате, нам надо представить шаблон вывода. Для задания шаблонов вывода дат используется объект Ext.Date.patterns:

Ext.Date.patterns={
	ISO8601Long: "d-m-Y H:i:sP",
	ISO8601Short:"d-m-Y",
	ShortDate: "j/n/y",
	FullDateTime: "l, F d, Y g:i:s A",
	LongTime: "g:i:s A",
	SortableDateTime: "d-m-Y\ H:i:s",
	UniversalSortableDateTime: "Y-m-d H:i:sO", 
	CustomFormat: "H:i d-m"
};

В данном случае мы определили различные форматы вывода времени и каждому присвоили определенной шаблон. Например, шаблон "H:i d-m" показывает дату в формате "Час-Минуты День-Месяц", где H - это часы от 00 до 23 (есть еще формат h, также представляющий часы в 12-ти часовом формате - от 01 до 12), i - минуты от 00 до 59.

Все возможные определения форматов можно найти в официальной документации: Ext.Date.

Используя функцию Ext.Date.format, мы можем привести дату к определенному нами выше шаблону. Например, определим некоторую дату и выведем ее на панель:

Ext.onReady(function(){
	var date = new Date(2012, 10, 22, 16, 15);
	Ext.Date.patterns={
		ISO8601Long: "d-m-Y H:i:sP",
		ISO8601Short:"d-m-Y",
		ShortDate: "j/n/y",
		FullDateTime: "l, F d, Y g:i:s A",
		LongTime: "g:i:s A",
		SortableDateTime: "d-m-Y\ H:i:s",
		UniversalSortableDateTime: "Y-m-d H:i:sO", 
		CustomFormat: "H:i d-m"
	};
	
	var time = "<p><b>ISO8601Long</b>: "+Ext.Date.format(date, Ext.Date.patterns.ISO8601Long) + 
	   "</p><p><b>ISO8601Short</b>: " + Ext.Date.format(date, Ext.Date.patterns.ISO8601Short) +
	   "</p><p><b>ShortDate</b>:    " + Ext.Date.format(date, Ext.Date.patterns.ShortDate) +
	   "</p><p><b>FullDateTime</b>: " + Ext.Date.format(date, Ext.Date.patterns.FullDateTime) +
	   "</p><p><b>SortableDateTime</b>: " + Ext.Date.format(date, Ext.Date.patterns.SortableDateTime) +
	   "</p><p><b>UniversalSortableDateTime</b>: " + Ext.Date.format(date, Ext.Date.patterns.UniversalSortableDateTime) +
	   "</p><p><b>CustomFormat</b>: " + Ext.Date.format(date, Ext.Date.patterns.CustomFormat);

	var pannel=Ext.create('Ext.Panel', {
            title: 'Приложение Ext JS 4',
			html:time,
			width: 400,
			height: 250,
			renderTo: Ext.getBody()
        });	
});

В результате мы получим следующий вывод:

Однако, как видно из изображения, у нас есть небольшая проблемка - полная дата отображает английские названия дня и месяца, что для приложения на другом языке было бы нежелательно. Но ExtJS позволяет решить эту проблему, переопределив названия дней и месяцев с помощью свойств Ext.Date.monthNames и Ext.Date.dayNames:

Ext.onReady(function(){
    var date = new Date(2012, 10, 22, 16, 15);
    Ext.Date.patterns={
        ISO8601Long: "d-m-Y H:i:sP",
        ISO8601Short:"d-m-Y",
        ShortDate: "j/n/y",
        FullDateTime: "l, F d, Y g:i:s A",
        LongTime: "g:i:s A",
        SortableDateTime: "d-m-Y\ H:i:s",
        UniversalSortableDateTime: "Y-m-d H:i:sO",
        CustomFormat: "H:i d-m"
    };
	Ext.Date.monthNames = ['Январь','Февраль','Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
	Ext.Date.dayNames = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
    var time = "<p><b>Локализованная дата</b>: " + Ext.Date.format(date, Ext.Date.patterns.FullDateTime) + "</p>";
 
    var pannel=Ext.create('Ext.Panel', {
            title: 'Приложение Ext JS 4',
            html:time,
            width: 400,
            height: 150,
            renderTo: Ext.getBody()
        });
});

Теперь у нас уже будет локализованная дата:

Парсинг дат

Кроме использования шаблонов для получения полной даты мы можем применять функцию Ext.Data.parse():

var time="<p>" + Ext.Date.parse("20-11-2012", "d-m-Y") +"</p>";
//результат: Tue Nov 20 2012 00:00:00 GMT+0300

Метод Ext.Data.parse() принимает три параметра. Первый представляет дату в виде строки, а второй представляет шаблон, который показывает, как парсить строку в первом параметре. Третий необязательный параметр, который представляет булевое значение true или false. Третий параметр показывает точность форматирования времени. Например, код Ext.Date.parse("30-02-2012", "d-m-Y", false) вернет значение "Thu Mar 01 2012 00:00:00 GMT+0300", так как в не существует 30-го февраля, и фреймворк перенесет дату на следующий день - то есть на 1 марта. Но если бы мы использовали в качестве третьего параметра true, то выражение вернуло бы null.

Операции над датами

ExtJS представляет ряд методов для управления датами. Так. с помощью метода Ext.Date.between мы можем узнать находится ди дата в определенном временном промежутке:

Ext.Date.between(new Date('07/01/2011'), new Date('05/01/2011'), new Date('09/01/2011')));
//результат: true, так как первая дата находится в промежутке между второй и третьей

Метод Ext.Date.add добавляет к дате указанное количество дней/месяцев/лет. Передавая отрицательное значение, мы можем вычесть из даты определенное количество времени

var date =Ext.Date.add(new Date('09/30/2011'), Ext.Date.MONTH, -3);
//результат: Thu Jun 30 2011 00:00:00 GMT+0300 - то есть из 9-го месяца вычли 3 = июнь

Первый параметр этой функции представляет дату, над которой проводим операцию. Второй параметр - константу, обозначающую тип временного промежутка. Имеются следующие типы:

• Ext.Date.DAY
• Ext.Date.HOUR
• Ext.Date.MILLI
• Ext.Date.MINUTE
• Ext.Date.SECOND
• Ext.Date.YEAR
• Ext.Date.MONTH

С помощью метода Ext.Date.defaultFormat можно установить формат для вывода даты в соответствии с текущей локалью. Например:

Ext.Date.defaultFormat='d/m/Y';

С помощью метода Ext.Date.getGMTOffset можно узнать смещение некоторой даты относительно времени по гринвичу. Например, выражение var offset =Ext.Date.getGMTOffset(new Date()); выдаст значение "+0300", поскольку время в моем часовом поясе смещено относительно Гринвича на 3 часа.

Метод Ext.Date.getElapsed(Date dateA, [Date dateB]) позволяет получить количество миллисекунд прошедших между двумя датами. Если второй параметр не указан, то в качестве него по умолчанию используется текущая дата и время.