Questo articolo illustra l'utilizzo dell'input type='date' in HTML insieme all'implementazione pratica.
Come utilizzare input type='date' in HTML?
Il 'tipo di input = 'data'' può essere utilizzato in vari siti Web, come siti Web sanitari, siti Web di prenotazione aerea, siti Web di e-commerce, siti di social network, ecc. La sintassi del selettore di date è indicata di seguito:
< ingresso tipo = 'data' id = '' nome = '' >
Gli attributi utilizzati nei frammenti di codice di cui sopra sono:
- Prima il ' tipo L'attributo ” consente al campo di input di fungere da selettore di date da cui l'utente può scegliere qualsiasi data.
- Successivamente, il “ id L'attributo ” definisce l'unicità di quell'elemento. Usandolo, l'elemento può essere selezionato e può applicare la funzionalità JavaScript.
- Dopodiché il “ nome L'attributo ” specifica il nome di quell'elemento. Fornisce aiuto nel processo di convalida per ottenere il valore dell'elemento selezionato.
Per migliorare il livello di comprensione, esaminiamo diversi esempi:
Esempio 1: utilizzo di type= 'date' in HTML
Nel file HTML, crea un '
< modulo >
< etichetta per = 'data di iscrizione' > Seleziona la tua data di iscrizione: < / etichetta >
< ingresso tipo = 'data' id = 'data di iscrizione' nome = 'data di iscrizione' >
< / modulo >
Nello snippet di codice sopra:
- Prima il '
Viene utilizzato il tag ' in cui vengono inseriti i dati fittizi e il valore di ' data di iscrizione ” è stato fornito al “ per 'attributo. - Successivamente, il “ Il tag ” viene utilizzato con un valore di “ data ' al suo ' tipo 'attributo.
- Successivamente, imposta il valore di ' data di iscrizione ' al ' id 'attributo. Inoltre, imposta il valore di ' nome ” attributo in base alla necessità.
Dopo l'esecuzione dello snippet di codice sopra, la pagina web appare così:
La gif sopra mostra che il selettore di date è stato creato utilizzando input type= 'data' in HTML.
Esempio 2: recupero della data tramite JavaScript
Per recuperare i dati, gli utenti possono utilizzare le funzionalità JavaScript. Per una migliore comprensione, visitare il blocco di codice seguente:
< pulsante al clic = 'datarecupero()' >Ottieni data< / pulsante >< copione tipo = 'testo/javascript' >
funzione recuperaDate ( ) {
era dataInput = document.getElementById ( 'data di iscrizione' ) ;
var selectDate = dataInput. valore ;
mettere in guardia ( 'Data selezionata: ' + Data selezionata ) ;
}
< / copione >
Nello snippet di codice sopra:
- Prima il ' recuperaData() La funzione ” viene creata all'interno del “
etichetta. - Successivamente, il riferimento dell'elemento HTML con un id di ' data di iscrizione ' e memorizzato in una nuova variabile denominata ' dataInput ”.
- Quindi, utilizza il ' valore ” per ottenere il valore dell'elemento HTML selezionato. Inoltre, memorizza in una nuova variabile denominata ' selezionatoData ”.
- Alla fine, visualizzare il valore utilizzando il ' mettere in guardia() ' metodo.
Dopo l'esecuzione dello snippet di codice sopra, la pagina web appare così:
L'output mostra che la data selezionata viene visualizzata nella casella di avviso.
Conclusione
L'input type=”date” viene utilizzato nell'HTML per la creazione di un selettore di date. Impostando il ' tipo ” attributo del “ ” etichettare il “ data ', IL ' L'elemento ” inizia a funzionare come selettore di date. Gli attributi come ' id ' E ' nome ” sono utilizzati anche per specificare in modo univoco l'elemento di input selezionato. È possibile accedere al valore selezionato anche tramite Javascript. Questo articolo ha dimostrato l'uso di input type= “date”.