对于以JavaScript开头的开发人员来说，使用日期和时间可能是一项令人困惑的任务。 在本教程中，您将学习一个名为Luxon的新JavaScript库，它使在JavaScript中使用日期和时间变得轻而易举。
在本教程的整个过程中，您将学习Luxon库的不同功能以及如何在Web应用程序项目中使用它。
入门
您将创建一个Angular项目，并将了解如何使用Luxon库在Angular中进行日期和时间操作。 让我们开始创建一个Angular Web应用程序。
ng new AngularLuxon 创建项目后，导航到项目目录并创建一个名为luxdate的新组件。
ng g component luxdate 您将创建LuxdateComponent并将其添加到app.module.ts文件中的应用程序模块中。 通过从src/app文件夹中删除组件文件，从应用程序中删除默认的AppComponent 。 这是app.module.ts文件的外观：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LuxdateComponent } from './luxdate/luxdate.component';
@NgModule({
declarations: [
LuxdateComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [LuxdateComponent]
})
export class AppModule { } 修改src/index.html文件以添加LuxdateComponent 。
<body>
<app-luxdate></app-luxdate>
</body>保存以上更改并启动服务器。
npm start您将在http：// localhost：4200 /上运行该应用程序。
让我们将Luxon库导入到您的应用程序中。
npm install --save luxon 在Angular应用程序中安装了LuxdateComponent ，将其导入LuxdateComponent组件中。 现在，您可以在项目中使用Luxon库了。
使用卢森堡的当地时间和UTC时间
让我们看一下如何使用Luxon库获取本地时间。 从Luxon库中导入DateTime 。
import { DateTime } from 'luxon'; 在LuxdateComponent内部，定义一个名为localDatetime的变量。
public localDatetime; 设置localDatetime变量的值，如下所示：
this.localDatetime = DateTime.local(); 渲染luxdate.component.html文件中的localDatetime变量。
<div class="container">
<div>
<div class="local">
<span>
{{localDatetime}}
</span>
</div>
</div>
</div>保存更改，您将在网页上显示本地时间。
2017-12-31T15:55:12.761+05:30上面显示的日期和时间是带有时区的本地时间。 您可以进一步格式化日期和时间，使其更加直观。
使用以下代码行格式化日期和时间以显示。
this.localDatetime = DateTime.local().toLocaleString(DateTime.DATETIME_FULL);保存上面的代码行，您将显示以下日期和时间。
December 31, 2017, 10:35 PM GMT+5:30 同样， DateTime对象中的.utc方法提供UTC时间。
在LuxdateComponent添加新变量以设置UTC时间。
public utcDatetime; 使用Luxon Datetime对象设置utcDatetime变量的值。
this.utcDatetime = DateTime.utc().toLocaleString(DateTime.DATETIME_FULL); 渲染luxdate.component.html文件中的utcDatetime变量，如下所示：
<div class="container">
<h2>Luxon Library</h2>
<div class="time">
<div class="local">
<span class="label">
Local time :
</span>
<span>
{{localDatetime}}
</span>
</div>
<div class="utc">
<span class="label">
UTC time :
</span>
<span>
{{utcDatetime}}
</span>
</div>
</div>
</div> 将以下CSS样式添加到luxdate.component.css文件。
.container{
text-align: center;
width: 100%;
}
.time{
display: inline-block;
}
.local{
border: 1px solid #8c8282;
text-align: left;
background-color: burlywood;
padding: 10px;
}
.utc{
margin-top: 30px;
border: 1px solid #8c8282;
text-align: left;
background-color: burlywood;
padding: 10px;
}
.label{
font-family: serif;
font-size: 22px;
font-style: initial;
}保存以上更改，您将可以使用Luxon库查看本地时间和UTC时间。
为了显示包括秒在内的本地时间和UTC时间，您可以使用DATETIME_FULL_WITH_SECONDS 。 外观如下：
ngOnInit() {
this.localDatetime = DateTime.local().toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS);
this.utcDatetime = DateTime.utc().toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS);
}保存更改，您将以秒为单位显示本地时间和UTC时间。
使用Luxon的一般日期和时间信息
Luxon库提供一个Info类，该类有助于获取有关日期和时间的一些常规信息。
在处理日期和时间时，通常可能需要一年中的月份列表。 使用Info类，您可以将月份列表作为数组获取。
将Info类导入luxdate.component.ts文件。
import { DateTime, Info } from 'luxon';为月份列表声明一个变量并对其进行初始化。
public months;
constructor() {
this.months = [];
} 从Info类中设置月份列表。
this.months = Info.months(); 将以下HTML添加到luxdate.component.html文件中，以显示months变量内容。
<div class="month">
<span class="label">
Month :
</span>
<span>
<select>
<option *ngFor="let month of months; let i = index">
{{month}}
</option>
</select>
</span>
</div>保存以上更改，您将填充月份列表。
同样，使用weekdays方法可以为您提供工作日列表。
this.weeks = Info.weekdays();保存更改，您将在屏幕上列出工作日。
Luxon还提供了一种使用meridiems方法获取meridiems列表的选项。
this.meridians = Info.meridiems(); 修改luxdate.component.htmlHTML代码以显示weeks和meridians 。
<div class="month">
<span>
<select>
<option *ngFor="let month of months; let i = index">
{{month}}
</option>
</select>
</span>
<span>
<select>
<option *ngFor="let week of weeks; let i = index">
{{week}}
</option>
</select>
</span>
<span>
<select>
<option *ngFor="let meridian of meridians; let i = index">
{{meridian}}
</option>
</select>
</span>
</div>保存更改，您将可以查看显示的星期和经络。
使用Luxon处理国际化
Luxon提供了一个Setting类，您可以使用该类来处理Luxon的整体行为。 让我们将Luxon的默认语言环境设置设置为el 。
将Settings类导入luxdate.component.ts文件。
import { DateTime, Settings, Info } from 'luxon'; 在LuxdateComponent的构造方法中，设置默认语言环境，如下所示：
constructor() {
Settings.defaultLocale = 'el';
} 保存更改，您将默认语言环境设置为el 。
使用Luxon的区域信息
Luxon库提供了一个接口，以获取与特定DateTime对象的区域相关的详细信息。 要使用它，您需要从Luxon库中导入Zone 。
import { DateTime, Settings, Info, Zone } from 'luxon'; 让我们尝试在Luxon DateTime对象上使用Zone。 创建一个本地DateTime Luxon对象。
let dateObj = DateTime.local(); 您可以使用dateObj上的Zone界面来获取区域名称。 添加以下代码以记录区域名称。
console.log('Zone name is ', dateObj.zone.name);保存更改，并在运行应用程序时，您将能够查看在浏览器控制台中记录的区域名称。
Zone name is Asia/Kolkata让我们尝试打印UTC DateTime对象的区域名称。
let utcObj = DateTime.utc();
console.log('Zone name is ', utcObj.zone.name); 上面的代码会将区域名称打印为UTC 。
Zone name is UTC Luxon Zone界面提供了一种比较两个timezones的方法。 让我们尝试比较DateTime对象localObj和utcObj的timezone 。
if(localObj.zone.equals(utcObj.zone)){
console.log('Both zones are equal');
} else{
console.log('Both zones are different');
} 如上面的代码所示，您已使用zone.equals方法比较区域。 保存更改并尝试运行该应用程序，您将记录结果。
Both zones are different卢森堡区间
Luxon中的Interval是两个DateTime端点的包装，可以使用Luxon方法对其进行操作。 从官方文档中：
一个Interval对象代表一个半开的时间间隔，其中每个端点都是一个DateTime 。 从概念上讲，它是这两个端点的容器，并附带创建，解析，询问，比较，转换和格式化它们的方法。
使用Luxon创建间隔的方法有两种。 让我们看看如何使用开始和结束DateTime对象创建间隔。
在LuxdateComponent从Luxon导入Interval 。
import { Interval } from 'luxon'; 创建一个start DateTime对象和一个end DateTime对象。
let startDate = DateTime.local();
let endDate = DateTime.local().plus({minutes : 15}); 如上面的代码所示，您使用当前本地时间创建了startDate ，并通过将本地时间增加15分钟来创建了endDate 。
使用fromDateTimes方法创建一个间隔。
let intv = Interval.fromDateTimes(startDate, endDate);
console.log('Interval is ',intv);保存以上更改，并在运行应用程序时记录间隔。
现在，您可以应用Luxon方法来操作或设置时间间隔对象中的开始时间和结束时间。 假设您要检查间隔中开始时间的区域名称。 您可以通过使用zone.name属性来执行此zone.name ，如下所示：
console.log('Start date zone is ',intv.s.zone.name);您将在浏览器控制台中记录以下输出：
Start date zone is Asia/Kolkata使用Luxon创建持续时间
Luxon提供了两种创建持续时间的方法。 要开始创建工期，您需要在LuxdateComponent导入Duration 。
import { Duration } from 'luxon'; 导入后，您可以使用fromMillis方法通过指定毫秒来创建持续时间。
let fiveMinute = Duration.fromMillis(5 * 60 * 1000);
console.log('Five minutes is ', fiveMinute); 保存更改，然后在运行应用程序时，将记录以上5 fiveMinute持续时间。
您也可以使用另一个DateTime对象使用fromObject方法创建持续时间。 代码如下：
let startDate = DateTime.local();
let dur = Duration.fromObject(startDate);
console.log('Duration from object is ', dur);保存更改，您将在浏览器控制台中记录持续时间。
包起来
在本教程中，您了解了如何开始使用Luxon库在Angular Web项目中使用日期和时间。 您学习了如何处理本地时间和UTC时间，以及如何使用Luxon创建间隔和持续时间。
有关使用Luxon库的深入信息，我建议阅读官方文档 。
您如何学习与Luxon合作的经验？ 请在下面的评论中告诉我们您的想法。
翻译自: https://code.tutsplus.com/tutorials/using-luxon-for-date-and-time-in-javascript--cms-30258
扫一扫
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
