Paano Ipakita ang DateTime sa 12 Oras na AM/PM na Format sa JavaScript?

Paano Ipakita Ang Datetime Sa 12 Oras Na Am/pm Na Format Sa Javascript



Ang pagpapakita ng datetime sa 12 oras na am/pm na format ay medyo maginhawang gamitin para sa mabisang pagsusuri sa oras. Bukod dito, binabawasan ng diskarteng ito ang pagkalito sa pagitan ng umaga at gabi. Halimbawa, ang ' am/pm ” parehong tumutukoy sa ilang partikular na agwat ng oras at madaling maiugnay ang isa sa oras na hindi ang kaso sa 24 na oras na format.

Ipapaliwanag ng write-up na ito ang mga paraan upang ipakita ang datetime sa format na 12 oras am/pm sa JavaScript.

Paano Ipakita ang DateTime sa Format ng 12 Oras AM/PM sa JavaScript?

Maaaring ilapat ang mga sumusunod na diskarte upang ipakita ang oras ng petsa sa format na 12 oras ng umaga/gabi sa JavaScript:







  • toLocaleString() ” Pamamaraan.
  • toLocaleTimeString() ” Pamamaraan.
  • Nasa linya ” Pag-andar.

Diskarte 1: Display DateTime sa Format na 12 Oras AM/PM sa JavaScript Gamit ang Paraang toLocaleString()

Ang ' toLocaleString() Ang paraan ng ” ay nagbabalik ng isang object ng petsa sa anyo ng isang string. Maaaring ilapat ang paraang ito upang ibalik ang kasalukuyang oras sa format ng wikang US.



Syntax



Petsa . saLocaleString ( lokal , mga pagpipilian )

Sa ibinigay na syntax,





  • lokal ” ay tumutukoy sa tiyak na format ng wika.
  • mga pagpipilian ” ay nagpapahiwatig ng bagay kung saan maaaring italaga ang mga katangian.

Halimbawa
Una, lumikha ng bagong object ng petsa gamit ang “ bagong Petsa() ” constructor:

ay oras = bago Petsa ( ) ;

Ngayon, ilapat ang ' toLocaleString() 'paraan na may ' US ” format ng wika at ang mga itinalagang halaga ng oras bilang mga parameter nito. Dito,' oras12 ” ay nagpapahiwatig na ang oras ay ipapakita sa 12-oras na format. Magreresulta ito sa pagpapakita ng kasalukuyang oras sa format ng oras ng US:



console. log ( oras. saLocaleString ( 'sa-US' , { oras : 'numero' , minuto : 'numero' , oras12 : totoo } ) ) ;

Output

Approach 2: Display DateTime sa Format na 12 Hour AM/PM sa JavaScript Gamit ang toLocaleTimeString() Method

Ang ' toLocaleTimeString() Ibinabalik ng paraan ng ” ang tagal ng oras ng isang object ng petsa bilang isang string. Ang pamamaraang ito ay maaaring ilapat nang katulad sa toLocaleString() na paraan sa pamamagitan ng pagbabalik ng default na oras laban sa tinukoy na petsa.

Halimbawa
Sa sumusunod na halimbawa, gayundin, lumikha ng bagong object ng petsa gamit ang ' bagong Petsa() ' constructor at tukuyin ang sumusunod na petsa bilang parameter nito sa pagkakasunud-sunod ng ' taon ”, “ buwan 'at' araw ” ayon sa pagkakabanggit.

Pagkatapos nito, ilapat ang ' toLocaleTimeString() ” na pamamaraan na may tinukoy na format ng oras bilang parameter nito gaya ng tinalakay sa nakaraang pamamaraan:

const dateTime = bago Petsa ( 2022 , 1 , 1 ) . saLocaleTimeString ( 'sa-US' , {
oras : 'numero' , minuto : 'numero' , oras12 : totoo
} )

Panghuli, ipakita ang kaukulang oras na nagreresulta sa default na oras na may kinalaman sa tinukoy na petsa:

console. log ( dateTime ) ;

Output

Diskarte 3: Display DateTime sa Format na 12 Oras AM/PM sa JavaScript Gamit ang Inline na Function

Maaaring ipatupad ang diskarteng ito upang maglapat ng conditional operator sa am/pm na format.

Ang ibinigay na halimbawa sa ibaba ay naglalarawan ng nakasaad na konsepto.

Halimbawa

const dateTime = ( petsa ) => {
hayaan ang mga oras = petsa. getHours ( ) ;
hayaan ang mga minuto = petsa. getMinutes ( ) ;
hayaan ang ap = oras >= 12 ? 'pm' : 'am' ;
oras = oras % 12 ;
oras = oras ? oras : 12 ;
minuto = minuto. toString ( ) . pathStart ( dalawa , '0' ) ;
let goTime = oras + ':' + minuto + '' + ap ;
bumalik mergeTime ;
}
console. log ( dateTime ( bago Petsa ( 2022 , 1 , 1 ) ) ) ;

Sa ipinakitang code sa itaas:

  • Una, tukuyin ang isang ' nasa linya 'function na pinangalanang' dateTime() ”. Ang function na ito ay kukuha ng date object bilang parameter nito.
  • Ang ' getHours() ” paraan, sa susunod na hakbang, ay ibabalik ang kasalukuyang oras sa 24 na oras na format sa function.
  • Katulad nito, ang ' getMinutes() ” paraan ay kukunin ang kasalukuyang minuto.
  • Pagkatapos nito, lumikha ng isang variable na pinangalanang ' ap ” at ayusin ito sa am o pm na may paggalang sa halaga ng mga oras.
  • Sa susunod na hakbang, ibahin ang mga oras sa format na ' 12-oras 'sa tulong ng' % ” operator para makuha ang natitira sa dibisyon ng 12.
  • Sa karagdagang code, ilapat ang ' toString() 'paraan para i-convert ang nakalkulang minuto sa isang string, at gamitin ang ' pathStart() ” paraan para i-pad ng 0 ang na-convert na string kung isang digit lang ito.
  • Panghuli, pagsamahin ang nakalkulang oras sa pamamagitan ng pagdaragdag ng nakalkulang oras, minuto, at format(am/pm) ayon sa pagkakabanggit at ipakita ito:

Output

Natapos na namin ang mga diskarte na maaaring magamit upang ipakita ang datetime sa 12 oras na format ng am/pm sa JavaScript.

Konklusyon

Ang ' toLocaleString() 'paraan, ang' toLocaleTimeString() 'paraan o ang' Nasa linya ” function ay maaaring ipatupad upang ipakita ang datetime sa 12 oras na am/pm na format sa JavaScript. Ang unang paraan ay maaaring piliin upang ipakita ang kasalukuyang oras sa partikular na format ng oras, ang toLocaleTimeString() na paraan ay maaaring ilapat upang ibalik ang default na oras na may paggalang sa tinukoy na petsa sa partikular na format ng oras at ang Inline na function ay maaaring ipatupad upang mailapat. isang conditional operator sa am/pm na format. Ang write-up na ito ay pinagsama-sama ang mga diskarte upang ipakita ang datetime sa format na 12 oras am/pm sa JavaScript.