1

Me surge este error al darle al boton de Clear en el DatePicker del <input type="date">.

RangeError: Invalid time value

/// components/test/BookingCalendars.tsx

/// Global
import React from 'react';
import styles from '@styles/pages/ProductPage.module.css';

interface BookingCalendarsProps {
  startDate: Date;
  endDate: Date;
  setStartDate: (value: Date) => void;
  setEndDate: (value: Date) => void;
}

/// Fecha mínima
export const minDefaultStartDate = () => {
  const date = new Date();
  date.setDate(date.getDate() + 1); // 24 horas

  return toISOString(date);
  // return date;
};

/// Format String to Date
export function toDate(value: Date | string): Date {
  if (value instanceof Date) {
    return value;
  }
  return new Date(value);
}

/// Format Date to String
const toISOString = (date: Date): string => {
  return date.toISOString().split('T')[0];
  // return date.toISOString();
  // return date.toString();
};

/// Component
const BookingCalendars = ({
  startDate = toDate(minDefaultStartDate()),
  endDate = toDate(minDefaultEndDate()),
  setStartDate,
  setEndDate,
}: BookingCalendarsProps) => {
  return (
    <div className={styles.calendarContainer}>
      {/* Start Date */}
      {/* <label htmlFor="start">Inicio</label> */}
      <label className={styles.calendarLabel}>
        <span className={styles.calendarLabelTag}>Inicio</span>
        <input
          type="date"
          id="start"
          name="trip-start"
          value={toISOString(startDate)}
          defaultValue={toISOString(startDate)}
          min={minDefaultStartDate()}
          max={maxDate()}
          onChange={(e) => setStartDate(toDate(e.target.value))}
          required
          className={styles.calendarInput}
        />

        {/* Icono validez */}
        <span className="validity"></span>
      </label>
      ...

Donde se recibe el estado

/// components/test/ProductTypeBooking.tsx

import React, { useEffect, useState } from 'react';
import BookingCalendars, {
  minDefaultStartDate,
  minDefaultEndDate,
  toDate,
} from '@/components/test/01/BookingCalendars';

/// Componente
const ProductTypeBooking = ({ product }: ProductTypeBookingProps) => {
  /// States: Dates
  const [startDate, setStartDate] = useState<Date>(
    toDate(minDefaultStartDate()),
  );
  const [endDate, setEndDate] = useState<Date>(toDate(minDefaultEndDate()));

  ...

Quiero entender que es por que al resetear el valor, no recibe uno en formato "2024-09-06T00:00:00.000Z". Es la parte del "onChange" (al resetear) la que lanza el error.

¿Que opción tengo para mantener el estilo? Pues si elimino el formateo de .toISOString().split('T')[0] no engancho el primer valor (YYYY-MM-DD) para pasarselo al input y que haga preview.

Preview del input y <pre>{JSON.stringify(startDate, null, 2)}</pre>

He estado buscando incluso, la opción de mediante CSS ocultar el boton de "Clear" (Esto también resolvería el problema). Pero no he encontrado nada referente, ni como podría llegar a estilar mediante css el "DatePicker" del <input type="date">.

1
  • He comentado los "defaultValue" // defaultValue={toISOString(endDate)} Por que dice: Warning: BookingCalendars contains an input of type date with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: reactjs.org/link/controlled-components Aún así, sigo teniendo el error al darle al "Clear" del "DatePicker".
    – ViunD
    Commented el 7 sept. a las 15:20

1 respuesta 1

1

Esto ocurre porque JavaScrpit es divertido operando con fechas. Estás intentando operar con una fecha que no es válida, JavaScript lo procesa como fecha con valor "Fecha Inválida" (o en inglés "Invalid Date") y eso hace que todo acabe fallando.

Este es el flujo del programa:

  1. Seleccionas una fecha
  2. React llama al hook de estado setStartDate porque ha cambiado el campo
    • Nota que antes de llamar a setStartDate se procesa la cadena que es el campo para transformarlo en fecha usando toDate (aquí empieza el problema)
  3. Se actualiza el valor de startDate
  4. El componente se re-renderiza
  5. Se llama a la función toISOString para formatear startDate y convertirlo a cadena
  6. El valor resultante se asigna al input

Esto funciona de maravilla si has seleccionado una fecha en el popup, pero ¿qué pasa si seleccionas borrar la fecha? (el Clear). Pues bien, en ese caso, el valor del campo se limpia (paso 1) y, como es una cadena, se convierte en la cadena vacía ("").

Cuando llamas a toDate con una cadena vacía, lo que hace es devolver una fecha inválida. Y esta parte es importante: no devuelve null o un error o excepción, devuelve un objeto de tipo Date con el valor Invalid Date que se asigna a startDate (pasos 2 y 3).

El componente se re-renderiza (paso 4) y se asigna el valor al input con el resultado de la función toISOString y el parámetro startDate. Pero aquí está el problema: cuando es una fecha inválida, no se puede convertir a ISO porque el formato no es correcto.

Una posible solución sería modificar la función toISOString para que, si la fecha es válida, devuelve la fecha formateada y si no, devuelva la cadena vacía.

En Stack Overflow en inglés compartieron un método ingenioso para identificar si una fecha es válida. Puedes aplicarlo en la función toISOString y ya no deberías tener problemas:

const validDate = date => !isNaN(new Date(date).getTime());


// Format Date to String
const toISOString = (date: Date): string => {
  return validDate(date) ? date.toISOString().split('T')[0] : '';
};

Alternativamente, en lugar de devolver la cadena vacía, podrías devolver el valor por defecto. Pero, ¡cuidado! si haces esto, hazlo con precaución porque tus usuarios esperarán que el valor se borre cuando le dan al botón de "Clear" (porque es el comportamiento por defecto). Quizás sería bueno que añadieses una nota visual indicando que el valor se reseteó al original o algo por el estilo. Pero eso ya es otra historia.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.