Keď sa od používateľov vyžaduje zadanie dátumu, vývojári nastavia preddefinovanú/predvolenú hodnotu dátumu typu vstupu na aktuálny/dnešný dátum. Teraz používateľ nemusí zadávať dátum ručne, takže v tomto zmysle šetrí čas a námahu pre používateľa. Okrem toho zlepšuje používateľskú skúsenosť, presnosť údajov a poskytuje používateľom väčšie pohodlie. Má rôzne aplikácie, ako je systém správy udalostí, rezervačný systém atď.
Tento blog ukazuje, ako nastaviť predvolenú hodnotu dátumu typu vstupu na dnešný deň:
- Použitie vlastnosti „valueAsDate“.
- Pomocou metódy „toISOSTring()“.
- Pomocou metód „getFullYear()“ a „padStart()“.
Metóda 1: Použitie vlastnosti „valueAsDate“.
' valueAsDate ” vlastnosť sa používa na získanie aktuálneho dátumu cez “ Dátum() “. Táto funkcia sa používa na vykonávanie rôznych operácií s dátumom, ako je získanie aktuálneho dátumu, nastavenie konkrétneho dátumu, manipulácia s dátumami atď.
Pre lepšie pochopenie navštívte nižšie uvedený kód:
< telo >
< div >
< štítok pre = 'dnešný dátum' > Dátum je štítok < vstup typu = 'dátum'
id = 'dnešný dátum' >
div >
< skript >
document.getElementById ( 'dnešný dátum' ) .valueAsDate = nový dátum ( ) ;
skript >
telo >
Vo vyššie uvedenom útržku kódu:
- Po prvé, „
Značka “ sa vytvorí s “ typu “ a „ id ” atribúty nastavené na “ údajov “ a „ dnesDátum “. Táto značka „ “ sa bude používať v celom blogu. - Ďalej vo vnútri „ ” označte prvok HTML s ID „ dnesDátum “ sa vyberá pomocou tlačidla “ getElementById() “.
- Potom sa „ valueAsDate “ vlastnosť je priradená a uložená ako inštancia nového “ Dátum() “konštruktér.
Po vykonaní vyššie uvedeného útržku kódu bude webová stránka vyzerať takto:
Výstup ukazuje, že údaje typu vstupu majú predvolenú hodnotu nastavenú na aktuálny/dnešný dátum.
Metóda 2: Použitie metódy „toISOSTring()“.
Na nastavenie predvolenej dnešnej hodnoty pre „ vstup ” prvok k dnešnému/aktuálnemu dátumu. ' toISOString() ” možno použiť aj metódu, pre lepšie vysvetlenie navštívte nižšie uvedený útržok kódu:
< skript >const dnes = nový dátum ( ) .toISOstring ( ) .substr ( 0 , 10 ) ;
document.getElementById ( 'dnešný dátum' ) .hodnota = dnes;
skript >
Vo vyššie uvedenom útržku kódu:
- Po prvé, nová inštancia „ Dátum() “ je vytvorený konštruktor. Potom preveďte inštanciu dátumu na „ ISO ” štandard s použitím “ toISOString() “.
- Ďalej použite „ substr() “metóda s indexovými číslami “ 0 “ a „ 10 “ ako parameter. Potom sa zobrazí výsledok začínajúci od „ 0 “ index k “ 10 index.
Po vykonaní vyššie uvedenej metódy sa webová stránka zobrazí takto:
Výstup ukazuje, že údaje typu vstupu majú predvolenú hodnotu nastavenú na aktuálny/dnešný dátum.
Metóda 3: Použitie metód „getFullYear()“ a „padStart()“.
V tejto časti „ getFullYear() ” metóda extrahuje aktuálny dátum. ' pathStart() používa sa metóda, ktorá pomáha pri formátovaní súboru „ dátum “formát, ktorý sa zobrazí na cieľovom “ vstup ' element:
< skript >konšt prúd = nový dátum ( ) ;
const current-year = current.getFullYear ( ) ;
const current-month = Reťazec ( current.getMonth ( ) + 1 ) .padStart ( 2 , '0' ) ;
const current-day = Reťazec ( current.getDate ( ) ) .padStart ( 2 , '0' ) ;
const formattedDate = ` ${current-year} - ${current-month} - ${current-day} ` ;
const myDateInput = document.getElementById ( 'môj dátum' ) ;
myDateInput.value = formattedDate;
skript >
Popis vyššie uvedených útržkov kódu je popísaný v bodoch:
- Najprv vytvorte konštantný typ premennej, ktorá ukladá objekt „ Dátum() 'konštruktor s názvom' prúd “.
- Ďalej použite „ getFullYear() “ metóda s “ prúd ” premennú a uložte ju do novej premennej s názvom “ aktuálny rok “.
- Potom prejdite „ getMonth() “ a pridajte jedno číslo na začiatok mesiaca od 1 do 12 v poli “ String() “konštruktér. Poskytnite tiež výplň dvoch znakov pomocou „ pathStart(2, 0) “. A umiestnite ho do novovytvorenej premennej s názvom „ aktuálny mesiac “.
- Ďalej postupujte podľa rovnakého postupu a získajte aktuálny dátum pomocou „ getDate() “ a uložte ho do “ aktuálny deň “premenná.
Po vykonaní útržkov kódu bude webová stránka v každom prípade vyzerať takto:
Výstup ukazuje, že údaje typu vstupu majú predvolenú hodnotu nastavenú na aktuálny/dnešný dátum.
Záver
Ak chcete nastaviť predvolenú hodnotu dátumu typu vstupu na dnešný/aktuálny dátum, „ valueAsDate nehnuteľnosť, toISOString() “ a „ getFullYear() “ môžu byť použité metódy. V prípade vlastnosti „valueAsDate“ sa použije iba „ Dátum() “ je potrebný konštruktor, zatiaľ čo v prípade “ toISOString() metódy „ substr() “ metóda sa používa na získanie iba určitej časti dátumu. Tento blog ukazuje, ako nastaviť predvolenú hodnotu dátumu typu vstupu na dnešný/aktuálny.