Gdy użytkownicy muszą wprowadzić datę, programiści ustawiają wstępnie zdefiniowaną/domyślną wartość daty typu wejściowego na datę bieżącą/dzisiejszą. Teraz użytkownik nie musi ręcznie wprowadzać daty, więc w tym sensie oszczędza czas i wysiłek dla użytkownika. Ponadto poprawia komfort użytkowania, dokładność danych i zapewnia większą wygodę użytkownikom. Ma różne aplikacje, takie jak system zarządzania wydarzeniami, system rezerwacji itp.
Ten blog pokazuje, jak ustawić domyślną wartość daty typu danych wejściowych na dzień dzisiejszy:
- Korzystanie z właściwości „valueAsDate”.
- Za pomocą metody „toISOString()”.
- Korzystanie z metod „getFullYear()” i „padStart()”.
Metoda 1: Korzystanie z właściwości „valueAsDate”.
„ wartość jako data ” służy do pobierania bieżącej daty poprzez „ Data() ” funkcja. Ta funkcja służy do wykonywania różnych operacji na dacie, takich jak pobieranie bieżącej daty, ustawianie określonej daty, manipulowanie datami itp.
Odwiedź poniższy kod, aby lepiej zrozumieć:
< ciało >
< dz >
< etykieta Do = 'dzisiejsza data' > Data to etykieta >< wejście typ = 'data'
ID = 'dzisiejsza data' >
dz >
< scenariusz >
document.getElementById ( 'dzisiejsza data' ) .valueAsDate = nowa data ( ) ;
scenariusz >
ciało >
W powyższym fragmencie kodu:
- Po pierwsze '
” tworzony jest tag mający „ typ ' I ' ID ” atrybuty ustawione na „ dane ' I ' dzisiejsza data ” odpowiednio. Ten tag „ ” będzie używany na całym blogu. - Następnie wewnątrz „
” oznacz element HTML o identyfikatorze „ dzisiejsza data ” wybiera się za pomocą przycisku „ getElementById() ' metoda. - Następnie „ wartość jako data ” jest przypisywana i przechowywana jako instancja nowego „ Data() ” konstruktor.
Po wykonaniu powyższego fragmentu kodu strona wygląda następująco:
Dane wyjściowe pokazują, że dane typu wejściowego mają domyślną wartość ustawioną na datę bieżącą/dzisiejszą.
Metoda 2: przy użyciu metody „toISOString()”.
Aby ustawić domyślną dzisiejszą wartość dla „ wejście ” na dzisiejszą/bieżącą datę. „ toISOString() ” można również zastosować metodę, aby uzyskać lepsze wyjaśnienie, odwiedź poniższy fragment kodu:
< scenariusz >const dzisiaj = nowa data ( ) .toISOString ( ) .podstr ( 0 , 10 ) ;
document.getElementById ( 'dzisiejsza data' ) .wartość = dzisiaj;
scenariusz >
W powyższym fragmencie kodu:
- Po pierwsze, nowa instancja „ Data() ” tworzony jest konstruktor. Następnie przekonwertuj wystąpienie daty na „ ISO ” standardowe przy użyciu „ toISOString() ' metoda.
- Następnie użyj „ substr() ” metoda przyjmująca numery indeksowe „ 0 ' I ' 10 ” jako parametr. Następnie wyświetla wynik, zaczynając od „ 0 ”indeks do” 10 ” indeks.
Po wykonaniu powyższej metody strona wygląda następująco:
Dane wyjściowe pokazują, że dane typu wejściowego mają domyślną wartość ustawioną na datę bieżącą/dzisiejszą.
Metoda 3: Korzystanie z metod „getFullYear()” i „padStart()”.
W tej sekcji „ pobierzPełnyRok() ” wyodrębnia bieżącą datę. „ ścieżkaStart() ” używana jest metoda, która pomaga w formatowaniu „ data ” format, który będzie wyświetlany na docelowej „ wejście ' element:
< scenariusz >konst aktualny = nowa data ( ) ;
const bieżący rok = bieżący. pobierz pełny rok ( ) ;
const bieżący-miesiąc = Ciąg ( bieżący.pobierzMiesiąc ( ) + 1 ) .padStart ( 2 , „0” ) ;
const bieżący-dzień = Ciąg ( bieżąca.getDate ( ) ) .padStart ( 2 , „0” ) ;
const sformatowana data = ` ${bieżący rok} - ${bieżący-miesiąc} - ${bieżący dzień} ` ;
const myDateInput = document.getElementById ( 'moja randka' ) ;
myDateInput.value = sformatowana data;
scenariusz >
Opis powyższych fragmentów kodu jest opisany w punktach:
- Najpierw utwórz stały typ zmiennej, który przechowuje obiekt „ Data() „konstruktor o nazwie” aktualny ”.
- Następnie użyj „ pobierzPełnyRok() ” metoda z „ aktualny ” i zapisz ją w nowej zmiennej o nazwie „ rok bieżący ”.
- Następnie przekaż „ pobierz miesiąc() ” i dodaj jedną liczbę, aby rozpocząć miesiąc od 1 do 12 w „ Strunowy() ” konstruktor. Zapewnij również dopełnienie dwóch znaków, używając „ ścieżkaStart(2, 0) ”. I umieść go w nowo utworzonej zmiennej o nazwie „ obecny miesiąc ”.
- Następnie wykonaj ten sam proces, aby uzyskać aktualną datę za pomocą „ pobierzDate() ” i zapisz ją w „ bieżący dzień ' zmienny.
Po wykonaniu fragmentów kodu strona w każdym przypadku wygląda tak:
Dane wyjściowe pokazują, że dane typu wejściowego mają domyślną wartość ustawioną na datę bieżącą/dzisiejszą.
Wniosek
Aby ustawić domyślną wartość daty typu wprowadzania na dzisiejszą/bieżącą datę, przycisk „ wartość jako data „właściwość”, „ toISOString() ' I ' pobierzPełnyRok() ”można zastosować metody. W przypadku właściwości „valueAsDate” tylko „ Data() ” potrzebny jest konstruktor, podczas gdy w przypadku „ toISOString() ” metody „ substr() ” służy do uzyskania tylko określonej części daty. W tym blogu pokazano, jak ustawić domyślną wartość daty typu danych wejściowych na dzisiaj/bieżąca.