orn-ui
← Todos los componentes
Ver como Markdown
Organism

DatePicker

Requiere <UIProvider> — Primeros pasos →

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add date-picker

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { DatePicker } from 'orn-ui/date-picker';
Depende de:core (theme + icons)icon-buttonpressable-scale

Uso

  • cuándo usarlo — Un calendario inline. Para elegir una fecha desde un formulario, DateField envuelve a este en un campo.
  • mode — `single` elige una fecha; `range` elige un intervalo con dos toques.
  • minDate / maxDate — Acotan la selección en vez de validar después.
  • monthNames / weekdayNames — Localización: el componente no trae traducciones propias.
  • firstDayOfWeek — `0` domingo, `1` lunes — una decisión regional, no estética.
Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

Inline calendar

<DatePicker value={date} onChange={setDate} />

mode="range" — tap start, then end

<View style={{ gap: 8 }}>
  <DatePicker mode="range" range={range} onRangeChange={setRange} />
  <Caption>
    {range?.start
      ? `${range.start.toDateString()} → ${range.end ? range.end.toDateString() : '…'}`
      : 'No range selected'}
  </Caption>
</View>

mode="range" + minDate/maxDate

<DatePicker mode="range" range={range} onRangeChange={setRange} minDate={today} maxDate={inAMonth} />

minDate / maxDate (next 7 days only)

<DatePicker value={ranged} onChange={setRanged} minDate={today} maxDate={inAWeek} />

Week starts on Monday

<DatePicker value={date} onChange={setDate} firstDayOfWeek={1} />

Localized month/weekday names

<DatePicker
  value={date}
  onChange={setDate}
  monthNames={SPANISH_MONTHS}
  weekdayNames={SPANISH_WEEKDAYS}
  firstDayOfWeek={1}
/>
Código completo del demo
const variants: VariantDef[] = [
  {
    label: 'Inline calendar',
    content: <DatePicker value={date} onChange={setDate} />,
  },
  {
    label: 'mode="range" — tap start, then end',
    content: (
      <View style={{ gap: 8 }}>
        <DatePicker mode="range" range={range} onRangeChange={setRange} />
        <Caption>
          {range?.start
            ? `${range.start.toDateString()} → ${range.end ? range.end.toDateString() : '…'}`
            : 'No range selected'}
        </Caption>
      </View>
    ),
  },
  {
    label: 'mode="range" + minDate/maxDate',
    content: <DatePicker mode="range" range={range} onRangeChange={setRange} minDate={today} maxDate={inAMonth} />,
  },
  {
    label: 'minDate / maxDate (next 7 days only)',
    content: <DatePicker value={ranged} onChange={setRanged} minDate={today} maxDate={inAWeek} />,
  },
  {
    label: 'Week starts on Monday',
    content: <DatePicker value={date} onChange={setDate} firstDayOfWeek={1} />,
  },
  {
    label: 'Localized month/weekday names',
    content: (
      <DatePicker
        value={date}
        onChange={setDate}
        monthNames={SPANISH_MONTHS}
        weekdayNames={SPANISH_WEEKDAYS}
        firstDayOfWeek={1}
      />
    ),
  },
  {
    label: 'DateField — input that opens the calendar',
    content: <DateField label="Due date" value={fieldDate} onChange={setFieldDate} maxDate={inAMonth} />,
  },
  {
    label: 'DateField — custom format',
    content: (
      <DateField
        label="ISO format"
        value={fieldDate}
        onChange={setFieldDate}
        format={(d) => d.toISOString().slice(0, 10)}
      />
    ),
  },
  {
    label: 'DateField — onClear renders the clear button',
    content: (
      <DateField
        label="Due date"
        value={fieldDate}
        onChange={setFieldDate}
        onClear={() => setFieldDate(undefined)}
      />
    ),
  },
  {
    label: 'DateField — mode="range", closes when the range closes',
    content: <DateField label="Stay" mode="range" range={fieldRange} onRangeChange={setFieldRange} />,
  },
  {
    label: 'DateField — required + error',
    content: <DateField label="Due date" required onChange={() => {}} error="Pick a date to continue" />,
  },
  {
    label: 'DateField — disabled',
    content: <DateField label="Locked" value={today} onChange={() => {}} disabled />,
  },
];
return <VariantList variants={variants} />;

Props

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

NombreTipoPor defectoDescripción
mode?'single' | 'range'single'single' elige una fecha; 'range' elige un intervalo con dos toques.
value?Date—Fecha seleccionada en mode="single".
onChange?(date: Date) => void—Se llama en mode="single".
range?DateRange—Rango seleccionado en mode="range".
onRangeChange?(range: DateRange) => void—Se llama en mode="range", tanto al fijar el inicio como al cerrar el rango.
minDate?Date——
maxDate?Date——
defaultMonth?DatetodayMes mostrado al abrir si no hay `value`.
monthNames?string[]those from `useLabels()`Nombres de los meses.
weekdayNames?string[]those from `useLabels()`Iniciales de los días, índice 0 = domingo.
firstDayOfWeek?0 | 100 = domingo, 1 = lunes.
onVisibleMonthChange?(month: Date) => void—Avisa qué mes quedó a la vista al navegar con las flechas.
style?StyleProp<ViewStyle>——
AnteriorDateFieldSiguienteList