@wecareu/date-picker

Seletor de data com calendário visual cross-platform para o design system WeCareU. Funciona de forma idêntica em iOS, Android e Web sem distinção de plataforma. Suporta seleção de data única, intervalo de datas (range) e múltiplas datas.

Instalação

yarn add @wecareu/date-picker

Peer dependencies

yarn add @wecareu/icons @wecareu/theme @wecareu/tokens

Uso básico

import { DatePicker } from '@wecareu/date-picker'

// Data única
<DatePicker
  mode="single"
  value={date}
  onChangeValue={setDate}
  label="Data de nascimento"
/>

// Intervalo de datas
<DatePicker
  mode="range"
  value={range}
  onChangeValue={setRange}
  label="Período"
/>

// Múltiplas datas
<DatePicker
  mode="multiple"
  value={dates}
  onChangeValue={setDates}
  label="Dias disponíveis"
/>

Modos de operação

| Mode | Tipo do value | Tipo do onChangeValue | |------|---------------|-----------------------| | single | string \| undefined | (value: string \| undefined) => void | | range | { start: string; end: string } \| undefined | (value: { start: string; end: string } \| undefined) => void | | multiple | string[] | (value: string[]) => void |

Todos os valores são em formato ISO 8601 (YYYY-MM-DD ou YYYY-MM-DDTHH:mm:ss quando withTime=true).

Props

Comuns a todos os modos

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | mode | 'single' \| 'range' \| 'multiple' | 'single' | Modo de seleção | | variant | 'field' \| 'bare' | 'field' | field: estilo InputText com borda. bare: sem decoração | | withTime | boolean | false | Habilita seleção de hora e minuto | | label | string | — | Label acima do campo (variant='field') | | placeholder | string | 'Selecionar data' | Texto exibido quando vazio | | disabled | boolean | false | Bloqueia interação | | readonly | boolean | false | Somente leitura | | minDate | string | — | Data mínima permitida (ISO 8601) | | maxDate | string | — | Data máxima permitida (ISO 8601) | | disabledDates | string[] | [] | Datas individuais bloqueadas (ISO 8601) | | style | StyleProp<ViewStyle> | — | Estilo do container | | testID | string | — | Identificador para testes |

Variantes visuais

variant='field' (padrão)

Visualmente idêntico ao InputText: borda, border radius, padding e label flutuante. Exibe ícone de calendário quando vazio e ícone de limpar (×) quando há valor selecionado.

variant='bare'

Sem borda, sem background, sem padding. Apenas o texto da data com ícone inline. Indicado para uso dentro de cards, cabeçalhos ou contextos com layout próprio.

Exibição do valor (pt-BR)

| Situação | Exibição | |----------|---------| | Data única | 31/12/2025 | | Data + hora | 31/12/2025 14:30 | | Range | 01/12/2025 → 31/12/2025 | | 1 data (multiple) | 01/12/2025 | | N datas (multiple) | 3 datas selecionadas |

Exemplos

// Data única com limite máximo
<DatePicker
  mode="single"
  value={birthDate}
  onChangeValue={setBirthDate}
  label="Data de nascimento"
  maxDate="2025-12-31"
/>

// Range com data mínima
<DatePicker
  mode="range"
  value={period}
  onChangeValue={setPeriod}
  label="Período da viagem"
  minDate="2025-01-01"
/>

// Múltiplas com feriados bloqueados
<DatePicker
  mode="multiple"
  value={availableDates}
  onChangeValue={setAvailableDates}
  label="Dias disponíveis"
  disabledDates={['2025-12-25', '2026-01-01']}
/>

// Com hora
<DatePicker
  mode="single"
  value={appointment}
  onChangeValue={setAppointment}
  label="Data e hora da consulta"
  withTime
/>

// Sem decoração (bare), dentro de um card
<DatePicker
  mode="single"
  variant="bare"
  value={filterDate}
  onChangeValue={setFilterDate}
/>

// Desabilitado
<DatePicker
  mode="single"
  value="2025-12-31"
  onChangeValue={() => {}}
  disabled
  label="Data de vencimento"
/>

Comportamento do calendário

O calendário é um componente visual customizado, implementado apenas com primitivos React Native (Modal, Pressable, View, Text). Não depende de bibliotecas nativas externas, garantindo comportamento idêntico em iOS, Android e Web.

• Navegação: botões ‹ e › navegam entre meses
• Seleção single: toque em um dia seleciona e fecha o modal imediatamente
• Seleção range: 1° toque define o início, 2° toque define o fim com banda visual de destaque
• Seleção multiple: toque em um dia o adiciona ou remove da lista; botão "Confirmar" fecha o modal
• Datas bloqueadas: exibidas com opacidade reduzida e não clicáveis
• Seleção de hora (withTime=true): após selecionar a(s) data(s), exibe seletores de hora e minuto com botões ▲ / ▼

Formato dos valores

Todos os valores retornados estão em ISO 8601:

// single sem withTime
onChangeValue("2025-12-31")

// single com withTime
onChangeValue("2025-12-31T14:30:00")

// range
onChangeValue({ start: "2025-12-01", end: "2025-12-31" })

// multiple
onChangeValue(["2025-12-01", "2025-12-15", "2025-12-20"])

// limpar (single/range)
onChangeValue(undefined)

// limpar (multiple)
onChangeValue([])