Usando Luxon para fecha y hora en JavaScript

Trabajar con fecha y hora puede ser una tarea confusa para los desarrolladores que comienzan con JavaScript. En este tutorial, aprenderá acerca de una nueva biblioteca de JavaScript llamada Luxon, que facilita el trabajo con fecha y hora en JavaScript..

A lo largo de este tutorial, aprenderá acerca de las diferentes características de la biblioteca de Luxon y cómo usarla en sus proyectos de aplicaciones web.

Empezando

Estará creando un proyecto Angular y verá cómo usar la biblioteca de Luxon para la manipulación de fecha y hora en Angular. Empecemos creando una aplicación web Angular..

ng nuevo AngularLuxon

Una vez que haya creado el proyecto, vaya al directorio del proyecto y cree un nuevo componente llamado luxdate.

ng g componente luxdate

Tendras el LuxdateComponent creado y agregado al módulo de la aplicación en el app.module.ts expediente. Eliminar el valor predeterminado AppComponent desde la aplicación eliminando los archivos componentes de la src / app carpeta. Aquí es cómo el app.module.ts aspecto del archivo:

importe BrowserModule desde '@ angular / platform-browser'; importe NgModule desde '@ angular / core'; importe LuxdateComponent desde './luxdate/luxdate.component'; @NgModule (declaraciones: [LuxdateComponent], importaciones: [BrowserModule], proveedores: [], bootstrap: [LuxdateComponent]) clase de exportación AppModule  

Modificar el src / index.html archivo para agregar el LuxdateComponent.

Guarda los cambios anteriores e inicia el servidor..

npm start

Tendrá la aplicación ejecutándose en http: // localhost: 4200 /.

Importemos la biblioteca de Luxon en tu aplicación.

npm instalar --save luxon

Una vez que haya instalado Luxon en la aplicación Angular, impórtelo en el LuxdateComponent componente. Ahora está listo para usar la biblioteca de Luxon en su proyecto..

Hora local y hora UTC usando Luxon

Echemos un vistazo a cómo obtener la hora local utilizando el Luxon biblioteca. Importar Fecha y hora de la biblioteca de luxon.

importar DateTime desde 'luxon';

Dentro de LuxdateComponent, definir una variable llamada localDatetime.

público localDatetime;

Establecer el valor de la localDatetime variable como se muestra:

this.localDatetime = DateTime.local ();

Renderizar localDatetime variable en el luxdate.component.html expediente.

 
 
  localDatetime  
 
 
 

Guarde los cambios y tendrá la hora local mostrada en la página web..

2017-12-31T15: 55: 12.761 + 05: 30 

La fecha y la hora que se muestran arriba corresponden a la hora local con la zona horaria adjunta. Puede formatear la fecha y la hora para que sea más intuitivo..

Formatee la fecha y la hora para mostrar usando la siguiente línea de código.

this.localDatetime = DateTime.local (). toLocaleString (DateTime.DATETIME_FULL);

Guarde la línea de código anterior, y tendrá la siguiente fecha y hora mostradas.

31 de diciembre de 2017, 10:35 PM GMT + 5: 30 

Del mismo modo, el .UTC método en el Fecha y hora objeto da la hora UTC. 

Agrega una nueva variable en el LuxdateComponent para establecer la hora UTC.

public utcDatetime;

Establecer el valor de la utcDatetime variable usando el luxon Fecha y hora objeto. 

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

Renderizar utcDatetime variable en el luxdate.component.html archivo como se muestra:

 
Biblioteca de Luxon
 
 
  Hora local :   localDatetime  
 
  Hora UTC:   utcDatetime  
 
 

Agrega el siguiente estilo CSS al luxdate.component.css expediente. 

.contenedor text-align: center; ancho: 100%;  .time display: inline-block;  .local border: 1px solid # 8c8282; alineación de texto: izquierda; color de fondo: burlywood; relleno: 10px;  .utc margin-top: 30px; borde: 1px sólido # 8c8282; alineación de texto: izquierda; color de fondo: burlywood; relleno: 10px;  .label font-family: serif; tamaño de letra: 22px; estilo de fuente: inicial; 

Guarde los cambios anteriores y podrá ver la hora local y la hora UTC utilizando la biblioteca de Luxon.

Para mostrar la hora local y la hora UTC con segundos incluidos, puede usar DATETIME_FULL_WITH_SECONDS. Aquí es cómo se verá:

ngOnInit () this.localDatetime = DateTime.local (). toLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS); this.utcDatetime = DateTime.utc (). toLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS); 

Guarde los cambios y verá la hora local y la hora UTC en segundos..

Información general de fecha y hora usando Luxon

La biblioteca de Luxon proporciona una Información clase que ayuda a obtener información general sobre la fecha y hora.

Cuando se trata de fecha y hora, es bastante común que pueda necesitar la lista de meses en un año. Utilizando la Información clase, puede obtener la lista de meses como una matriz. 

Importar el Información clase en el luxdate.component.ts expediente.

importar DateTime, Info desde 'luxon';

Declara una variable para la lista de meses e inicialízala.

meses públicos constructor () this.months = []; 

Establecer la lista de meses de la Información clase.

this.months = Info.months ();

Agregue el siguiente HTML a la luxdate.component.html archivo para mostrar el meses contenido variable.

  Mes:     mes    

Guarde los cambios anteriores y tendrá la lista de meses completa.

Del mismo modo, utilizando el entre semana El método te da una lista de los días de la semana..

this.weeks = Info.weekdays ();

