Amikor a felhasználóknak meg kell adniuk egy dátumot, a fejlesztők egy beviteli típusú dátum előre meghatározott/alapértelmezett értékét az aktuális/ma dátumra állítják. Mostantól a felhasználónak nem kell manuálisan megadnia a dátumot, így ebben az értelemben időt és erőfeszítést takarít meg a felhasználó számára. Sőt, javítja a felhasználói élményt, az adatok pontosságát és nagyobb kényelmet biztosít a felhasználók számára. Különféle alkalmazásokkal rendelkezik, mint például rendezvénykezelő rendszer, foglalási rendszer stb.
Ez a blog bemutatja, hogyan állíthatja be a beviteli típus dátumának alapértelmezett értékét a mai napra:
- A „valueAsDate” tulajdonság használata
- A „toISOString()” metódus használata
- A „getFullYear()” és a „padStart()” metódusok használata
1. módszer: A „valueAsDate” tulajdonság használata
A ' valueAsDate ' tulajdonság az aktuális dátum lekérésére szolgál a ' Dátum() ” funkciót. Ez a funkció különféle műveletek végrehajtására szolgál egy dátumon, például az aktuális dátum lekérésére, egy adott dátum beállítására, a dátumok manipulálására stb.
Látogassa meg az alábbi kódot a jobb megértéshez:
< test >
< div >
< címke számára = 'ma dátum' > A dátum címke >< bemenet típus = 'dátum'
id = 'ma dátum' >
div >
< forgatókönyv >
document.getElementById ( 'ma dátum' ) .valueAsDate = új dátum ( ) ;
forgatókönyv >
test >
A fenti kódrészletben:
- Először is a „
' címke jön létre a következővel: ' típus ” és „ id ' attribútumok beállítása ' adat ” és „ maiDátum ” ill. Ezt az „ ” címkét az egész blogon használni fogjuk. - Ezután a „ ' címkézze meg a HTML elemet, amelynek azonosítója ' maiDátum ' a ' gombbal van kiválasztva getElementById() ” módszerrel.
- Ezt követően a „ valueAsDate ' tulajdonság hozzá van rendelve és egy új ' példány példányaként tárolva Dátum() ” kivitelező.
A fenti kódrészlet végrehajtása után a weboldal így néz ki:
A kimenet azt mutatja, hogy a bemeneti típusú adatok alapértelmezett értéke az aktuális/mai dátumra van beállítva.
2. módszer: A „toISOString()” módszer használata
Az alapértelmezett mai érték beállításához bemenet ” elemet a mai napra/aktuális dátumra. A ' toISOString() ” módszer is használható, a jobb magyarázatért látogassa meg az alábbi kódrészletet:
< forgatókönyv >const ma = új dátum ( ) .toISOString ( ) .substr ( 0 , 10 ) ;
document.getElementById ( 'ma dátum' ) .érték = ma;
forgatókönyv >
A fenti kódrészletben:
- Először is a „ Dátum() ” konstruktor jön létre. Ezt követően alakítsa át a dátum példányát a ' ISO ' szabvány a ' toISOString() ” módszerrel.
- Ezután használja a „ substr() ' módszer, amely a ' indexszámait veszi fel 0 ” és „ 10 ” paraméterként. Ezt követően megjeleníti az eredményt a „ 0 ' index a ' 10 ” index.
A fenti módszer végrehajtása után a weboldal így néz ki:
A kimenet azt mutatja, hogy a bemeneti típusú adatok alapértelmezett értéke az aktuális/mai dátumra van beállítva.
3. módszer: A „getFullYear()” és a „padStart()” metódusok használata
Ebben a részben a „ getFullYear() ” metódus kivonja az aktuális dátumot. A ' pathStart() ' módszert használjuk, amely segít a ' dátum ' formátum, amely a megcélzott ' bemenet ” elem:
< forgatókönyv >const jelenlegi = új dátum ( ) ;
const aktuális-év = aktuális.getFullYear ( ) ;
const current-month = String ( aktuális.getMonth ( ) + 1 ) .padStart ( 2 , '0' ) ;
const aktuális-nap = Karakterlánc ( current.getDate ( ) ) .padStart ( 2 , '0' ) ;
const formattedDate = ` ${current-year} - ${current-month} - ${current-day} ` ;
const myDateInput = document.getElementById ( 'az én randevúm' ) ;
myDateInput.value = formattedDate;
forgatókönyv >
A fenti kódrészletek leírása pontokban található:
- Először hozzon létre egy állandó típusú változót, amely tárolja a ' Dátum() ' konstruktor a névvel ' jelenlegi ”.
- Ezután használja a „ getFullYear() ' módszer a ' jelenlegi ' változót, és tárolja egy új változóban ' jelen év ”.
- Ezután adja át a „ get Month() ” módszert, és adjon hozzá egy számot, hogy a hónapot 1-től 12-ig kezdje a „ Húr() ” kivitelező. Két karakterből álló kitöltést is biztosítson a „ pathStart(2; 0) ”. És helyezze el egy újonnan létrehozott változóba, melynek neve ' jelenlegi hónap ”.
- Ezután kövesse ugyanazt a folyamatot az aktuális dátum lekéréséhez a „ getDate() ' módszert, és tárolja a ' aktuális nap ” változó.
A kódrészletek végrehajtása után a weboldal minden esetben így néz ki:
A kimenet azt mutatja, hogy a bemeneti típusú adatok alapértelmezett értéke az aktuális/mai dátumra van beállítva.
Következtetés
Ha a beviteli típus dátum alapértelmezett értékét a mai/aktuális dátumra szeretné beállítani, a „ valueAsDate ' ingatlan, a ' toISOString() ” és „ getFullYear() ” módszerek használhatók. A „valueAsDate” tulajdonság esetén csak a „ Dátum() ' konstruktorra van szükség, míg a ' toISOString() ' módszerek a ' substr() ” módszert a dátumnak csak egy meghatározott részének lekérésére használják. Ez a blog bemutatja, hogyan állíthatja be a beviteli típus dátum alapértelmezett értékét mai/aktuális értékre.