¿Cómo puedo borrar la entrada del selector de fecha y hora MUI?

Me gustaría agregar un botón “limpiar” a un DatePicker de @mui/lab (5.0.0-alpha.55).

Lo que estoy intentando hacer:
– Almacenar un campo date en estado, pasado como la propiedad value al DatePicker.
– Cambiar el date a null cuando se desee “limpiar” el valor y el input.

El comportamiento que observo:
– Si el date es válido, funciona como se espera y el input se limpia.
– Si el date no es válido, se elimina el error, pero la fecha inválida todavía se queda en el input.

Puede ver la versión rudimentaria que he intentado, que muestra el comportamiento anterior, en este enlace: https://codesandbox.io/s/clearable-date-picker-forked-b0co7?file=/src/App.tsx

Si ingresa una fecha parcial y luego hace clic en “limpiar”, puede observar que el input no se limpia.

Preferiría evitar una solución que implique cambiar la key, ya que eso trae otros problemas, como no respetar una fuente externa que cambia el date a null, y necesitar trucos adicionales para respetar la transición de label al limpiar el input.

davy.ai

May 27, 2023 at 7:46 am

Para agregar un botón de ‘borrar’ a un DatePicker de @mui/lab (5.0.0-alpha.55), puedes seguir estos pasos:

Crea una variable de estado para guardar la fecha seleccionada, por ejemplo, const [selectedDate, setSelectedDate] = useState<date |="" null="">(null);
Pasa selectedDate como propiedad value al DatePicker.
Renderiza un componente Button al lado del DatePicker que desencadena una función handleDateClear cuando se hace clic en él.
En la función handleDateClear, restablece la variable de estado selectedDate a null.

Aquí hay un ejemplo de implementación:

import React, { useState } from 'react';
import { DatePicker, Button } from '@mui/lab';

function ClearableDatePicker() {
  const [selectedDate, setSelectedDate] = useState<date |="" null="">(null);

  const handleDateClear = () => {
    setSelectedDate(null);
  };

  return (
    <>
      <datepicker value="{selectedDate}" renderinput="{(params)" ==""> <textfield {...params}=""></textfield>} />
      <button onclick="{handleDateClear}">Borrar</button>

  );
}

Ten en cuenta que esta implementación no resuelve el problema de que las fechas inválidas todavía permanezcan en la entrada después de borrarlas, ya que es un problema conocido del componente DatePicker en @mui/lab.

Answer

davy.ai

May 27, 2023 at 7:46 am
Para agregar un botón de ‘borrar’ a un DatePicker de @mui/lab (5.0.0-alpha.55), puedes seguir estos pasos:
1. Crea una variable de estado para guardar la fecha seleccionada, por ejemplo, const [selectedDate, setSelectedDate] = useState<date |="" null="">(null);
2. Pasa selectedDate como propiedad value al DatePicker.
3. Renderiza un componente Button al lado del DatePicker que desencadena una función handleDateClear cuando se hace clic en él.
4. En la función handleDateClear, restablece la variable de estado selectedDate a null.
Aquí hay un ejemplo de implementación:
```
import React, { useState } from 'react';
import { DatePicker, Button } from '@mui/lab';

function ClearableDatePicker() {
  const [selectedDate, setSelectedDate] = useState<date |="" null="">(null);

  const handleDateClear = () => {
    setSelectedDate(null);
  };

  return (
    <>
      <datepicker value="{selectedDate}" renderinput="{(params)" ==""> <textfield {...params}=""></textfield>} />
      <button onclick="{handleDateClear}">Borrar</button>

  );
}
```
Ten en cuenta que esta implementación no resuelve el problema de que las fechas inválidas todavía permanezcan en la entrada después de borrarlas, ya que es un problema conocido del componente DatePicker en @mui/lab.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo borrar la entrada del selector de fecha y hora MUI?

Answer

davy.ai