Guarde los cambios y tendrá los días de la semana en la pantalla..

Luxon también proporciona una opción para obtener la lista de meridiemas utilizando la meridiemas método.

this.meridians = Info.meridiems ();

Modificar el código HTML en el luxdate.component.html para mostrar el semanas y meridianos.

    mes       semana       meridiano    

Guarde los cambios y podrá ver las semanas y los meridianos mostrados..

Manejo de la internacionalización usando Luxon 

Luxon proporciona una Ajuste clase, con la que puede manejar el comportamiento general de Luxon. Vamos a establecer la configuración regional predeterminada de Luxon a el.

Importar el Ajustes clase en el luxdate.component.ts expediente.

importar DateTime, Settings, Info desde 'luxon';

En el método constructor de LuxdateComponent, establecer la configuración regional predeterminada como se muestra:

constructor () Settings.defaultLocale = 'el'; 

Guarde los cambios y tendrá la configuración regional predeterminada establecida en el.

Información de zona usando Luxon

La biblioteca de Luxon proporciona una interfaz para obtener los detalles relacionados con la zona de un determinado Fecha y hora objeto. Para usarlo, necesitas importar Zona de la biblioteca de luxon.

importar DateTime, Settings, Info, Zone desde 'luxon';

Tratemos de usar Zone en un Luxon Fecha y hora objeto. Crear un local Fecha y hora Objeto luxon.

vamos a dateObj = DateTime.local (); 

Puedes usar el Zona interfaz en el dateObj para obtener el nombre de la zona. Agregue el siguiente código para registrar el nombre de la zona.

console.log ('El nombre de la zona es', dateObj.zone.name);

Guarde los cambios y, al ejecutar la aplicación, podrá ver el nombre de la zona registrada en la consola del navegador..

El nombre de la zona es Asia / Kolkata

Intentemos imprimir el nombre de zona de un objeto DateTime UTC.

let utcObj = DateTime.utc (); console.log ('El nombre de la zona es', utcObj.zone.name);

El código anterior imprimirá el nombre de la zona como UTC.

El nombre de la zona es UTC

El luxon Zona interfaz proporciona un método para comparar dos zonas horarias. Tratemos de comparar el zona horaria del Fecha y hora objetos localObj y utcObj.

if (localObj.zone.equals (utcObj.zone)) console.log ('Ambas zonas son iguales');  else console.log ('Ambas zonas son diferentes'); 

Como se ve en el código anterior, ha utilizado el zone.equals Método para comparar las zonas. Guarde los cambios e intente ejecutar la aplicación, y tendrá el resultado registrado.

Ambas zonas son diferentes

Intervalo en luxon

Intervalo en Luxon es una envoltura para dos Fecha y hora puntos finales que pueden ser manipulados usando los métodos de Luxon. De la documentación oficial:

Un objeto de intervalo representa un intervalo de tiempo medio abierto, donde cada punto final es un DateTime. Conceptualmente, es un contenedor para esos dos puntos finales, acompañado de métodos para crearlos, analizarlos, interrogarlos, compararlos, transformarlos y formatearlos..

Hay un par de formas diferentes de crear un intervalo usando Luxon. Veamos cómo crear un intervalo usando un inicio y un final. Fecha y hora objeto.

Importar Intervalo de luxon en LuxdateComponent. 

importar Intervalo desde 'luxon';

Crear un comienzo Fecha y hora objeto y un fin Fecha y hora objeto.

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

Como se ve en el código anterior, creó el fecha de inicio usando la hora local actual y fecha final Incrementando la hora local en 15 minutos..

Crea un intervalo usando el fromDateTimes método.  

let intv = Interval.fromDateTimes (startDate, endDate); console.log ('El intervalo es', intv);

Guarde los cambios anteriores y, al ejecutar la aplicación, tendrá el intervalo registrado.

Ahora puede aplicar el método Luxon para manipular o formatear la hora de inicio y finalización en el objeto de intervalo. Digamos que desea verificar el nombre de la zona de la hora de inicio en el intervalo. Puedes hacerlo usando el nombre.zona propiedad como se muestra:

console.log ('La zona de la fecha de inicio es', intv.s.zone.name);

Tendrá la siguiente salida registrada en la consola del navegador:

Zona de fecha de inicio es Asia / Kolkata

Creación de duración utilizando Luxon

Luxon proporciona un par de métodos para crear duración. Para comenzar a crear la duración, necesita importar Duración en tus LuxdateComponent.

importar Duration desde 'luxon';

Una vez importado, puede utilizar el de Millis Método para crear una duración especificando los milisegundos.

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

Guarde los cambios y, al ejecutar la aplicación, tendrá lo anterior cinco minutos duración registrada.

También puedes usar otro Fecha y hora objeto para crear una duración utilizando el deObjeto método. Así es como se ve el código:

let startDate = DateTime.local (); let dur = Duration.fromObject (startDate); console.log ('La duración del objeto es', dur);

Guarde los cambios y tendrá la duración registrada en la consola del navegador..

Envolviendolo

En este tutorial, vio cómo comenzar a usar la biblioteca de Luxon para trabajar con fecha y hora en un proyecto web Angular. Aprendió cómo lidiar con la hora local y la hora UTC, y cómo crear un intervalo y una duración utilizando Luxon.

Para obtener información detallada sobre el uso de la biblioteca de Luxon, recomendaría leer la documentación oficial.

¿Cómo fue tu experiencia aprendiendo a trabajar con Luxon? Háganos saber sus pensamientos en los comentarios a continuación..