Comment afficher DateTime au format 12 heures AM/PM en JavaScript ?

Comment Afficher Datetime Au Format 12 Heures Am/pm En Javascript



L'affichage de la date et de l'heure au format 12 heures am/pm est relativement pratique à utiliser pour analyser efficacement l'heure. De plus, cette approche réduit la confusion entre le matin et le soir. Par exemple, le « matin après-midi ” définissent tous deux un intervalle de temps spécifique et on peut facilement se rapporter à l'heure, ce qui n'est pas le cas dans le format 24 heures.

Cet article expliquera les méthodes pour afficher la date et l'heure au format 12 heures am/pm en JavaScript.

Comment afficher DateTime au format 12 heures AM/PM en JavaScript ?

Les approches suivantes peuvent être appliquées pour afficher la date et l'heure au format 12 heures am/pm en JavaScript :







  • ' toLocaleString() ' Méthode.
  • ' toLocaleTimeString() ' Méthode.
  • ' En ligne ' Fonction.

Approche 1 : Afficher DateTime au format 12 heures AM/PM en JavaScript à l'aide de la méthode toLocaleString()

La ' toLocaleString() ” La méthode renvoie un objet date sous la forme d'une chaîne. Cette méthode peut être appliquée pour renvoyer l'heure actuelle au format de langue US.



Syntaxe



Date . toLocaleString ( local , choix )

Dans la syntaxe donnée,





  • ' local ” fait référence au format de langue spécifique.
  • ' choix ” indique l'objet auquel les propriétés peuvent être affectées.

Exemple
Tout d'abord, créez un nouvel objet date en utilisant le ' nouvelle date() ” constructeur :

a été temps = Nouveau Date ( ) ;

Maintenant, appliquez le ' toLocaleString() ” méthode ayant le “ NOUS ” format de langue et les valeurs assignées de l'heure comme paramètres. Ici, ' heure12 ” indique que l'heure sera affichée au format 12 heures. Cela entraînera l'affichage de l'heure actuelle au format de l'heure américaine :



console. Journal ( temps. toLocaleString ( 'en nous' , { heure : 'numérique' , minute : 'numérique' , heure12 : vrai } ) ) ;

Production

Approche 2 : Afficher DateTime au format 12 heures AM/PM en JavaScript à l'aide de la méthode toLocaleTimeString()

La ' toLocaleTimeString() ” renvoie l'intervalle de temps d'un objet date sous forme de chaîne. Cette méthode peut être appliquée de la même manière que la méthode toLocaleString() en renvoyant l'heure par défaut par rapport à la date spécifiée.

Exemple
Dans l'exemple suivant, de la même manière, créez un nouvel objet de date en utilisant le ' nouvelle date() ' constructeur et spécifiez la date suivante comme paramètre dans la séquence de ' an ”, “ mois ' et ' journée ' respectivement.

Après cela, appliquez le ' toLocaleTimeString() ” avec le format d'heure spécifié comme paramètre, comme indiqué dans la méthode précédente :

constante dateHeure = Nouveau Date ( 2022 , 1 , 1 ) . toLocaleTimeString ( 'en nous' , {
heure : 'numérique' , minute : 'numérique' , heure12 : vrai
} )

Enfin, affichez l'heure correspondante résultant de l'heure par défaut par rapport à la date spécifiée :

console. Journal ( dateHeure ) ;

Production

Approche 3 : Afficher DateTime au format 12 heures AM/PM en JavaScript à l'aide de la fonction en ligne

Cette approche peut être mise en œuvre pour appliquer un opérateur conditionnel au format am/pm.

L'exemple ci-dessous illustre le concept énoncé.

Exemple

constante dateHeure = ( Date ) => {
laisser des heures = Date. obtenirHeures ( ) ;
laisser minutes = Date. getMinutes ( ) ;
laissez ap = heures >= 12 ? 'pm' : 'un m' ;
heures = heures % 12 ;
heures = heures ? heures : 12 ;
minutes = minutes. toString ( ) . cheminDébut ( deux , '0' ) ;
lâcher priseTemps = heures + ':' + minutes + ' ' + ap ;
revenir mergeTime ;
}
console. Journal ( dateHeure ( Nouveau Date ( 2022 , 1 , 1 ) ) ) ;

Dans le code démontré ci-dessus :

  • Tout d'abord, définissez un ' en ligne 'fonction nommée' dateHeure() ”. Cette fonction prendra un objet date comme paramètre.
  • La ' getHeures() ', à l'étape suivante, renverra l'heure actuelle au format 24 heures dans la fonction.
  • De même, le « getMinutes() ” méthode récupérera les minutes en cours.
  • Après cela, créez une variable nommée ' ap ” et réglez-le sur am ou pm par rapport à la valeur des heures.
  • À l'étape suivante, transformez les heures au format ' 12 heures ' avec l'aide du ' % ” opérateur pour obtenir le reste de la division par 12.
  • Dans le code suivant, appliquez le ' toString() ” pour convertir les minutes calculées en une chaîne et utilisez la méthode “ cheminDébut() ” pour remplir la chaîne convertie avec 0 s'il ne s'agit que d'un chiffre.
  • Enfin, fusionnez l'heure calculée en ajoutant respectivement les heures calculées, les minutes et le format (am/pm) et affichez-la :

Production

Nous avons conclu les approches qui peuvent être utilisées pour afficher la date et l'heure au format 12 heures am/pm en JavaScript.

Conclusion

La ' toLocaleString() » méthode, la « toLocaleTimeString() » ou la méthode « En ligne ” peut être implémentée pour afficher la date et l'heure au format 12 heures am/pm en JavaScript. La première méthode peut être choisie pour afficher l'heure actuelle dans le format d'heure spécifique, la méthode toLocaleTimeString() peut être appliquée pour renvoyer l'heure par défaut par rapport à la date spécifiée dans le format d'heure particulier et la fonction Inline peut être implémentée pour appliquer un opérateur conditionnel au format am/pm. Cet article a compilé les approches pour afficher la date et l'heure au format 12 heures am/pm en JavaScript.