EditableDateTimeField

EditableDateTimeField combina la selección de fecha y hora en un único campo editable inline. En modo lectura la cadena ISO actual se muestra en un input deshabilitado. Al hacer clic en el ícono de edición se activa un selector datetime-local. Soporta límites opcionales de mínimo y máximo. Al guardar, la cadena de fecha y hora ISO 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 | — | Fecha y hora actual en formato ISO (ej. "2024-06-15T14:30"). | | updatePath | string | Sí | — | Ruta del endpoint API para persistir el cambio. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | minDateTime | string | No | — | Fecha y hora mínima seleccionable (YYYY-MM-DDTHH:mm). | | maxDateTime | string | No | — | Fecha y hora máxima seleccionable (YYYY-MM-DDTHH:mm). | | 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 EditableDateTimeField from '@/components/editable-fields/EditableDateTimeField';

export default function Example() {
  const [scheduledAt, setScheduledAt] = useState('2024-09-01T09:00');

  return (
    <EditableDateTimeField
      label="Scheduled At"
      name="scheduled_at"
      value={scheduledAt}
      updatePath="/v1/events/15"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setScheduledAt(updated)}
    />
  );
}

Con restricciones

<EditableDateTimeField
  label="Meeting Time"
  name="meeting_at"
  value={meetingAt}
  minDateTime="2024-01-01T08:00"
  maxDateTime="2024-12-31T20:00"
  updatePath="/v1/meetings/3"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditSuccess={(updated) => setMeetingAt(updated)}
/>