# Date & Time Components

> **Props y API:** Disponibles vía MCP tool `widgets-get-component-props`. Este archivo documenta solo convenciones, gotchas y patrones específicos del proyecto.

---

## DDatePicker

Wraps `react-datepicker`. For full react-datepicker docs, see the upstream library.

### ⚠️ CRITICAL: Store Dates as ISO Strings, Not Date Objects

DDatePicker works with **Date objects**, but store as **ISO strings** in state/Zustand.

```tsx
const [dateStr, setDateStr] = useState<string>('');

<DDatePicker
  inputId="birthDate"
  inputLabel="Date of Birth"
  selected={dateStr ? new Date(dateStr) : null}                    // String → Date
  onChange={(date: Date | null) => {
    setDateStr(date ? date.toISOString().split('T')[0] : '');      // Date → String
  }}
  dateFormat="yyyy-MM-dd"
/>
```

### ❌ Common Mistakes

```tsx
// ❌ Storing Date object (not serializable in Zustand)
setDate(new Date());

// ✅ Store ISO string
setDate(new Date().toISOString().split('T')[0]);  // "2025-10-16"

// ❌ Passing string to selected
<DDatePicker selected={dateString} />

// ✅ Convert to Date
<DDatePicker selected={new Date(dateString)} />

// ❌ Full ISO with timezone
onChange={(date) => setDate(date.toISOString())}  // "2025-10-16T04:00:00.000Z"

// ✅ Date-only string
onChange={(date) => setDate(date.toISOString().split('T')[0])}  // "2025-10-16"
```

For birth dates, add `showYearDropdown`, `scrollableYearDropdown`, `yearDropdownItemNumber={100}`, `showMonthDropdown`, and `maxDate` for age constraints.