Kapag kinakailangan ng mga user na maglagay ng petsa, itatakda ng mga developer ang paunang natukoy/default na halaga ng petsa ng uri ng pag-input sa kasalukuyan/araw na petsa. Ngayon, hindi na kailangang manu-manong ipasok ng user ang petsa kaya sa kahulugang iyon ay nakakatipid ito ng oras at pagsisikap para sa user. Bukod dito, pinahuhusay nito ang karanasan ng gumagamit, katumpakan ng data at nagbibigay ng higit na kaginhawahan para sa mga gumagamit. Mayroon itong iba't ibang mga application tulad ng isang sistema ng pamamahala ng kaganapan, sistema ng pag-book, atbp.
Ipinapakita ng blog na ito kung paano itakda ang default na halaga ng petsa ng uri ng input sa ngayon:
- Gamit ang 'valueAsDate' Property
- Gamit ang Paraan na 'toISOString()'.
- Gamit ang “getFullYear()” at “padStart()” Methods
Paraan 1: Gamit ang 'valueAsDate' Property
Ang ' valueAsDate 'Ang ari-arian ay ginagamit upang kunin ang kasalukuyang petsa sa pamamagitan ng ' Petsa() ” function. Ang function na ito ay ginagamit upang magsagawa ng iba't ibang mga operasyon sa isang petsa at tulad ng pagkuha ng kasalukuyang petsa, pagtatakda ng isang partikular na petsa, pagmamanipula ng mga petsa, atbp.
Bisitahin ang code sa ibaba para sa isang mas mahusay na pag-unawa:
< katawan >
< div >
< label para sa = 'todayDate' > Ang petsa ay label >< input uri = 'date'
id = 'todayDate' >
div >
< iskrip >
document.getElementById ( 'todayDate' ) .valueAsDate = bagong Petsa ( ) ;
iskrip >
katawan >
Sa snippet ng code sa itaas:
- Una, ang ' Ang 'tag ay nilikha na may ' uri 'at' id 'mga katangiang itinakda sa ' datos 'at' todayDate ” ayon sa pagkakabanggit. Ang tag na ' ' na ito ay gagamitin sa buong blog.
- Susunod, sa loob ng ' ' i-tag ang HTML element na may id ng ' todayDate ' ay pinili gamit ang ' getElementById() ” paraan.
- Pagkatapos nito, ang ' valueAsDate 'Ang ari-arian ay itinalaga at iniimbak bilang isang halimbawa ng isang bagong ' Petsa() ” constructor.
Pagkatapos ng pagpapatupad ng snippet ng code sa itaas, ganito ang hitsura ng webpage:
Ipinapakita ng output na ang data ng uri ng input ay may default na halaga na nakatakda sa kasalukuyan/ngayong petsa.
Paraan 2: Gamit ang Paraan na “toISOString()”.
Para sa pagtatakda ng default na halaga ngayon para sa ' input ” elemento hanggang ngayon/kasalukuyang petsa. Ang ' toISOString() ” na paraan ay maaari ding gamitin, para sa isang mas mahusay na paliwanag bisitahin ang snippet ng code sa ibaba:
< iskrip >const ngayon = bagong Petsa ( ) .toISOString ( ) .substr ( 0 , 10 ) ;
document.getElementById ( 'todayDate' ) .value = ngayon;
iskrip >
Sa snippet ng code sa itaas:
- Una, ang bagong halimbawa ng ' Petsa() ” constructor ay nilikha. Pagkatapos nito, i-convert ang instance ng petsa sa ' ISO 'pamantayan gamit ang ' toISOString() ” paraan.
- Susunod, gamitin ang ' substr() 'paraan ng pagkuha ng mga index number ng ' 0 'at' 10 ” bilang isang parameter. Pagkatapos nito, ipinapakita nito ang resulta simula sa ' 0 'index sa' 10 ” index.
Pagkatapos ng pagpapatupad ng pamamaraan sa itaas, ang webpage ay lilitaw tulad nito:
Ipinapakita ng output na ang data ng uri ng input ay may default na halaga na nakatakda sa kasalukuyan/ngayong petsa.
Paraan 3: Gamit ang “getFullYear()” at “padStart()” Methods
Sa seksyong ito, ang ' getFullYear() 'Ang pamamaraan ay kinukuha ang kasalukuyang petsa. Ang ' pathStart() Ginagamit ang pamamaraan na tumutulong sa pag-format ng ' petsa ” format na ipapakita sa naka-target na “ input ' elemento:
< iskrip >const kasalukuyang = bagong Petsa ( ) ;
const kasalukuyang-taon = kasalukuyang.getFullYear ( ) ;
const kasalukuyang-buwan = String ( kasalukuyang.getMonth ( ) + 1 ) .padStart ( 2 , '0' ) ;
const kasalukuyang-araw = String ( kasalukuyang.getDate ( ) ) .padStart ( 2 , '0' ) ;
const formattedDate = ` ${kasalukuyang-taon} - ${current-month} - ${kasalukuyang-araw} ` ;
const myDateInput = document.getElementById ( 'myDate' ) ;
myDateInput.value = formattedDate;
iskrip >
Ang paglalarawan ng mga snippet ng code sa itaas ay inilalarawan sa mga bullet point:
- Una, lumikha ng isang pare-parehong uri ng variable na nag-iimbak ng object ng ' Petsa() 'constructor na may pangalan' kasalukuyang ”.
- Susunod, gamitin ang ' getFullYear() 'paraan na may ' kasalukuyang ” variable at iimbak ito sa isang bagong variable na pinangalanang “ kasalukuyang taon ”.
- Pagkatapos, ipasa ang ' getMonth() ” paraan at magdagdag ng isang numero upang simulan ang buwan mula 1 hanggang 12 sa loob ng “ String() ” constructor. Magbigay din ng padding ng dalawang character sa pamamagitan ng paggamit ng ' pathStart(2, 0) ”. At ilagay ito sa isang bagong likhang variable na pinangalanang ' kasalukuyang-buwan ”.
- Susunod, sundin ang parehong proseso upang makuha ang kasalukuyang petsa gamit ang “ getDate() 'paraan at iimbak ito sa ' kasalukuyang araw ” variable.
Pagkatapos ng pagpapatupad ng mga snippet ng code, ang webpage sa bawat kaso ay lalabas na ganito:
Ipinapakita ng output na ang data ng uri ng input ay may default na halaga na nakatakda sa kasalukuyan/ngayong petsa.
Konklusyon
Upang itakda ang default na halaga ng petsa ng uri ng input sa ngayon/kasalukuyang petsa, ang “ valueAsDate ' ari-arian, ang ' toISOString() 'at' getFullYear() ” ang mga pamamaraan ay maaaring gamitin. Sa kaso ng property na 'valueAsDate', tanging ang ' Petsa() 'Kailangan ang constructor habang sa kaso ng ' toISOString() 'mga pamamaraan ang' substr() 'Ang paraan ay ginagamit upang makakuha lamang ng isang partikular na bahagi ng petsa. Ipinapakita ng blog na ito kung paano itakda ang default na halaga ng petsa ng pag-input sa ngayon/kasalukuyan.