Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)
Trabajar con fecha y hora puede ser una tarea confusa para desarrolladores comenzando con JavaScript. En este tutorial, aprenderás sobre una nueva librería JavaScript llamada Luxon, la cuál hace muy sencillo trabajar con fecha y hora en JavaScript.
A lo largo del curso de este tutorial, aprenderás sobre las diferentes características de la librería Luxon y cómo usarla en tus proyectos de aplicación web.
Comenzando
Estarás creando un proyecto Angular y verás cómo usar la librería Luxon para manipulación de fecha y hora en Angular. Comencemos creando una aplicación web Angular.
1 |
ng new AngularLuxon |
Una vez que tienes el proyecto creado, navega al directorio de proyecto y crea un nuevo componente llamado luxdate.
1 |
ng g component luxdate |
Tendrás el LuxdateComponent creado y agregado al módulo de aplicación en el archivo app.module.ts. Remueve el AppComponent por defecto de la aplicación borrando los archivos de componente de la carpeta src/app. Aquí está cómo luce el archivo 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 { } |
Modifica el archivo src/index.html y agrega el LuxdateComponent.
1 |
<body>
|
2 |
<app-luxdate></app-luxdate>
|
3 |
</body>
|
Guarda los cambios e inicia el servidor.
1 |
npm start |
Tendrás la aplicación ejecutándose en http://localhost:4200/.
Importemos la librería Luxon a tu aplicación.
1 |
npm install --save luxon |
Una vez que tienes Luxon instalado en la aplicación Angular, impórtalo en el componente LuxdateComponent. Ahora estás listo para usar la librería Luxon en tu proyecto.
Tiempo Local y Tiempo UTC Usando Luxon
Echemos un vistazo a cómo obtener la hora local usando la librería Luxon. Importa DateTime desde la librería Luxon.
1 |
import { DateTime } from 'luxon'; |
Dentro de LuxdateComponent, define una variable llamada localDatetime.
1 |
public localDatetime; |
Establece el valor de la variable localDatetime como se muestra:
1 |
this.localDatetime = DateTime.local(); |
Genera la variable localDatetime en el archivo 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>
|
Guarda los cambios y la hora local se mostrará en la página web.
1 |
2017-12-31T15:55:12.761+05:30 |
La fecha y hora mostrada arriba es la hora local con la zona horaria adjunta. Puedes formatear la fecha y hora para hacerla más intuitiva.
Formatea la fecha y hora para mostrar usando la línea de código de abajo.
1 |
this.localDatetime = DateTime.local().toLocaleString(DateTime.DATETIME_FULL); |
Guarda la línea de código de arriba y tendrás la siguiente fecha y hora mostrados.
1 |
December 31, 2017, 10:35 PM GMT+5:30 |
De manera similar, el método .utc en el objeto DateTime da la hora UTC.
Agrega una nueva variable en el LuxdateComponent para establecer la hora UTC.
1 |
public utcDatetime; |
Establece el valor de la variable utcDatetime usando el objeto Datetime de Luxon.
1 |
this.utcDatetime = DateTime.utc().toLocaleString(DateTime.DATETIME_FULL); |
Genera la variable utcDatetime en el archivo luxdate.component.html como se muestra.
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>
|
Agrega el siguiente estilo CSS al archivo 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 |
}
|
Guarda los cambios de arriba y podrás ver la hora local y el horario UTC usando la librería Luxon.
Para poder mostrar la hora local y UTC con segundos incluídos, puedes usar DATETIME_FULL_WITH_SECONDS. Aquí está como lucirá:
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 |
}
|
Guarda los cambios, y se mostrará la hora local y UTC con segundos.
Información General de Fecha y Hora Usando Luxon
La librería Luxon proporciona una clase Info la cual ayuda a obtener alguna información general a relación a fecha y hora.
Cuando lidiamos con fecha y hora, es bastante común que puedas necesitar la lista de meses en un año. Usando la clase Info puedes obtener la lista de los meses como un arreglo.
Importa la clase Info en el archivo luxdate.component.ts.
1 |
import { DateTime, Info } from 'luxon'; |
Declara una variable para la lista de meses e inicializala.
1 |
public months; |
2 |
|
3 |
constructor() { |
4 |
this.months = []; |
5 |
}
|
Establece la lista de mes usando la clase Info.
1 |
this.months = Info.months(); |
Agrega el siguiente HTML al archivo luxdate.component.html para mostrar el contenido de la variable 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>
|
Guarda los cambios de arriba, y tendrás poblada la lista de mes.
De manera similar, usar el método weekdays te da una lista de los días de la semana.
1 |
this.weeks = Info.weekdays(); |
Guarda los cambios, y tendrás los días de la semana listados en pantalla.
Luxon también proporciona una opción para obtener la lista de meridianos usando el método meridiems.
1 |
this.meridians = Info.meridiems(); |
Modifica el código HTML en el luxdate.component.html para mostrar las semanas y meridianos.
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>
|
Guarda los cambios, y podrás ver las semanas y meridianos mostrados.
Manejando Internacionalización Usando Luxon
Luxon proporciona una clase Setting, la cual puede manejar el comportamiento general de Luxon. Establezcamos el valor local por defecto de Luxon a el.
Importa la clase Settings en el archivo luxdate.component.ts.
1 |
import { DateTime, Settings, Info } from 'luxon'; |
En el método constructor de LuxdateComponent, establece el local por defecto como se muestra:
1 |
constructor() { |
2 |
Settings.defaultLocale = 'el'; |
3 |
}
|
Guarda los cambios, y tendrás el local por defecto establecido a el.
Información de Zona Usando Luxon
La librería Luxon proporciona una interfaz para obtener los detalles relacionados a la zona de un objeto DateTime particular. Para usarlo, necesitas importar Zone desde la librería Luxon.
1 |
import { DateTime, Settings, Info, Zone } from 'luxon'; |
Intentemos usar Zone en un objeto Luxon DateTime. Crea un objeto Luxon DateTime local.
1 |
let dateObj = DateTime.local(); |
Puedes usar la interfaz Zone en el dateObj para obtener el nombre de zona. Agrega el siguiente código para registrar el nombre de zona.
1 |
console.log('Zone name is ', dateObj.zone.name); |
Guarda los cambios, y ejecutándo la aplicación, podrás ver el nombre de la zona registrado en la consola del navegador.
1 |
Zone name is Asia/Kolkata |
Intentemos imprimir el nombre de la zona de un objeto DateTime UTC.
1 |
let utcObj = DateTime.utc(); |
2 |
console.log('Zone name is ', utcObj.zone.name); |
El código de arriba imprimirá el nombre de la zona como UTC.
1 |
Zone name is UTC |
La interfaz Luxon Zone proporciona un método para comparar dos zonas horarias. Intentemos comparar la timezone de los objetos DateTime localObj y 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 |
}
|
Como se vio en el código de arriba, has usado el método zone.equals para comparar las zonas. Guarda los cambios e intenta ejecutar la aplicación, y tendrás el resultado registrado.
1 |
Both zones are different |
Intervalo En Luxon
Interval en Luxon es un envoltorio para dos puntos finales DateTime los cuales pueden ser manipulados usando los métodos Luxon. Desde la documentación oficial:
Un objeto Interval representa un intervalo medio abierto de tiempo, en donde cada punto final es un DateTime. De manera conceptual, es un contenedor para esos dos puntos finales, acompañados de métodos para crear, parsear, interrogar, comparar, transformar, y formatearlos.
Hay un par de maneras diferentes de crear un intervalo usando Luxon. Veamos cómo crear un intervalo usando objeto DateTime de inicio y fin.
Importa Interval desde Luxon en LuxdateComponent.
1 |
import { Interval } from 'luxon'; |
Crea un objeto start DateTime y un objeto end DateTime.
1 |
let startDate = DateTime.local(); |
2 |
let endDate = DateTime.local().plus({minutes : 15}); |
Como se vio en el código de arriba, creaste el startDate usando la hora local actual y endDate incrementando la hora local 15 minutos.
Crea un intervalo usando el método fromDateTimes.
1 |
let intv = Interval.fromDateTimes(startDate, endDate); |
2 |
console.log('Interval is ',intv); |
Guarda los cambios de arriba, y al ejecutar la aplicación, tendrás el intervalo registrado.
Ahora puedes aplicar el método Luxon para manipular o formatear el tiempo de inicio y fin en el objeto de intervalo. Digamos que quieres revisar el nombre de la zona en el intervalo. Puedes hacerlo usando la propiedad zone.name como se muestra:
1 |
console.log('Start date zone is ',intv.s.zone.name); |
Tendrás la siguiente salida registrada en la consola del navegador:
1 |
Start date zone is Asia/Kolkata
|
Creando Duración Usando Luxon
Luxon proporciona un par de métodos para crear duración. Para comenzar con crear duración, necesitas importar Duration en tu LuxdateComponent.
1 |
import { Duration } from 'luxon'; |
Una vez que es importado, puedes usar el método fromMillis para crear una duración especificando los milisegundos.
1 |
let fiveMinute = Duration.fromMillis(5 * 60 * 1000); |
2 |
console.log('Five minutes is ', fiveMinute); |
Guarda los cambios, y al ejecutar la aplicación, tendrás la duración fiveMinute de arriba registrada.
También puedes usar otro objeto DateTime para crear una duración usando el método fromObject. Aquí está cómo luce el código:
1 |
let startDate = DateTime.local(); |
2 |
let dur = Duration.fromObject(startDate); |
3 |
console.log('Duration from object is ', dur); |
Guarda los cambios, y tendrás la duración registrada en la consola del navegador.
Terminando
En este tutorial, viste cómo comenzar con el uso de la librería Luxon para trabajar con fecha y hora en un proyecto web Angular. Aprendiste cómo lidiar con hora local y UTC, y cómo crear un intervalo u duración usando Luxon.
Para información a fondo sobre usar la librería Luxon, recomendaría leer la documentación oficial.
¿Cómo fue tu experiencia aprendiendo a trabajar con Luxon? Déjanos saber tus ideas en los comentarios de abajo.
By
