DatePicker - Design System

Selector de data amb suport per tema clar/fosc, estats hover/focus i accessibilitat completa. Utilitza l'element natiu HTML5 date input per màxima compatibilitat.

DatePicker bàsic

Selector de data en la seva forma més simple amb valor per defecte.

Data seleccionada: Cap data seleccionada

DatePicker personalitzat

DatePicker amb valor inicial personalitzat i ID específic.

Data personalitzada: 2024-06-15

DatePicker desactivat

DatePicker en estat desactivat per mostrar l'estat disabled.

Aquest selector està desactivat

Propietats disponibles

Totes les propietats que accepta el component DatePicker.

Props del DatePicker:

  • value?: string - Valor controlat en format yyyy-mm-dd
  • defaultValue?: string - Valor per defecte en format yyyy-mm-dd
  • onChange?: (value: string, date: Date) => void - Callback quan canvia la data
  • label?: string - Etiqueta del camp
  • showLabel?: boolean - Mostrar l'etiqueta (per defecte: true)
  • dataTestId?: string - ID per a testing (per defecte: "date-picker")
  • error?: string - Missatge d'error
  • helpText?: string - Text d'ajuda
  • min?: string - Data mínima permesa
  • max?: string - Data màxima permesa
  • disabled?: boolean - Estat desactivat (per defecte: false)
  • required?: boolean - Camp obligatori (per defecte: false)