Kui kasutajad peavad sisestama kuupäeva, määravad arendajad sisestustüübi kuupäeva eelmääratletud/vaikeväärtuseks praeguse/tänase kuupäeva. Nüüd ei pea kasutaja kuupäeva käsitsi sisestama, seega säästab see kasutaja aega ja vaeva. Lisaks suurendab see kasutajakogemust, andmete täpsust ja pakub kasutajatele rohkem mugavust. Sellel on mitmesuguseid rakendusi, nagu sündmuste haldussüsteem, broneerimissüsteem jne.
See ajaveeb näitab, kuidas määrata sisestustüübi kuupäeva vaikeväärtuseks tänane:
- Atribuudi „valueAsDate” kasutamine
- Kasutades meetodit 'toISOString()'.
- Kasutades meetodeid 'getFullYear()' ja 'padStart()'.
1. meetod: atribuudi „valueAsDate” kasutamine
' valueAsDate atribuuti kasutatakse praeguse kuupäeva toomiseks läbi ' Kuupäev() ” funktsioon. Seda funktsiooni kasutatakse kuupäevaga erinevate toimingute tegemiseks, näiteks praeguse kuupäeva hankimiseks, konkreetse kuupäeva määramiseks, kuupäevadega manipuleerimiseks jne.
Parema mõistmise jaoks külastage allolevat koodi:
< keha >
< div >
< silt jaoks = 'tänakuupäev' > Kuupäev on silt >< sisend tüüp = 'kuupäev'
id = 'tänakuupäev' >
div >
< stsenaarium >
document.getElementById ( 'tänakuupäev' ) .valueAsDate = uus kuupäev ( ) ;
stsenaarium >
keha >
Ülaltoodud koodilõigul:
- Esiteks, '
märgend luuakse, millel on tüüp ” ja „ id ' atribuudid on seatud väärtusele ' andmeid ” ja „ täna Kuupäev ” vastavalt. Seda märgendit „ ” kasutatakse kogu ajaveebis. - Järgmisena, sees ” märgista HTML-element, mille ID on „ täna Kuupäev ” valitakse nupu „ getElementById() ” meetod.
- Pärast seda ' valueAsDate ' atribuut määratakse ja salvestatakse uue ' Kuupäev() ” konstruktor.
Pärast ülaltoodud koodilõigu täitmist näeb veebileht välja järgmine:
Väljund näitab, et sisendtüübi andmetel on vaikeväärtus seatud praegusele/tänasele kuupäevale.
2. meetod: 'toISOString()' meetodi kasutamine
Tänase vaikeväärtuse määramiseks sisend ” element tänaseks/praeguseks kuupäevaks. ' toISOString() ” saab kasutada ka meetodit, parema selgituse saamiseks külastage allolevat koodilõiku:
< stsenaarium >const täna = uus kuupäev ( ) .toISOString ( ) .substr ( 0 , 10 ) ;
document.getElementById ( 'tänakuupäev' ) .value = tänane päev;
stsenaarium >
Ülaltoodud koodilõigul:
- Esiteks, uus eksemplar Kuupäev() ” konstruktor luuakse. Pärast seda teisendage kuupäeva eksemplar ' ISO ' standard kasutades ' toISOString() ” meetod.
- Järgmisena kasutage ' substr() ' meetod, mis võtab indeksi numbrid ' 0 ” ja „ 10 ” parameetrina. Pärast seda kuvatakse tulemus alates ' 0 ' indeks ' 10 ” indeks.
Pärast ülaltoodud meetodi täitmist näeb veebileht välja selline:
Väljund näitab, et sisendtüübi andmetel on vaikeväärtus seatud praegusele/tänasele kuupäevale.
3. meetod: 'getFullYear()' ja 'padStart()' meetodite kasutamine
Selles jaotises on ' getFullYear() ” meetod ekstraheerib praeguse kuupäeva. ' pathStart() Kasutatakse meetodit, mis aitab vormindada kuupäev vormingus, mis kuvatakse sihitud sisend ” element:
< stsenaarium >konst praegune = uus kuupäev ( ) ;
const jooksev-aasta = praegune.getFullYear ( ) ;
const jooksev-kuu = String ( praegune.getMonth ( ) + 1 ) .padStart ( 2 , '0' ) ;
const jooksev päev = String ( current.getDate ( ) ) .padStart ( 2 , '0' ) ;
const formattedDate = ` ${current-year} - ${praegune kuu} - ${praegune päev} ` ;
const myDateInput = document.getElementById ( 'myDate' ) ;
myDateInput.value = vormindatudKuupäev;
stsenaarium >
Ülaltoodud koodilõikude kirjeldust kirjeldatakse punktides:
- Esiteks looge konstantset tüüpi muutuja, mis salvestab 'objekti' Kuupäev() 'konstruktor nimega ' praegune ”.
- Järgmisena kasutage ' getFullYear() ' meetod koos ' praegune muutuja ja salvestage see uude muutujasse nimega ' praegune aasta ”.
- Seejärel läbige ' get Month() ” meetodit ja lisage üks number, et alustada kuu 1-st 12-ni. String() ” konstruktor. Lisage ka kahest märgist koosnev täidis, kasutades ' pathStart(2, 0) ”. Ja asetage see äsja loodud muutujasse nimega ' Käesolev kuu ”.
- Järgmisena järgige sama protsessi, et saada praegune kuupäev, kasutades ' getDate() ' meetodit ja salvestage see jaotisesse ' praegune päev ” muutuja.
Pärast koodilõikude täitmist näeb veebileht igal juhul välja selline:
Väljund näitab, et sisendtüübi andmetel on vaikeväärtus seatud praegusele/tänasele kuupäevale.
Järeldus
Sisestustüübi kuupäeva vaikeväärtuse määramiseks täna/praegune kuupäev, valueAsDate ' vara, ' toISOString() ” ja „ getFullYear() ” meetodeid saab kasutada. Atribuudi „valueAsDate” puhul kasutatakse ainult „ Kuupäev() ' konstruktorit on vaja, samas kui ' toISOString() ' meetodid ' substr() ” kasutatakse ainult kindla osa kuupäeva hankimiseks. See ajaveeb näitab, kuidas määrata sisendi tüübi kuupäeva vaikeväärtuseks täna/praegune.