IL JavaScript "DatePicker" Ti consente di scegliere una data da un calendario a discesa interattivo anziché digitarlo manualmente. È utilizzato in scenari in cui si desidera pianificare compiti in base a una data specifica, come il salvataggio di una data di nascita. UN "date picker"Può essere rapidamente aggiunto a un"Campo di inserimento" usando il "Plugin jQuery". Esistono anche vari altri plugin da datapicker; Tuttavia, "JQuery UI DatePicker"Si distingue sul mercato per la sua natura altamente flessibile.

Questo post discuterà della procedura per utilizzare un JavaScript DatePicker. Quindi iniziamo!

Plug -in JQueryui DatePicker

Il jqueryui "date picker"Il plugin consente all'utente di inserire visivamente le date. Ti consente inoltre di modificare facilmente il formato della data e la sua lingua, aggiungere le opzioni di navigazione e limitare gli intervalli di data. Per utilizzare tutte queste funzionalità, Jqueryui offre un "date picker()"Metodo e aggiunge nuove classi CSS alle pagine HTML cambiando il loro aspetto.

Sintassi

$ (selettore).DatePicker (opzioni);

Qui, il "selettore"Il parametro rappresenta i selettori CSS come"div"O qualsiasi nodo modello a oggetto documento e"opzioni"È un parametro opzionale che comprende diverse opzioni come "DateFormat", "CloseText", "DayNames".

Ora, andiamo verso l'implementazione di JavaScript "date picker".

Come usare JavaScript DatePicker

Per lo scopo dimostrativo, creeremo un'applicazione JavaScript e aggiungeremo la funzionalità di una base "date picker" ad Campo di inserimento. Per fare lo stesso, segui le istruzioni dettagliate di passo:

Passaggio 1: Importa librerie richieste

Prima di tutto, importa le librerie richieste nel file HTML per l'utilizzo del plug -in UI JQuery:

Passaggio 2: Aggiungi elementi HTML

Nel passaggio successivo, crea gli elementi HTML desiderati nell'applicazione. Nel nostro caso, aggiungeremo in primo luogo un "Titolo" all'interno del tag "":

Quindi, una voce con il "

"Tag e un paragrafo con il"

"Tag, all'interno del""Tag:

Dimostrazione dell'utilizzo di JavaScript DatePicker

Inserisci la data:

Inoltre, nell'aggiunto "Campo di inserimento", Un calendario interattivo apparirà in una sovrapposizione quando il campo di input è focalizzato.

Passaggio 3: codice file JavaScript

Passa al tuo file JavaScript e scrivi il seguente codice per specificare l'ID campo di input "#date picker" COME "selettore"Parametro del"date picker()" metodo. Qui, puoi anche aggiungere alcune "opzioni" di configurazione avanzate relative a JavaScript "date picker"Come modificare il formato della data:

$ (function ()
$ ("#datepicker").date picker();
DateFormat: "YY-MM-DD"
);

Passaggio 4: codice file CSS

Per migliorare l'aspetto dell'applicazione JavaScript, definire lo stile degli elementi HTML aggiunti nel file CSS. Ad esempio, aggiungeremo il colore di sfondo per "corpo“, Colore di testo e famiglie di carattere per il Testa "H1" e "P" Elementi di paragrafo:

corpo
Background-color: Powderblue;

H1
Colore: RGB (21, 7, 145);
Font-Family: "Courier New", Courier, Monospace;

P
Colore: RGB (37, 25, 5);
Font-Family: corriere;

Passaggio 5: collegamento CSS e JavaScript al file HTML

Infine, collegare i file CSS e JavaScript al file HTML del progetto JavaScript:

Ecco come il nostro "JavaScript DatePicker.html"Il file sembra:

Passaggio 6: esegui l'applicazione JavaScript

Dopo aver aggiunto tutto il codice richiesto, fare clic con il pulsante destro del mouse sul file HTML e dal menu di contesto aperto, selezionare "Apri con il server live" opzione:

La tua applicazione JavaScript creata ora verrà eseguita nel browser. Clicca sul "Campo di inserimento"E scegli una data da"date picker":

Ti abbiamo mostrato il metodo per utilizzare una base JavaScript DatePicker. Puoi esplorare ulteriormente secondo necessità.

Conclusione

JQueryui offre un “date picker()"Metodo che consente di scegliere una data da un calendario a discesa interattivo anziché digitarlo manualmente. Un javascript datepicker viene utilizzato negli scenari in cui si desidera pianificare le attività in base a una data specifica, come il salvataggio di una data di nascita. In questo post, abbiamo discusso del metodo per aggiungere la funzionalità di una base "date picker"In un campo di input.