JavaScript „DatePicker” pozwala na wybrać datę z interaktywnego rozwijanego kalendarza, a nie ręcznie go pisać. Jest używany w scenariuszach, w których chcesz planować zadania zgodnie z określoną datą, takie jak uratowanie daty urodzin. A "DatePicker”Można szybko dodać do„pole wejściowe" używając "wtyczka jQuery". Istnieją również różne inne wtyczki DatePicker; Jednakże, "JQuery UI DatePicker”Wyróżnia się na rynku ze względu na jego wysoce elastyczny charakter.

Ten post omówi procedurę użycia JavaScript DatePicker. A więc zacznijmy!

Wtyczka JQueryui DatePicker

JQueryui „DatePicker”Wtyczka umożliwia użytkownikowi wprowadzenie dat wizualnych. Umożliwia także łatwą zmianę formatu daty i jej języka, dodanie opcji nawigacji i ograniczenie zakresów daty. Aby wykorzystać wszystkie te funkcje, JQueryui oferuje „datePicker ()”Metoda i dodaje nowe klasy CSS do stron HTML, zmieniając ich wygląd.

Składnia

$ (selektor).DatePicker (opcje);

Tutaj "selektor„Parametr reprezentuje selektory CSS, takie jak„div”Lub dowolny węzeł modelu obiektu dokumentu oraz„opcje”Jest opcjonalnym parametrem, który zawiera różne opcje, takie jak „DateFormat”, „CloseText”, „Daynames”.

Teraz przejdźmy do wdrożenia JavaScript „DatePicker".

Jak używać JavaScript DatePicker

W celu demonstracji utworzymy aplikację JavaScript i dodamy funkcjonalność podstawowego „DatePicker„Do pole wejściowe. Aby zrobić to samo, postępuj zgodnie z instrukcjami krok po kroku:

Krok 1: Importuj wymagane biblioteki

Przede wszystkim zaimportuj wymagane biblioteki w pliku HTML do używania wtyczki JQuery UI:

Krok 2: Dodaj elementy HTML

W następnym kroku utwórz pożądane elementy HTML w swojej aplikacji. W naszym przypadku najpierw dodamy „Tytuł” ​​w obrębie znacznika „”:

Następnie na kierunku „

„Tag i akapit z„

„Tag, wewnątrz„”Tag:

Demonstracja korzystania z JavaScript DatePicker

Wprowadź datę:

Ponadto w dodaniu „pole wejściowe”, Interaktywny kalendarz pojawi się w nakładce, gdy pole wejściowe jest skupione.

Krok 3: Kod pliku JavaScript

Przełącz na plik JavaScript i zapisz następujący kod, aby określić identyfikator pola wejściowego „#DatePicker" Jak "selektor„Parametr„datePicker ()" metoda. Tutaj możesz również dodać niektóre zaawansowane „opcje” konfiguracji związane z JavaScript ”DatePicker”Takie jak zmiana formatu daty:

$ (funkcja ()
$ („#DatePicker”).datePicker ();
DATEFORMAT: „YY-MM-DD”
);

Krok 4: Kod pliku CSS

Aby poprawić wygląd aplikacji JavaScript, zdefiniuj styl dodanych elementów HTML w pliku CSS. Na przykład dodamy kolor tła dla „ciało„Kolor tekstu i rodzinna czcionka „H1” nagłówek i „P” Elementy akapitu:

ciało
kolor tła: proszek;

H1
Kolor: RGB (21, 7, 145);
Font-Family: „Courier New”, Courier, Monospace;

P
Kolor: RGB (37, 25, 5);
Font Family: Courier;

Krok 5: Link CSS i JavaScript do pliku HTML

Na koniec połącz pliki CSS i JavaScript do pliku HTML JavaScript Project:

Oto jak nasze „JavaScript DatePicker.html„Plik wygląda jak:

Krok 6: Uruchom aplikację JavaScript

Po dodaniu całego wymaganego kodu, kliknij prawym przyciskiem myszy plik HTML i z otwartego menu kontekstowego, wybierz „Otwórz z serwerem na żywo" opcja:

Twoja utworzona aplikacja JavaScript będzie teraz uruchomiona w przeglądarce. Kliknij na "pole wejściowe”I wybierz datę z„DatePicker”:

Pokazaliśmy metodę wykorzystania podstawowego JavaScript DatePicker. Możesz dalej odkrywać w razie potrzeby.

Wniosek

JQueryui oferuje „datePicker ()„Metoda, która pozwala wybrać datę z interaktywnego kalendarza rozwijanego, a nie ręczne pisanie go. DatePicker JavaScript jest używany w scenariuszach, w których chcesz zaplanować zadania zgodnie z określoną datą, takie jak uratowanie daty urodzin. W tym poście omówiliśmy metodę dodania funkcjonalności podstawowego „DatePicker”Do pola wejściowego.