Když jsou uživatelé povinni zadat datum, vývojáři nastaví předdefinovanou/výchozí hodnotu data typu vstupu na aktuální/dnešní datum. Nyní uživatel nemusí zadávat datum ručně, takže v tomto smyslu šetří čas a úsilí pro uživatele. Navíc zlepšuje uživatelskou zkušenost, přesnost dat a poskytuje uživatelům větší pohodlí. Má různé aplikace, jako je systém správy událostí, rezervační systém atd.
Tento blog ukazuje, jak nastavit výchozí hodnotu data typu vstupu na dnešek:
- Pomocí vlastnosti „valueAsDate“.
- Pomocí metody „toISOSTring()“.
- Pomocí metod „getFullYear()“ a „padStart()“.
Metoda 1: Použití vlastnosti „valueAsDate“.
' valueAsDate ” vlastnost se používá k načtení aktuálního data prostřednictvím “ Datum() funkce “. Tato funkce se používá k provádění různých operací s datem, jako je získání aktuálního data, nastavení konkrétního data, manipulace s daty atd.
Pro lepší pochopení navštivte níže uvedený kód:
< tělo >
< div >
< označení pro = 'dnesDatum' > Datum je označení < vstup typ = 'datum'
id = 'dnesDatum' >
div >
< skript >
document.getElementById ( 'dnesDatum' ) .valueAsDate = nové datum ( ) ;
skript >
tělo >
Ve výše uvedeném úryvku kódu:
- Za prvé, „
Značka “ je vytvořena s “ typ ' a ' id ” atributy nastaveny na “ data ' a ' dnesDatum “. Tento tag „ “ bude používán v celém blogu. - Dále uvnitř „ ” označte prvek HTML s id „ dnesDatum “ se vybírá pomocí “ getElementById() “ metoda.
- Poté se „ valueAsDate “ vlastnost je přiřazena a uložena jako instance nového “ Datum() “konstruktor.
Po provedení výše uvedeného fragmentu kódu vypadá webová stránka takto:
Výstup ukazuje, že data typu vstupu mají výchozí hodnotu nastavenou na aktuální/dnešní datum.
Metoda 2: Použití metody „toISOSTring()“.
Pro nastavení výchozí dnešní hodnoty pro „ vstup ” prvek k dnešnímu/aktuálnímu datu. ' toISOString() ” lze také použít metodu, pro lepší vysvětlení navštivte níže uvedený fragment kódu:
< skript >konst dnes = nové datum ( ) .toISOstring ( ) .substr ( 0 , 10 ) ;
document.getElementById ( 'dnesDatum' ) .hodnota = dnes;
skript >
Ve výše uvedeném úryvku kódu:
- Za prvé, nová instance „ Datum() “ je vytvořen konstruktor. Poté převeďte instanci data na „ ISO 'standardní pomocí ' toISOString() “ metoda.
- Dále použijte „ substr() “ metoda přebírající indexová čísla “ 0 ' a ' 10 “ jako parametr. Poté zobrazí výsledek počínaje „ 0 “ index k “ 10 'index.'
Po provedení výše uvedené metody se webová stránka zobrazí takto:
Výstup ukazuje, že data typu vstupu mají výchozí hodnotu nastavenou na aktuální/dnešní datum.
Metoda 3: Použití metod „getFullYear()“ a „padStart()“.
V této sekci je „ getFullYear() ” metoda extrahuje aktuální datum. ' pathStart() používá se metoda, která pomáhá při formátování souboru datum “formát, který se zobrazí na cíleném “ vstup prvek:
< skript >konst aktuální = nové datum ( ) ;
const current-year = current.getFullYear ( ) ;
const current-month = Řetězec ( current.getMonth ( ) + 1 ) .padStart ( 2 , '0' ) ;
const current-day = Řetězec ( current.getDate ( ) ) .padStart ( 2 , '0' ) ;
const formattedDate = ' ${current-year} - ${current-month} - ${current-day} ' ;
const myDateInput = document.getElementById ( 'moje rande' ) ;
myDateInput.value = formattedDate;
skript >
Popis výše uvedených fragmentů kódu je popsán v odrážkách:
- Nejprve vytvořte konstantní typ proměnné, která ukládá objekt „ Datum() 'konstruktor s názvem' aktuální “.
- Dále použijte „ getFullYear() “ metoda s “ aktuální ” a uložte ji do nové proměnné s názvem “ aktuální rok “.
- Poté předejte „ getMonth() “ a přidejte jedno číslo pro začátek měsíce od 1 do 12 uvnitř „ Tětiva() “konstruktor. Poskytněte také výplň dvou znaků pomocí „ pathStart(2, 0) “. A umístěte jej do nově vytvořené proměnné s názvem „ aktuální měsíc “.
- Dále postupujte stejným způsobem a získejte aktuální datum pomocí „ getDate() “ a uložte jej do “ aktuální den “proměnná.
Po provedení úryvků kódu vypadá webová stránka v každém případě takto:
Výstup ukazuje, že data typu vstupu mají výchozí hodnotu nastavenou na aktuální/dnešní datum.
Závěr
Chcete-li nastavit výchozí hodnotu data typu vstupu na dnešní/aktuální datum, „ valueAsDate nemovitost, toISOString() ' a ' getFullYear() “ lze použít metody. V případě vlastnosti „valueAsDate“ se použije pouze „ Datum() “ je potřeba konstruktor, zatímco v případě “ toISOString() “ metody “ substr() ” metoda se používá k získání pouze určité části data. Tento blog ukazuje, jak nastavit výchozí hodnotu data typu vstupu na dnešní/aktuální.