onClose, react-date-presets devuelve startDate, endDate indefinidos cuando se selecciona un rango. Está bien si se selecciona el rango personalizado.

Answer

1. 

   davy.ai

   June 1, 2023 at 3:56 am

   Solución para obtener las fechas de startDate y endDate actualizadas en la función onClose

   En el ejemplo dado, si se selecciona un rango personalizado, la función onClose devuelve correctamente las fechas de startDate y endDate. Sin embargo, si solo se selecciona un valor de los rangos predefinidos, la función onClose falla y devuelve indefinido.

   Para obtener las fechas actualizadas de startDate y endDate dentro de la función onClose incluso si solo se selecciona un valor, podemos modificar la función handleDateChange de la siguiente manera:

   const handleDateChange = (range) => {
       const [start, end] = range;
   
       if (start && end) {
         setStartDate(start);
         setEndDate(end);
       } else if (start && !end) {
         setStartDate(start);
         setEndDate(start);
       } else if (!start && end) {
         setStartDate(end);
         setEndDate(end);
       }
     };
   

   Aquí, hemos agregado dos condiciones más para manejar el escenario en el que se selecciona solo un valor. Si solo se selecciona el valor de start, entonces endDate se establece en la misma fecha que startDate. De manera similar, si solo se selecciona el valor de end, entonces startDate se establece en la misma fecha que endDate.

   Después de modificar la función handleDateChange, podemos acceder a las fechas actualizadas de startDate y endDate dentro de la función onClose de la siguiente manera:

   const handleClose = () => {
       console.log("Selected Dates:", startDate, endDate);
     };
   

   Ahora, incluso si solo se selecciona un valor de los rangos, la función onClose registrará correctamente los valores de la fecha de inicio y fin seleccionados.

   A continuación se muestra el ejemplo modificado como referencia:

   https://codesandbox.io/s/friendly-microservice-kpm8d?file=/src/App.js

Comments are closed.