Quando agli utenti viene richiesto di inserire una data, gli sviluppatori impostano il valore predefinito/predefinito di una data del tipo di input sulla data corrente/odierna. Ora, l'utente non ha bisogno di inserire la data manualmente, quindi in questo senso risparmia tempo e fatica per l'utente. Inoltre, migliora l'esperienza dell'utente, l'accuratezza dei dati e offre maggiore praticità agli utenti. Ha varie applicazioni come un sistema di gestione degli eventi, un sistema di prenotazione, ecc.
Questo blog mostra come impostare il valore predefinito della data del tipo di input su oggi:
- Utilizzando la proprietà 'valueAsDate'.
- Utilizzando il metodo 'toISOString ()'.
- Utilizzando i metodi 'getFullYear()' e 'padStart()'.
Metodo 1: utilizzo della proprietà 'valueAsDate'.
IL ' valoreComeData La proprietà ” viene utilizzata per recuperare la data corrente tramite la proprietà “ Data() ' funzione. Questa funzione viene utilizzata per eseguire varie operazioni su una data e come ottenere la data corrente, impostare una data specifica, manipolare le date, ecc.
Visita il codice seguente per una migliore comprensione:
< corpo >
< div >
< etichetta per = 'oggiData' > La data è etichetta >< ingresso tipo = 'data'
id = 'oggiData' >
div >
< copione >
document.getElementById ( 'oggiData' ) .valueAsDate = nuova data ( ) ;
copione >
corpo >
Nello snippet di codice sopra:
- Prima il ' ” il tag viene creato con “ tipo ' E ' id ' attributi impostati su ' dati ' E ' oggiData ” rispettivamente. Questo tag ' ' verrà utilizzato in tutto il blog.
- Successivamente, all'interno del “
” tagga l'elemento HTML con un id di “ oggiData ” viene selezionato utilizzando il pulsante “ getElementById() ' metodo. - Dopodiché il “ valoreComeData ” la proprietà viene assegnata e memorizzata come istanza di una nuova “ Data() 'costruttore.
Dopo l'esecuzione del suddetto frammento di codice, la pagina web si presenta così:
L'output mostra che i dati del tipo di input hanno un valore predefinito impostato sulla data corrente/odierna.
Metodo 2: utilizzo del metodo 'toISOString ()'.
Per impostare il valore predefinito di oggi per ' ingresso ” alla data odierna/corrente. IL ' toISOString() Può essere utilizzato anche il metodo ', per una migliore spiegazione visita il seguente frammento di codice:
< copione >cost oggi = nuova data ( ) .toISOString ( ) .substr ( 0 , 10 ) ;
document.getElementById ( 'oggiData' ) .value = oggi;
copione >
Nello snippet di codice sopra:
- In primo luogo, la nuova istanza del ' Data() ” viene creato il costruttore. Successivamente, converti l'istanza della data in ' ISO ” standard utilizzando il “ toISOString() ' metodo.
- Successivamente, utilizza il ' substr() ” metodo prendendo i numeri indice di “ 0 ' E ' 10 ” come parametro. Successivamente, visualizza il risultato a partire dal ' 0 ” indice del “ 10 indice.
Dopo l'esecuzione del metodo sopra, la pagina web appare così:
L'output mostra che i dati del tipo di input hanno un valore predefinito impostato sulla data corrente/odierna.
Metodo 3: utilizzo dei metodi 'getFullYear()' e 'padStart()'.
In questa sezione il “ getFullYear() Il metodo ” estrae la data corrente. IL ' percorsoInizio() ” viene utilizzato il metodo che aiuta nella formattazione del “ data ” formato che verrà visualizzato sul target “ ingresso elemento ':
< copione >cost attuale = nuova data ( ) ;
const anno-corrente = current.getFullYear ( ) ;
const mese-corrente = Stringa ( current.getMonth ( ) + 1 ) .padStart ( 2 , '0' ) ;
const giorno-corrente = Stringa ( current.getDate ( ) ) .padStart ( 2 , '0' ) ;
const formattedDate = ` ${anno-corrente} - ${mese-corrente} - ${giorno-corrente} ` ;
const myDateInput = document.getElementById ( 'il mio appuntamento' ) ;
myDateInput.value = formattedDate;
copione >
La descrizione dei frammenti di codice di cui sopra è descritta in punti elenco:
- Innanzitutto, crea un tipo di variabile costante che memorizzi l'oggetto del ' Data() ” costruttore con il nome “ attuale ”.
- Successivamente, utilizza il ' getFullYear() ” metodo con il “ attuale ” variabile e memorizzarla in una nuova variabile denominata “ anno corrente ”.
- Quindi, passa il ' getMonth() ” e aggiungi un numero per iniziare il mese da 1 a 12 all'interno del “ Corda() 'costruttore. Fornisci anche un riempimento di due caratteri utilizzando ' percorsoInizio(2, 0) ”. E inseriscilo in una variabile appena creata denominata ' corrente mese ”.
- Successivamente, segui lo stesso processo per ottenere la data corrente utilizzando il ' getDate() ” e memorizzarlo nel “ giorno corrente ' variabile.
Dopo l'esecuzione dei frammenti di codice, la pagina web in ogni caso appare così:
L'output mostra che i dati del tipo di input hanno un valore predefinito impostato sulla data corrente/odierna.
Conclusione
Per impostare il valore predefinito della data del tipo di input su oggi/data corrente, il ' valoreComeData ” proprietà, il “ toISOString() ' E ' getFullYear() I metodi possono essere utilizzati. Nel caso della proprietà 'valueAsDate', solo il ' Data() ” costruttore è necessario mentre nel caso del “ toISOString() ” metodi il “ substr() Il metodo ” viene utilizzato per ottenere solo una parte specifica della data. Questo blog mostra come impostare il valore predefinito della data del tipo di input su oggi/corrente.