Selector de rango

Un selector de rango de fecha y hora construido sobre la API Temporal. Admite modos de solo fecha y de fecha con hora, tiene en cuenta la zona horaria, permite escribir con el teclado y ofrece un posicionamiento flexible del popup.

Instalación

npm install @dayflow/ui-range-picker

pnpm add @dayflow/ui-range-picker

yarn add @dayflow/ui-range-picker

bun add @dayflow/ui-range-picker

En proyectos que ya usan Tailwind CSS, importa el bundle de solo componentes:

@import '@dayflow/ui-range-picker/dist/styles.components.css';
@import 'tailwindcss';

En proyectos sin Tailwind CSS, importa en su lugar la hoja de estilos completa:

import { RangePicker } from '@dayflow/ui-range-picker';
import '@dayflow/ui-range-picker/dist/styles.css';

Uso básico

import { useState } from 'react';
import { Temporal } from 'temporal-polyfill';
import { RangePicker } from '@dayflow/ui-range-picker';
import type { ZonedRange } from '@dayflow/ui-range-picker';

function MyComponent() {
  const [range, setRange] = useState<ZonedRange>([
    Temporal.Now.zonedDateTimeISO(),
    Temporal.Now.zonedDateTimeISO().add({ hours: 1 }),
  ]);

  return <RangePicker value={range} onChange={value => setRange(value)} />;
}

Modo de solo fecha

Pasa showTime={false} para ocultar el selector de hora.

<RangePicker
  value={range}
  showTime={false}
  format='YYYY-MM-DD'
  onChange={value => setRange(value)}
/>

Con zona horaria

<RangePicker
  value={range}
  timeZone='America/New_York'
  onChange={(value, dateStrings) => {
    console.log('range:', value);
    console.log('formatted:', dateStrings); // ['2024-10-15 10:00', '2024-10-15 11:00']
  }}
/>

Formato de hora propio

<RangePicker
  value={range}
  format='MM/DD/YYYY'
  showTime={{ format: 'hh:mm A' }}
  onChange={value => setRange(value)}
  onOk={value => saveToBackend(value)}
/>

El popup se sitúa por defecto en bottomLeft y se ajusta automáticamente para no salirse de la ventana.

<RangePicker
  value={range}
  placement='topRight'
  autoAdjustOverflow={true}
  onChange={value => setRange(value)}
/>

Configuración regional

Pasa una cadena de locale BCP 47 para traducir los nombres de mes y las etiquetas de los días.

<RangePicker value={range} locale='zh-CN' onChange={value => setRange(value)} />

Para traducir las etiquetas propias del selector (botones de navegación, campos de inicio y fin, listas de horas y minutos y el botón de confirmar), pasa un objeto locale con messages. Las claves que falten recurren al inglés. El panel y el diálogo de eventos integrados en el calendario las rellenan automáticamente a partir de la locale del calendario.

<RangePicker
  value={range}
  locale={{
    code: 'es-ES',
    messages: {
      previousYear: 'Año anterior',
      previousMonth: 'Mes anterior',
      nextMonth: 'Mes siguiente',
      nextYear: 'Año siguiente',
      startDate: 'Fecha de inicio',
      endDate: 'Fecha de fin',
      hour: 'Hora',
      minute: 'Minuto',
      ok: 'Aceptar',
    },
  }}
  onChange={value => setRange(value)}
/>

Con calendarSystem='jalali' las fechas se muestran y escriben en el calendario persa. onChange y onOk siguen devolviendo valores Temporal ISO.

Ajustar al ancho del disparador

<RangePicker
  value={range}
  matchTriggerWidth
  onChange={value => setRange(value)}
/>

Referencia de la API

`RangePicker`

Prop	Tipo	Valor por defecto	Descripción
`value`	`[Temporal.PlainDate \| PlainDateTime \| ZonedDateTime, ...]`	—	Valor del rango en modo controlado. Admite cualquier combinación de tipos Temporal.
`format`	`string`	`"YYYY-MM-DD"`	Formato de visualización y de análisis de la parte de fecha
`showTime`	`boolean \| { format?: string }`	`true`	Activa la selección de hora. Pasa un objeto para definir un formato propio.
`showTimeFormat`	`string`	`"HH:mm"`	Formato de hora predeterminado cuando `showTime` es `true`
`onChange`	`(value: ZonedRange, dateString: [string, string]) => void`	—	Se dispara en cada cambio de selección
`onOk`	`(value: ZonedRange, dateString: [string, string]) => void`	—	Se dispara cuando el usuario confirma la selección con el botón OK
`timeZone`	`string`	—	Cadena de zona horaria IANA (por ejemplo, `"America/New_York"`). Por defecto, la del sistema.
`disabled`	`boolean`	`false`	Desactiva toda interacción
`placement`	`'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'`	`'bottomLeft'`	Posición preferida del popup
`autoAdjustOverflow`	`boolean`	`true`	Invierte la posición automáticamente si el popup se saldría de la ventana
`getPopupContainer`	`() => HTMLElement`	—	Monta el popup dentro de un contenedor propio en lugar de en `document.body`
`matchTriggerWidth`	`boolean`	`false`	Ajusta el ancho del popup al del campo que lo abre
`locale`	`string \| { code: string; messages?: Record<string, string> }`	`'en-US'`	Código de locale BCP 47; con un objeto, `messages` traduce las etiquetas del selector
`calendarSystem`	`'gregorian' \| 'jalali'`	`'gregorian'`	Calendario usado para mostrar e interpretar las fechas

`ZonedRange`

type ZonedRange = [Temporal.ZonedDateTime, Temporal.ZonedDateTime];

Los callbacks onChange y onOk siempre reciben un ZonedRange, sea cual sea el tipo del valor de entrada, normalizado a la zona horaria activa.

En esta página