在JavaScript中使用Luxon获取日期和时间

对于从javascript开始的开发人员来说，处理日期和时间可能是一项令人困惑的任务。在本教程中，您将了解一个名为 Luxon 的新 JavaScript 库，它使在 javaScript 中处理日期和时间变得轻而易举。

在本教程的整个过程中，您将了解 Luxon 库的不同功能以及如何在您的 Web 应用程序项目中使用它。

入门

您将创建一个angular 项目，并将了解如何使用 Luxon 库在 Angular 中进行日期和时间操作。让咱们从创建一个 Angular Web 应用程序开始。

ng new AngularLuxon

创建项目后，导航到项目目录并创建一个名为luxdate.

ng g component luxdate

您将 LuxdateComponent创建并添加到 app.module.ts文件中的应用程序模块。AppComponent通过从文件夹中删除组件文件来从应用程序中删除默认设置src/app。这是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 应用程序中安装 Luxon 后，将其导入 LuxdateComponent组件中。现在您可以在项目中使用 Luxon 库了。

使用 Luxon 的本地时间和 UTC 时间

让咱们看看如何使用该Luxon库获取本地时间。DateTime从 Luxon 库导入。

import { DateTime } from 'luxon';

在内部LuxdateComponent，定义一个名为的变量 localDatetime。

public localDatetime;

设置localDatetime变量的值，如下所示：

this.localDatetime = DateTime.local();

渲染文件localDatetime中的变量luxdate.component.html。

<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

类似地，对象.utc中的方法DateTime给出了 UTC 时间。

在中添加一个新变量LuxdateComponent来设置 UTC 时间。

public utcDatetime;

utcDatetime使用 LuxonDatetime对象设置变量的值。

this.utcDatetime = DateTime.utc().toLocaleString(DateTime.DATETIME_FULL);

渲染文件中的utcDatetime变量，luxdate.component.html如下所示：

<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 时间。

在JavaScript中使用Luxon获取日期和时间第1张

为了显示包含秒数的本地时间和 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 时间将显示为秒。

在JavaScript中使用Luxon获取日期和时间第2张

使用 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>

保存上述更改，您将填充月份列表。

在JavaScript中使用Luxon获取日期和时间第3张

同样，使用该weekdays方法可以为您提供工作日列表。

this.weeks = Info.weekdays();

保存更改，您将在屏幕上列出工作日。

Luxon 还提供了一个选项来获取 meridiems 使用该 meridiems方法的列表。

this.meridians = Info.meridiems();

修改中的 HTML 代码luxdate.component.html以显示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>

保存更改，您将能够查看显示的周数和经络。

在JavaScript中使用Luxon获取日期和时间第4张

使用 Luxon 处理国际化

Luxon 提供了一个Setting类，您可以使用它来处理 Luxon 的整体行为。让咱们将 Luxon 的默认语言环境设置为el.

导入文件Settings中的类luxdate.component.ts。

import { DateTime, Settings, Info } from 'luxon';

在的构造方法中LuxdateComponent，设置默认语言环境，如下图：

constructor() {
    Settings.defaultLocale = 'el';
}

保存更改，您会将默认语言环境设置为el.

在JavaScript中使用Luxon获取日期和时间第5张

使用 Luxon 的区域信息

Luxon 库提供了一个接口来获取与特定DateTime对象的区域相关的详细信息。要使用它，您需要Zone从 Luxon 库中导入。

import { DateTime, Settings, Info, Zone } from 'luxon';

让咱们尝试在 LuxonDateTime对象上使用 Zone。创建一个本地DateTimeLuxon 对象。

let dateObj = DateTime.local();

您可以使用上的Zone界面dateObj来获取区域名称。添加以下代码以记录区域名称。

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

LuxonZone接口提供了一种比较两个timezones. 让咱们尝试比较对象timezone的和。DateTimelocalObjutcObj

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 间隔

Intervalin Luxon 是两个 DateTime端点的包装器，可以使用 Luxon 方法进行操作。来自官方文档：

一个 Interval 对象表示一个半开的时间间隔，其中每个端点都是一个 DateTime。从概念上讲，它是这两个端点的容器，伴随着创建、解析、询问、比较、转换和格式化它们的方法。

有几种不同的方法可以使用 Luxon 创建间隔。让咱们看看如何使用开始和结束 DateTime对象创建间隔。

Interval从 Luxon导入LuxdateComponent。

import { Interval } from 'luxon';

创建一个start DateTime对象和一个end DateTime对象。

let startDate = DateTime.local();
let endDate = DateTime.local().plus({minutes : 15});

如上面的代码所示，您startDate使用当前本地时间并将endDate本地时间增加 15 分钟来创建。

fromDateTimes使用该方法创建一个区间。

let intv = Interval.fromDateTimes(startDate, endDate);
console.log('Interval is ',intv);

保存上述更改，在运行应用程序时，您将记录时间间隔。

在JavaScript中使用Luxon获取日期和时间第6张

现在您可以应用 Luxon 方法来操作或格式化间隔对象中的开始和结束时间。假设您要检查间隔中开始时间的区域名称。您可以使用zone.name如下所示的属性来执行此操作：

console.log('Start date zone is ',intv.s.zone.name);

您将在浏览器控制台中记录以下输出：

Start date zone is  Asia/Kolkata

使用 Luxon 创建持续时间

Luxon 提供了几种创建持续时间的方法。要开始创建持续时间，您需要Duration导入LuxdateComponent.

import { Duration } from 'luxon';

导入后，您可以使用该 fromMillis方法通过指定毫秒来创建持续时间。

let fiveMinute = Duration.fromMillis(5 * 60 * 1000);
console.log('Five minutes is ', fiveMinute);

保存更改，并在运行应用程序时，您将fiveMinute记录上述持续时间。

在JavaScript中使用Luxon获取日期和时间第7张

您还可以DateTime使用该方法使用另一个对象来创建持续时间fromObject。以下是代码的外观：

let startDate = DateTime.local();
let dur = Duration.fromObject(startDate);
console.log('Duration from object is ', dur);

保存更改，您将在浏览器控制台中记录持续时间。

在JavaScript中使用Luxon获取日期和时间第8张

最后

在本教程中，您了解了如何开始使用 Luxon 库在 Angular Web 项目中处理日期和时间。您学习了如何处理本地时间和 UTC 时间，以及如何使用 Luxon 创建间隔和持续时间。

文章目录

入门

使用 Luxon 的本地时间和 UTC 时间

使用 Luxon 的一般日期和时间信息

使用 Luxon 处理国际化

使用 Luxon 的区域信息

Luxon 间隔

使用 Luxon 创建持续时间

最后

入门

使用 Luxon 的本地时间和 UTC 时间

使用 Luxon 的一般日期和时间信息

使用 Luxon 处理国际化

使用 Luxon 的区域信息

Luxon 间隔

使用 Luxon 创建持续时间

最后

相关推荐

最新文章 | 热门文章 | 随机文章