EditableDateField

EditableDateField muestra una fecha en un input de solo lectura. Al hacer clic en el ícono de edición se habilita el selector de fecha (<input type="date">), permitiendo al usuario elegir una nueva fecha. Soporta restricciones opcionales de fecha mínima y máxima. Al guardar, la cadena de fecha ISO (YYYY-MM-DD) se persiste mediante la API.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | name | string | Sí | — | Nombre del campo enviado como clave en el payload de actualización. | | value | string | No | "" | Valor de fecha actual en formato YYYY-MM-DD. | | updatePath | string | Sí | — | Ruta del endpoint API para persistir el cambio. | | label | string | No | — | Etiqueta mostrada sobre el input de fecha. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | placeholder | string | No | — | Placeholder dentro del input. | | minDate | string | No | — | Fecha mínima seleccionable en formato YYYY-MM-DD. | | maxDate | string | No | — | Fecha máxima seleccionable en formato YYYY-MM-DD. | | apiBaseUrl | string | No | — | URL base que se antepone a updatePath. | | useAuthToken | boolean | No | false | Cuando es true, el request incluye el token de autorización. | | onEditStart | () => void | No | — | Llamado cuando comienza el modo edición. | | onEditSuccess | (updatedValue: string, newFormData: any) => void | No | — | Llamado tras un guardado exitoso. | | onEditError | (error: any) => void | No | — | Llamado al fallar el request; el valor se revierte. | | onEditCancel | () => void | No | — | Llamado al cancelar; el valor se revierte. | | editIcon | string | No | "pencil" | Nombre del ícono para el botón de edición. | | saveIcon | string | No | "check" | Nombre del ícono para el botón de guardar. | | cancelIcon | string | No | "close" | Nombre del ícono para el botón de cancelar. | | containerStyle | React.CSSProperties | No | — | Estilo del contenedor externo. | | inputStyle | React.CSSProperties | No | — | Estilo del elemento <input>. | | labelStyle | React.CSSProperties | No | — | Estilo del elemento <label>. | | descriptionStyle | React.CSSProperties | No | — | Estilo del <p> de descripción. |

Uso

Básico

import React, { useState } from 'react';
import EditableDateField from '@/components/editable-fields/EditableDateField';

export default function Example() {
  const [birthdate, setBirthdate] = useState('1990-06-15');

  return (
    <EditableDateField
      label="Date of Birth"
      name="birthdate"
      value={birthdate}
      updatePath="/v1/users/42"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setBirthdate(updated)}
    />
  );
}

Con restricciones de fecha

<EditableDateField
  label="Expiry Date"
  name="expiry_date"
  value={expiryDate}
  minDate="2024-01-01"
  maxDate="2030-12-31"
  updatePath="/v1/subscriptions/10"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditSuccess={(updated) => setExpiryDate(updated)}
/>