Introducción

A menudo nos encontramos con varios foros y sitios web donde necesitamos ingresar nuestra fecha de nacimiento o seleccionar una fecha para una cita por cualquier motivo, y aparece un ícono similar a un calendario justo frente a nuestros ojos. ¿Cómo y de dónde surge eso? Debe ser algún calendario específico y dinámico que nos reconozca y nos presente inteligentemente para seleccionar las fechas de nuestro deseo. Aquí es donde entra en juego React Date Picker. En este tutorial, aprenderemos todos estos métodos desde cero hasta un nivel avanzado sobre cómo se implementa en React y cómo se puede personalizar. Procedamos con la discusión.

El Reaccionar El selector de fecha es un componente útil y abundante que se utiliza para mostrar fechas utilizando el formato de diálogo del calendario. Por lo general, hay muchas opciones de selección de fechas disponibles en estos días. Todos ellos pueden tener diferentes aspectos técnicos y aplicaciones. En este tutorial, nos ocuparemos específicamente de React Date Picker. Para eso, necesitamos tener un paquete que muestre la hora y la fecha. Para una mejor comprensión, crearemos una aplicación que nos ayudará a comprender mejor React Date Picker. Pero, antes de eso, instalémoslo como se muestra en los pasos a continuación.

Instalación

Para instalar Date Picker para nuestra aplicación React, necesitamos tener Node.js preinstalado en nuestro sistema. Aunque no es importante tener siempre módulos de nodo, es muy recomendable descargarlos para que todas las dependencias se atiendan de manera eficiente. Por lo tanto, el comando para instalar React Date Picker se proporciona a continuación.

El paquete se puede instalar a través de npm:

objeto java

 npm install react-datepicker --save 

O vía Hilo:

 yarn add react-datepicker 

Puede surgir la necesidad de instalar React y sus Proptypes individualmente porque, sin estas dependencias, es imposible construir un React Date Picker. Además, es posible que necesitemos usar CSS de paquetes externos para que el Selector de fecha se vea visualmente genial. Para comenzar con nuestra aplicación, debemos importar el selector de fecha de React en nuestro archivo principal y debemos seguir revisándolo a través de la vista de React.

 import React, { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; // CSS Modules, react-datepicker-cssmodules.css // import 'react-datepicker/dist/react-datepicker-cssmodules.css'; const Example = () => { const [startDate, setStartDate] = useState(new Date()); return ( setStartDate(date)} /> ); }; 

Ejemplo de selector de fecha de reacción

Suponiendo que nuestro sistema está configurado con todos los requisitos de instalación y dependencias, aprenderemos cómo crear una aplicación React desde cero. Esta implementación se basa completamente en la aplicación de React datepicker.

En la discusión anterior, asumimos que hemos instalado React y PropTypes de forma independiente ya que estas dependencias no están incorporadas en el paquete en sí. Para continuar con los métodos de creación de nuestra aplicación, debemos seguir los pasos que se indican a continuación.

 npx create-react-app react-datepicker-app 

Muévase dentro de la carpeta del proyecto con el comando.

 cd react-datepicker-app 

Inicie la aplicación React.

 npm start 

Una vez iniciado el motor de Node, podemos verificar nuestra aplicación a través del puerto número 3000 del host local. Además, debemos incluir el fragmento de código que se proporciona a continuación en nuestro archivo app.js para que los componentes importantes para React Date Picker se importen a nuestro archivo.

 // app.js import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

Nuestra aplicación ahora se vería así.

cadena de concatenación en java

En el ejemplo codificado anterior, primero importamos los paquetes de Selector de fechas y Oreja en la plantilla de React. Luego, lo definimos para unir el manejar el cambio y enviar el Componente en el calendario de eventos. Estos eventos se activarán automáticamente cuando un usuario envíe o cambie los valores de entrada del selector de fecha. Más tarde, inicializamos el estado del formulario Datepicker con un nuevo Fecha() objeto dentro del constructor. Por último, iniciamos el Selector de fecha con la siguiente directiva para agregarle algunas propiedades.

Podemos visualizar el resultado en forma de un formato de selector de fechas centrado en el calendario. El selector de fecha anterior agrega propiedades personalizadas a los componentes de la aplicación React que se muestran arriba. Nos permite elegir las fechas en forma de meses, días, y años .

Además, para personalizar el selector de fechas, tenemos varios otros métodos, ya sea colorear los componentes o aplicar inteligentemente las funciones para seleccionar las fechas. También podemos personalizarlos fácilmente si tenemos componentes HTML y CSS relacionados con el archivo app.js.

Localizando el selector de fechas

Otro ejemplo que vamos a aprender es cómo localizar el selector de fecha. El selector de fecha que vamos a crear depende en gran medida de la internacionalización de date-fns. Esto se debe a que se utiliza para localizar los elementos que se exhibirán. Si necesitamos usar una configuración regional que no sea la predeterminada en-US, es posible que necesitemos importarla al proyecto desde date-fns.

Además, el inglés es la configuración regional predeterminada y consta de 3 métodos para configurar la configuración regional.

registrarse local (cadena, objeto): carga un objeto local importado desde date-fns.

Establecer configuración regional predeterminada (cadena): establece una configuración regional registrada como predeterminada para todas las instancias del selector de fechas.

método tostring en java

getDefaultLocale: devuelve una cadena que muestra la configuración regional predeterminada actualmente configurada.

Podemos importar estos servicios a la configuración regional de la vista de calendario usando el siguiente fragmento de código.

 import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) 

