Cuando se requiere que los usuarios ingresen una fecha, los desarrolladores establecen el valor predefinido/predeterminado de una fecha de tipo de entrada en la fecha actual/hoy. Ahora, el usuario no necesita ingresar la fecha manualmente, por lo que en ese sentido ahorra tiempo y esfuerzo para el usuario. Además, mejora la experiencia del usuario, la precisión de los datos y brinda más comodidad a los usuarios. Tiene varias aplicaciones como un sistema de gestión de eventos, sistema de reservas, etc.
Este blog demuestra cómo establecer el valor predeterminado de la fecha del tipo de entrada para hoy:
- Usando la propiedad 'valueAsDate'
- Usando el método “toISOString()”
- Usando los métodos “getFullYear()” y “padStart()”
Método 1: usar la propiedad 'valueAsDate'
El ' valor como fecha La propiedad ' se utiliza para recuperar la fecha actual a través de la ' Fecha() ' función. Esta función se utiliza para realizar varias operaciones en una fecha, como obtener la fecha actual, establecer una fecha específica, manipular fechas, etc.
Visite el siguiente código para una mejor comprensión:
< cuerpo >
< división >
< etiqueta para = 'fecha de hoy' > La fecha es etiqueta >< aporte tipo = 'fecha'
identificación = 'fecha de hoy' >
división >
< guion >
documento.getElementById ( 'fecha de hoy' ) .valueAsDate = nueva fecha ( ) ;
guion >
cuerpo >
En el fragmento de código anterior:
- Primero el '
” la etiqueta se crea con “ tipo ' y ' identificación ” atributos establecidos en “ datos ' y ' fecha de hoy ” respectivamente. Esta etiqueta “ ” se utilizará en todo el blog. - A continuación, dentro del “ ” etiquete el elemento HTML que tiene una identificación de “ fecha de hoy ” se selecciona con el botón “ getElementById() ' método.
- Después de eso, el “ valor como fecha La propiedad ” se asigna y almacena como una instancia de un nuevo “ Fecha() ” constructor.
Después de la ejecución del fragmento de código anterior, la página web se ve así:
El resultado muestra que los datos de tipo de entrada tienen un valor predeterminado establecido en la fecha actual/hoy.
Método 2: Usar el método “toISOString()”
Para establecer el valor predeterminado de hoy para el “ aporte ” elemento hasta hoy/fecha actual. El ' aISOString() También se puede utilizar el método ', para una mejor explicación, visite el siguiente fragmento de código:
< guion >const hoy = nueva fecha ( ) .toISOString ( ) .substr ( 0 , 10 ) ;
documento.getElementById ( 'fecha de hoy' ) .valor = hoy;
guion >
En el fragmento de código anterior:
- En primer lugar, la nueva instancia de la “ Fecha() Se crea el constructor. Después de eso, convierta la instancia de la fecha en ' YO ASI ” estándar usando el “ aISOString() ' método.
- A continuación, utilice el ' substr() ” método tomando números índice de “ 0 ' y ' 10 ” como parámetro. Después de eso, muestra el resultado a partir del ' 0 ” índice de la “ 10 ” índice.
Después de la ejecución del método anterior, la página web aparece así:
El resultado muestra que los datos de tipo de entrada tienen un valor predeterminado establecido en la fecha actual/hoy.
Método 3: Usar los métodos “getFullYear()” y “padStart()”
En esta sección, el “ obtenerAñoCompleto() El método ” extrae la fecha actual. El ' rutaInicio() Se utiliza el método 'que ayuda a formatear el' fecha ” formato que se mostrará en el objetivo “ aporte ' elemento:
< guion >constante actual = nueva fecha ( ) ;
const año-actual = actual.getFullYear ( ) ;
const mes-actual = Cadena ( actual.getMonth ( ) + 1 ) .padStart ( 2 , '0' ) ;
const día-actual = Cadena ( actual.getDate ( ) ) .padStart ( 2 , '0' ) ;
const formattedDate = ` ${año-actual} - ${mes-actual} - ${día-actual} ` ;
const myDateInput = document.getElementById ( 'mi cita' ) ;
myDateInput.value = formattedDate;
guion >
La descripción de los fragmentos de código anteriores se describe en viñetas:
- Primero, cree un tipo constante de variable que almacene el objeto del ' Fecha() ” constructor con el nombre “ actual ”.
- A continuación, utilice el ' obtenerAñoCompleto() ” método con el “ actual ” variable y almacenarlo en una nueva variable llamada “ año corriente ”.
- Luego, pase el “ obtenerMes() ” y agregue un número para comenzar el mes del 1 al 12 dentro del “ Cadena() ” constructor. También proporcione un relleno de dos caracteres utilizando ' rutaInicio(2, 0) ”. Y colóquelo en una variable recién creada llamada ' mes actual ”.
- A continuación, siga el mismo proceso para obtener la fecha actual utilizando el ' obtener la fecha() ” y guárdelo en el “ día actual ' variable.
Después de la ejecución de los fragmentos de código, la página web en cada caso aparece así:
El resultado muestra que los datos de tipo de entrada tienen un valor predeterminado establecido en la fecha actual/hoy.
Conclusión
Para establecer el valor predeterminado de la fecha del tipo de entrada a hoy/fecha actual, el ' valor como fecha ” propiedad, el “ aISOString() ' y ' obtenerAñoCompleto() Se pueden utilizar métodos. En el caso de la propiedad “valueAsDate”, solo el “ Fecha() Se necesita ” constructor mientras que en el caso de “ aISOString() ” métodos el “ substr() El método se utiliza para obtener solo una parte específica de la fecha. Este blog demuestra cómo establecer el valor predeterminado de la fecha del tipo de entrada en hoy/actual.