Share
Travailler avec la date et l'heure peut être une tâche déroutante pour les développeurs débutant avec JavaScript. Dans ce tutoriel, vous découvrirez une nouvelle bibliothèque JavaScript appelée Luxon, qui facilite le travail avec la date et l'heure en JavaScript..
Au cours de ce didacticiel, vous découvrirez les différentes fonctionnalités de la bibliothèque Luxon et comment vous en servir dans vos projets d'application Web..
Vous allez créer un projet Angular et voir comment utiliser la bibliothèque Luxon pour la manipulation de la date et de l’heure dans Angular. Commençons par créer une application Web angulaire.
Nouveau AngularLuxon
Une fois le projet créé, accédez au répertoire du projet et créez un nouveau composant appelé luxdate.
ng g luxdate composant
Vous aurez le LuxdateComponent créé et ajouté au module d’application dans le app.module.ts fichier. Supprimer la valeur par défaut AppComponent à partir de l'application en supprimant les fichiers composants du src / app dossier. Voici comment app.module.ts fichier regarde:
importer BrowserModule de '@ angular / platform-browser'; importer NgModule de '@ angular / core'; import LuxdateComponent de './luxdate/luxdate.component'; @NgModule (declarations: [LuxdateComponent], importations: [BrowserModule], fournisseurs: [], bootstrap: [LuxdateComponent]) classe d'exportation AppModule
Modifier le src / index.html fichier pour ajouter le LuxdateComponent.
Enregistrez les modifications ci-dessus et démarrez le serveur.
npm start
L'application sera exécutée à l'adresse http: // localhost: 4200 /.
Importons la bibliothèque Luxon dans votre application.
npm install --save luxon
Une fois Luxon installé dans l’application Angular, importez-le dans le dossier LuxdateComponent composant. Vous êtes maintenant prêt à utiliser la bibliothèque Luxon dans votre projet..
Voyons comment obtenir l'heure locale en utilisant le Luxon bibliothèque. Importation Date et heure de la bibliothèque Luxon.
importer DateTime de 'luxon';
À l'intérieur de LuxdateComponent, définir une variable appelée heure locale.
public localDatetime;
Définir la valeur du heure locale variable comme indiqué:
this.localDatetime = DateTime.local ();
Rendre le heure locale variable dans le luxdate.component.html fichier.
localDatetime
Enregistrez les modifications et l'heure locale sera affichée sur la page Web..
2017-12-31T15: 55: 12.761 + 05: 30
La date et l'heure affichées ci-dessus correspondent à l'heure locale avec le fuseau horaire associé. Vous pouvez formater davantage la date et l'heure pour la rendre plus intuitive.
Formatez la date et l'heure à afficher en utilisant la ligne de code ci-dessous.
this.localDatetime = DateTime.local (). toLocaleString (DateTime.DATETIME_FULL);
Enregistrez la ligne de code ci-dessus et la date et l'heure suivantes seront affichées.
31 décembre 2017 à 22h35 GMT + 17h30
De même, le .UTC méthode dans le Date et heure objet donne l'heure UTC.
Ajouter une nouvelle variable dans le LuxdateComponent définir l'heure UTC.
public utcDatetime;
Définir la valeur du utcDatetime variable en utilisant le Luxon Date / heure objet.
this.utcDatetime = DateTime.utc (). toLocaleString (DateTime.DATETIME_FULL);
Rendre le utcDatetime variable dans le luxdate.component.html fichier comme indiqué:
Bibliothèque Luxon
Heure locale : localDatetimeHeure UTC: utcDatetime
Ajoutez le style CSS suivant au luxdate.component.css fichier.
.conteneur text-align: center; largeur: 100%; .time display: inline-block; .local border: 1px solid # 8c8282; text-align: left; couleur de fond: burlywood; rembourrage: 10px; .utc margin-top: 30px; bordure: solide 1px # 8c8282; text-align: left; couleur de fond: burlywood; rembourrage: 10px; .label font-family: serif; taille de police: 22px; style de police: initiale;
Enregistrez les modifications ci-dessus et vous pourrez afficher l'heure locale et l'heure UTC à l'aide de la bibliothèque Luxon..
Pour afficher l'heure locale et l'heure UTC avec les secondes incluses, vous pouvez utiliser DATETIME_FULL_WITH_SECONDS. Voici à quoi cela ressemblera:
ngOnInit () this.localDatetime = DateTime.local (). toLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS); this.utcDatetime = DateTime.utc (). toLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS);
Enregistrez les modifications pour afficher l'heure locale et l'heure UTC en secondes..
La bibliothèque Luxon fournit une Info classe qui aide à obtenir des informations générales sur la date et l'heure.
Lorsque vous traitez avec la date et l'heure, il est assez courant que vous ayez besoin de la liste des mois de l'année. En utilisant le Info classe, vous pouvez obtenir la liste des mois sous forme de tableau.
Importer le Info classe dans le luxdate.component.ts fichier.
importer DateTime, Info de 'luxon';
Déclarer une variable pour la liste des mois et l'initialiser.
mois publics; constructeur () this.months = [];
Définir la liste des mois à partir du Info classe.
this.months = Info.months ();
Ajoutez le code HTML suivant au luxdate.component.html fichier pour afficher le mois contenu variable.
Mois:
Enregistrez les modifications ci-dessus et vous aurez la liste des mois remplie.
De même, en utilisant le jours de la semaine méthode vous donne une liste des jours de la semaine.
this.weeks = Info.weekdays ();
Enregistrez les modifications et les jours de la semaine seront affichés à l'écran..
Luxon fournit également une option pour obtenir la liste des meridiems en utilisant le meridiems méthode.
this.meridians = Info.meridiems ();
Modifier le code HTML dans le luxdate.component.html pour afficher le semaines et les méridiens.
Enregistrez les modifications et vous pourrez voir les semaines et les méridiens affichés..
Luxon fournit un Réglage classe, à l’aide de laquelle vous pouvez gérer le comportement général de Luxon. Définissons les paramètres régionaux par défaut de Luxon sur el.
Importer le Réglages classe dans le luxdate.component.ts fichier.
importer DateTime, Paramètres, Info de 'luxon';
Dans la méthode constructeur de LuxdateComponent, définissez les paramètres régionaux par défaut comme indiqué:
constructeur () Settings.defaultLocale = 'el';
Enregistrez les modifications et les paramètres régionaux par défaut seront définis sur el.
La bibliothèque Luxon fournit une interface permettant d’obtenir les détails relatifs à la zone d’un Date et heure objet. Pour l'utiliser, vous devez importer Zone de la bibliothèque Luxon.
importer DateTime, Paramètres, Info, Zone de 'luxon';
Essayons d'utiliser Zone sur un Luxon Date et heure objet. Créer un local Date et heure Objet Luxon.
let dateObj = DateTime.local ();
Vous pouvez utiliser le Zone interface sur le dateObj pour obtenir le nom de la zone. Ajoutez le code suivant pour enregistrer le nom de la zone.
Accentsconagua
console.log ('Le nom de la zone est', dateObj.zone.name);Enregistrez les modifications et, lors de l'exécution de l'application, vous pourrez afficher le nom de la zone enregistrée dans la console du navigateur..
Le nom de la zone est Asia / Kolkata
Essayons d'imprimer le nom de zone d'un objet UTC DateTime.
let utcObj = DateTime.utc (); console.log ('Le nom de la zone est', utcObj.zone.name);Le code ci-dessus affichera le nom de la zone en tant que UTC.
Le nom de la zone est UTC
Le luxon Zone l'interface fournit une méthode pour comparer deux fuseaux horaires. Essayons de comparer le fuseau horaire du Date et heure objets localObj et utcObj.
if (localObj.zone.equals (utcObj.zone)) console.log ('Les deux zones sont égales'); else console.log ('Les deux zones sont différentes'); Comme indiqué dans le code ci-dessus, vous avez utilisé le zone.equals méthode pour comparer les zones. Enregistrez les modifications et essayez d'exécuter l'application. Le résultat sera consigné.
Les deux zones sont différentes
Intervalle à Luxon est un wrapper pour deux Date et heure points de terminaison pouvant être manipulés à l’aide des méthodes Luxon. De la documentation officielle:
Un objet Interval représente un intervalle de temps semi-ouvert, où chaque noeud final est un DateTime. Conceptuellement, il s'agit d'un conteneur pour ces deux extrémités, accompagné de méthodes permettant de les créer, les analyser, les interroger, les comparer, les transformer et les formater..
Il existe différentes manières de créer un intervalle avec Luxon. Voyons comment créer un intervalle en utilisant un début et une fin Date et heure objet.
Importation Intervalle de Luxon à LuxdateComponent.
importer intervalle de 'luxon';
Créer un début Date et heure objet et un fin Date et heure objet.
let startDate = DateTime.local (); let endDate = DateTime.local (). plus (minutes: 15);
Comme indiqué dans le code ci-dessus, vous avez créé le date de début en utilisant l'heure locale actuelle et date de fin en incrémentant l'heure locale de 15 minutes.
Créez un intervalle en utilisant le fromDateTimes méthode.
let intv = Interval.fromDateTimes (startDate, endDate); console.log ('Interval is', intv);Enregistrez les modifications ci-dessus et, lors de l'exécution de l'application, l'intervalle sera consigné.
Vous pouvez maintenant appliquer la méthode Luxon pour manipuler ou formater l'heure de début et l'heure de fin dans l'objet interval. Supposons que vous souhaitiez vérifier le nom de zone de l'heure de début dans l'intervalle. Vous pouvez le faire en utilisant le zone.nom propriété comme indiqué:
console.log ('La zone de date de début est', intv.s.zone.name);La sortie suivante sera consignée dans la console du navigateur:
La zone de date de départ est Asia / Kolkata
Luxon propose plusieurs méthodes pour créer une durée. Pour commencer à créer une durée, vous devez importer Durée dans ton LuxdateComponent.
importer durée de 'luxon';
Une fois importé, vous pouvez utiliser le deMillis méthode pour créer une durée en spécifiant les millisecondes.
soit cinq minutes = Durée de Millis (5 * 60 * 1000); console.log ('Cinq minutes est', fiveMinute);Enregistrez les modifications et, lors de l'exécution de l'application, vous aurez ce qui précède Cinq minutes durée enregistrée.
Vous pouvez également utiliser un autre Date et heure objet pour créer une durée en utilisant le fromObject méthode. Voici à quoi ressemble le code:
let startDate = DateTime.local (); let dur = Durée.fromObject (startDate); console.log ('Durée de l'objet is', dur);Enregistrez les modifications et la durée sera enregistrée dans la console du navigateur..
Dans ce didacticiel, vous avez appris comment utiliser la bibliothèque Luxon pour utiliser la date et l'heure dans un projet Web angulaire. Vous avez appris comment gérer l'heure locale et l'heure UTC, et comment créer un intervalle et une durée avec Luxon..
Pour des informations détaillées sur l’utilisation de la bibliothèque Luxon, je vous recommande de lire la documentation officielle..
Comment votre expérience a-t-elle appris à travailler avec Luxon? Faites-nous savoir vos pensées dans les commentaires ci-dessous.