Al importar y guardar estos servicios locales en nuestro archivo app.js, nuestra aplicación se verá así.

En otro caso, para cambiar las configuraciones regionales, necesitamos cambiar principalmente el código local o usar la internacionalización de date-fns para que se pueda admitir la revisión del código.

 setDefaultLocale('es') 

Configuración del rango de fechas del calendario en Datepicker.

Aprenderemos cómo implementar la funcionalidad de rango usando la fecha min y propiedad maxDate en este paso. Para ello importamos el addDays AP yo de la fecha-fns biblioteca en la parte superior de nuestro componente React. Agregará la cantidad específica de días a la fecha asignada para establecer el rango.

 import addDays from 'date-fns/addDays' 

El agregarDías() El método generalmente toma dos parámetros:

Fecha: La fecha que necesita ser actualizada.

Cantidad: Era necesario incluir la importante cantidad de días.

Podemos establecer fácilmente el rango de fechas desde el actual hasta los próximos siete días en el calendario de React. Esto se puede entender cuando implementamos el minFecha y fecha máxima métodos en el código de ejemplo que se muestra a continuación.

 render() { return ( Show Date ); } 

A continuación se muestra el fragmento de código completo de nuestra aplicación después de implementar todos los pasos indicados anteriormente.

 import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import addDays from 'date-fns/addDays' import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

En el fragmento de ejemplo anterior, hemos hecho minFecha como componente de registro, y el usuario solo puede elegir la fecha anterior a hoy. Hemos utilizado el valor de fecha para el componente de salida, lo que significa que el usuario no puede elegir una fecha anterior a la fecha de entrada.

En el siguiente paso, guardaremos el valor de nuestro estado y definiremos cómo funciona cada identificador. La idea principal es implementarlo simplemente creando un estado para cada registrarse y verificar fecha con los valores definidos y guardando los datos allí. La única diferencia radica en la minFecha método del componente de salida, ya que depende únicamente del componente de entrada. Así, asegurándonos de que todo esté configurado en términos de valores ni antes ni después, ahora podemos seleccionar fácilmente las fechas y definir el check-out.

Conclusión

En este tutorial, hemos podido seguir una sencilla guía paso a paso sobre cómo crear un componente React Datepicker personalizado que se puede usar fácilmente como reemplazo del nativo. selector de fechas HTML5 elementos de entrada. Hemos aprendido cómo configurar la aplicación React con prioridad porque renderizar los componentes de React puede parecer complejo para los principiantes, por lo que un principiante siempre preferirá configurar dependencias. También encontramos varios ejemplos para establecer un concepto muy claro sobre el uso de los componentes de Datepicker en nuestra aplicación. También aprendimos sobre el proceso de localización del selector de fechas para que el proceso de selección de fechas no cause un problema si se seleccionan por una duración específica en el calendario.

cadena.reemplazar todo java

Aunque el selector de fechas personalizado creado en este tutorial funciona como se esperaba, no cumple con todos los requisitos avanzados para un elemento selector de fechas. Se pueden realizar más mejoras, como implementar el máximo y el mínimo mediante accesorios, cambiar el tipo de entrada de texto a fecha y establecer una mejor mejora de la accesibilidad. También podemos desarrollar métodos de diseño para el selector de fechas que implementamos en este tutorial importando paquetes Bootstrap y agregando estilos personalizados y propiedades de desplazamiento para que se vea mejor.