Me surge este error al darle al boton de Clear en el DatePicker del <input type="date">
.
/// 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.
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">
.