Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)
Работа с датой и временем может быть запутанной задачей для разработчиков, начинающихся с JavaScript. В этом уроке вы узнаете о новой библиотеке JavaScript под названием Luxon, которая позволяет легко работать с датой и временем в JavaScript.
На протяжении всего этого урока вы узнаете о различных особенностях библиотеки Luxon и о том, как использовать ее в своих проектах веб-приложений.
Начинаем
Вы создадите проект Angular и увидите, как использовать библиотеку Luxon для обработки даты и времени в Angular. Давайте начнем с создания Angular веб-приложения.
1 |
ng new AngularLuxon |
После создания проекта перейдите в каталог проекта и создайте новый компонент luxdate.
1 |
ng g component luxdate |
У вас будет создан LuxdateComponent и добавлен в модуль приложения в файле app.module.ts. Удалите приложение AppComponent по умолчанию из приложения, удалив файлы компонентов из папки src/app. Вот как выглядит файл app.module.ts:
1 |
import { BrowserModule } from '@angular/platform-browser'; |
2 |
import { NgModule } from '@angular/core'; |
3 |
|
4 |
import { LuxdateComponent } from './luxdate/luxdate.component'; |
5 |
|
6 |
|
7 |
@NgModule({ |
8 |
declarations: [ |
9 |
LuxdateComponent
|
10 |
],
|
11 |
imports: [ |
12 |
BrowserModule
|
13 |
],
|
14 |
providers: [], |
15 |
bootstrap: [LuxdateComponent] |
16 |
})
|
17 |
export class AppModule { } |
Измените файл src/index.html, чтобы добавить LuxdateComponent.
1 |
<body>
|
2 |
<app-luxdate></app-luxdate>
|
3 |
</body>
|
Сохраните указанные выше изменения и запустите сервер.
1 |
npm start |
У вас будет приложение, запущенное по адресу http://localhost:4200/.
Давайте импортируем библиотеку Luxon в ваше приложение.
1 |
npm install --save luxon |
После того, как Luxon установлен в приложении, импортируйте его в компонент LuxdateComponent. Теперь вы готовы использовать библиотеку Luxon в своем проекте.
Местное время и время UTC с использованием Luxon
Давайте посмотрим, как получить локальное время, используя библиотеку Luxon. Импортируйте DateTime из библиотеки Luxon.
1 |
import { DateTime } from 'luxon'; |
Внутри LuxdateComponent определите переменную localDatetime.
1 |
public localDatetime; |
Задайте значение переменной localDatetime, как показано ниже:
1 |
this.localDatetime = DateTime.local(); |
Отобразите переменную localDatetime в файле luxdate.component.html.
1 |
<div class="container"> |
2 |
<div>
|
3 |
<div class="local"> |
4 |
<span>
|
5 |
{{localDatetime}}
|
6 |
</span>
|
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
Сохраните изменения, и у вас будет локальное время, отображаемое на веб-странице.
1 |
2017-12-31T15:55:12.761+05:30 |
Дата и время, отображаемые выше, являются местным временем с прикрепленным часовым поясом. Вы можете форматировать дату и время, чтобы сделать его более интуитивным.
Отформатируйте дату и время для отображения с использованием следующей строки.
1 |
this.localDatetime = DateTime.local().toLocaleString(DateTime.DATETIME_FULL); |
Сохраните указанную выше строку кода, и вы увидите следующую дату и время.
1 |
December 31, 2017, 10:35 PM GMT+5:30 |
Аналогично, метод .utc в объекте DateTime отдает время UTC.
Добавьте новую переменную в LuxdateComponent, чтобы установить время UTC.
1 |
public utcDatetime; |
Задайте значение переменной utcDatetime с помощью объекта Luxon Datetime.
1 |
this.utcDatetime = DateTime.utc().toLocaleString(DateTime.DATETIME_FULL); |
Отобразите переменную utcDatetime в файле luxdate.component.html, как показано ниже:
1 |
<div class="container"> |
2 |
<h2>Luxon Library</h2> |
3 |
<div class="time"> |
4 |
<div class="local"> |
5 |
<span class="label"> |
6 |
Local time : |
7 |
</span>
|
8 |
<span>
|
9 |
{{localDatetime}}
|
10 |
</span>
|
11 |
</div>
|
12 |
<div class="utc"> |
13 |
<span class="label"> |
14 |
UTC time : |
15 |
</span>
|
16 |
<span>
|
17 |
{{utcDatetime}}
|
18 |
</span>
|
19 |
</div>
|
20 |
</div>
|
21 |
</div>
|
Добавьте следующий стиль CSS в файл luxdate.component.css.
1 |
.container{ |
2 |
text-align: center; |
3 |
width: 100%; |
4 |
}
|
5 |
.time{ |
6 |
display: inline-block; |
7 |
}
|
8 |
.local{ |
9 |
border: 1px solid #8c8282; |
10 |
text-align: left; |
11 |
background-color: burlywood; |
12 |
padding: 10px; |
13 |
}
|
14 |
.utc{ |
15 |
margin-top: 30px; |
16 |
border: 1px solid #8c8282; |
17 |
text-align: left; |
18 |
background-color: burlywood; |
19 |
padding: 10px; |
20 |
}
|
21 |
.label{ |
22 |
font-family: serif; |
23 |
font-size: 22px; |
24 |
font-style: initial; |
25 |
}
|
Сохраните приведенные выше изменения, и вы сможете просматривать местное время и время UTC, используя библиотеку Luxon.
Чтобы отобразить местное время и время UTC с включенными секундами, вы можете использовать DATETIME_FULL_WITH_SECONDS. Вот как это будет выглядеть:
1 |
ngOnInit() { |
2 |
this.localDatetime = DateTime.local().toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS); |
3 |
this.utcDatetime = DateTime.utc().toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS); |
4 |
}
|
Сохраните изменения, и вы будете показывать локальное время и время UTC с секундами.
Общая информация о дате и времени с использованием Luxon
Библиотека Luxon предоставляет класс Info, который помогает получить некоторую общую информацию о дате и времени.
Когда дело касается даты и времени, довольно часто бывает, что вам может понадобиться список месяцев в году. Используя класс Info, вы можете получить список месяцев как массив.
Импортируйте класс Info в файл luxdate.component.ts.
1 |
import { DateTime, Info } from 'luxon'; |
Объявите переменную для списка месяцев и инициализируйте ее.
1 |
public months; |
2 |
|
3 |
constructor() { |
4 |
this.months = []; |
5 |
}
|
Установите список месяца из класса Info.
1 |
this.months = Info.months(); |
Добавьте следующий HTML в файл luxdate.component.html, чтобы отобразить содержимое переменной months.
1 |
<div class="month"> |
2 |
<span class="label"> |
3 |
Month : |
4 |
</span>
|
5 |
<span>
|
6 |
<select>
|
7 |
<option *ngFor="let month of months; let i = index"> |
8 |
{{month}}
|
9 |
</option>
|
10 |
</select>
|
11 |
</span>
|
12 |
</div>
|
Сохраните вышеуказанные изменения, и у вас будет заполненный список месяцев.
Аналогичным образом, используя метод weekdays, вы получаете список рабочих дней.
1 |
this.weeks = Info.weekdays(); |
Сохраните изменения, и у вас будут выходные дни:
Luxon также предоставляет возможность получить список meridiems, используя метод meridiems.
1 |
this.meridians = Info.meridiems(); |
Измените код HTML в файле luxdate.component.html, чтобы отобразить weeks и meridians.
1 |
<div class="month"> |
2 |
<span>
|
3 |
<select>
|
4 |
<option *ngFor="let month of months; let i = index"> |
5 |
{{month}}
|
6 |
</option>
|
7 |
</select>
|
8 |
</span>
|
9 |
<span>
|
10 |
<select>
|
11 |
<option *ngFor="let week of weeks; let i = index"> |
12 |
{{week}}
|
13 |
</option>
|
14 |
</select>
|
15 |
</span>
|
16 |
<span>
|
17 |
<select>
|
18 |
<option *ngFor="let meridian of meridians; let i = index"> |
19 |
{{meridian}}
|
20 |
</option>
|
21 |
</select>
|
22 |
</span>
|
23 |
</div>
|
Сохраните изменения, и вы сможете просматривать отображаемые недели и меридианы.
Обработка интернационализации с использованием Luxon
Luxon предоставляет класс Setting, с помощью которого вы можете справиться с поведением Luxon. Давайте установим настройку локали по умолчанию для Luxon на el.
Импортируйте класс Settings в файле luxdate.component.ts.
1 |
import { DateTime, Settings, Info } from 'luxon'; |
В методе конструктора LuxdateComponent установите локаль по умолчанию, как показано:
1 |
constructor() { |
2 |
Settings.defaultLocale = 'el'; |
3 |
}
|
Сохраните изменения, и у вас будет установлен языковая локаль в el.
Информация о зоне с помощью Luxon
Библиотека Luxon предоставляет интерфейс для получения сведений, связанных с зоной определенного объекта DateTime. Чтобы использовать его, вам нужно импортировать Zone из библиотеки Luxon.
1 |
import { DateTime, Settings, Info, Zone } from 'luxon'; |
Попробуем использовать Zone на объекте Luxon DateTime. Создайте локальный объект DateTime Luxon.
1 |
let dateObj = DateTime.local(); |
Вы можете использовать интерфейс Zone на dateObj, чтобы получить имя зоны. Добавьте следующий код для регистрации имени зоны.
1 |
console.log('Zone name is ', dateObj.zone.name); |
Сохраните изменения и при запуске приложения вы сможете просмотреть имя зоны, выведенное в консоли браузера.
1 |
Zone name is Asia/Kolkata |
Попробуем напечатать название зоны объекта UTC DateTime.
1 |
let utcObj = DateTime.utc(); |
2 |
console.log('Zone name is ', utcObj.zone.name); |
Вышеприведенный код будет печатать название зоны в формате UTC.
1 |
Zone name is UTC |
Интерфейс Luxon Zone предоставляет метод сравнения двух timezones. Попробуем сравнить timezone объектов DateTime localObj и utcObj.
1 |
if(localObj.zone.equals(utcObj.zone)){ |
2 |
console.log('Both zones are equal'); |
3 |
} else{ |
4 |
console.log('Both zones are different'); |
5 |
}
|
Как видно из приведенного выше кода, вы использовали метод zone.equals для сравнения зон. Сохраните изменения и попробуйте запустить приложение, и вы получите результат.
1 |
Both zones are different |
Интервал в Luxon
Interval в Luxon является оберткой для конечных точек DateTime, с которыми можно манипулировать с использованием методов Luxon. Из официальной документации:
Объект Interval представляет собой полуоткрытый интервал времени, где каждая конечная точка является DateTime. Концептуально это контейнер для этих двух конечных точек, сопровождаемый методами создания, анализа, опроса, сравнения, преобразования и форматирования.
Существует несколько различных способов создания интервала с использованием Luxon. Давайте посмотрим, как создать интервал, используя начальный и конечный объект DateTime.
Импортируем Interval из Luxon в LuxdateComponent.
1 |
import { Interval } from 'luxon'; |
Создайте start объект DateTime и объект end DateTime.
1 |
let startDate = DateTime.local(); |
2 |
let endDate = DateTime.local().plus({minutes : 15}); |
Как видно из приведенного выше кода, вы создали startDate, используя текущее местное время и endDate, увеличив местное время на 15 минут.
Создайте интервал, используя метод fromDateTimes.
1 |
let intv = Interval.fromDateTimes(startDate, endDate); |
2 |
console.log('Interval is ',intv); |
Сохраните приведенные выше изменения и при запуске приложения вы увидите интервал.
Теперь вы можете применить метод Luxon для манипулирования или форматирования времени начала и окончания объекта интервала. Предположим, вы хотите проверить имя зоны начала в интервале. Вы можете сделать это, используя свойство zone.name:
1 |
console.log('Start date zone is ',intv.s.zone.name); |
В консоли браузера будет выполнен следующий вывод:
1 |
Start date zone is Asia/Kolkata
|
Создание продолжительности с помощью Luxon
Luxon предлагает несколько способов создания продолжительности. Чтобы начать работу с созданием продолжительности, вам нужно импортировать Duration в свой LuxdateComponent.
1 |
import { Duration } from 'luxon'; |
После его импорта вы можете использовать метод fromMillis для создания продолжительности, указав миллисекунды.
1 |
let fiveMinute = Duration.fromMillis(5 * 60 * 1000); |
2 |
console.log('Five minutes is ', fiveMinute); |
Сохраните изменения и при запуске приложения вы будете иметь указанную выше длительность fiveMinute.
Вы также можете использовать другой объект DateTime для создания продолжительности с использованием метода fromObject. Вот как выглядит код:
1 |
let startDate = DateTime.local(); |
2 |
let dur = Duration.fromObject(startDate); |
3 |
console.log('Duration from object is ', dur); |
Сохраните изменения, и длительность будете выведена на консоль браузера.
Заключение
В этом уроке вы узнали, как начать работу с библиотекой Luxon для работы с датой и временем в проекте Angular Web. Вы узнали, как справляться с местным временем и временем UTC, а так же как создать интервал и продолжительность с помощью Luxon.
Для подробной информации об использовании библиотеки Luxon я бы рекомендовал прочитать официальную документацию.
Вам понравилось работать с Luxon? Сообщите нам свои мысли в комментариях ниже.
By
