DatePicker

DatePicker combina um trigger de campo de data com Calendar. Escolha-o quando uma data local cabe em um campo compacto de formulário; escolha Calendar quando a grade deve permanecer visível no layout.

Exemplos

Uma data inicial selecionada

Use uma string ISO YYYY-MM-DD para um valor inicial só de data. O campo formata a data local selecionada com locale, e Calendar usa o mesmo locale.

Start date

Uma janela de entrega

min e max seguem para o Calendar composto e impedem a seleção fora da janela de datas locais permitida. Adicione hint quando a restrição precisar de uma explicação curta.

Delivery dateDates outside this delivery window are unavailable.

Quando usar

Use DatePicker para uma única data local que deve ocupar um campo compacto de formulário.

Prefira outro componente quando:

São necessárias data inicial e final — use DateRangePicker, que seleciona o intervalo em um Calendar e o mostra em um trigger.
A grade de datas deve permanecer visível — use Calendar diretamente.
A data faz parte da escolha de um horário — combine DatePicker e TimePicker, em vez de pedir que um controle de data represente um horário.

Acessibilidade

O trigger é um botão nativo com o label visível associado por htmlFor. No desktop, ele é passado a Popover, que fornece a semântica de trigger de diálogo, Escape e retorno de foco.
O Calendar composto fornece foco rotativo nos dias, navegação de datas por teclado e labels de datas formatados pelo locale. A data selecionada volta ao campo e fecha o picker.
error substitui hint e aplica aparência de erro ao trigger. disabled desabilita o trigger.
Em viewports de 640px ou menos, o Popover do desktop é substituído por um BottomSheet com Calendar. O título vem de label ou labels.sheetTitle; labels.close nomeia o botão de fechar. Esse caminho é documentado apenas em texto, pois o stage não redimensiona o viewport.
labels.calendar encaminha os controles traduzidos de Calendar, enquanto locale formata as datas do trigger e do Calendar.

API e código

Nome	Tipo	Obrigatória	Descrição
`label`	`string`	—	Label rendered above the picker trigger.
`hint`	`string`	—	Helper text rendered below the picker. Replaced by `error` when set.
`error`	`string`	—	Error message that enables error styling and replaces `hint`.
`value`	`Date \| string \| null`	—	Controlled local date or ISO `YYYY-MM-DD` date-only string, or `null` with no date selected.
`defaultValue`	`Date \| string`	—	Initial local date or ISO `YYYY-MM-DD` date-only string in uncontrolled mode.
`onChange`	`(date: Date) => void`	—	Called after the user selects a local date.
`placeholder`	`string`	—	Trigger text when no date is selected. Defaults to `labels.placeholder`.
`min`	`Date \| string`	—	Inclusive lower selection limit as a local date or ISO `YYYY-MM-DD` string.
`max`	`Date \| string`	—	Inclusive upper selection limit as a local date or ISO `YYYY-MM-DD` string.
`locale`	`string`	—	BCP 47 locale used to format the selected date and compose Calendar. Default: `"en-US"`.
`labels`	`DatePickerLabels`	—	Translatable visible and accessible labels, merged over the English defaults.
`disabled`	`boolean`	—	Disables the picker trigger.

x-data="lyraDatePicker({ … })"

Opção	Tipo	Obrigatória	Descrição
`defaultValue`	`string`	—	Initial ISO `YYYY-MM-DD` date.
`locale`	`string`	—	BCP 47 locale used for the trigger's selected-date text. Default: `"en-US"`.
`placeholder`	`string`	—	Trigger text when no date is selected. Default: `"Select date"`.

Sem React, componha as classes do trigger, Popover e Calendar e controle a data local, o diálogo e o comportamento de teclado:

html

<div class="lyra-field">
  <label class="lyra-label" for="start-date">Data inicial</label>
  <span class="lyra-datepicker lyra-popover-anchor">
    <button
      class="lyra-input lyra-datepicker__btn"
      id="start-date"
      type="button"
      aria-haspopup="dialog"
      aria-expanded="true"
    >
      <span>04/08/2026</span>
    </button>
    <div
      class="lyra-popover lyra-popover--bottom lyra-popover--align-start"
      role="dialog"
      aria-label="Seletor de data"
    >
      <div class="lyra-cal">
        <div class="lyra-cal__head">
          <button class="lyra-cal__nav" type="button">‹</button
          ><button class="lyra-cal__label" type="button">Agosto de 2026</button
          ><button class="lyra-cal__nav" type="button">›</button>
        </div>
        <button class="lyra-cal__day lyra-cal__day--selected" type="button" aria-pressed="true">
          4
        </button>
      </div>
    </div>
  </span>
</div>

<lyra:date-picker> Gerado do lyra-ds/blade v0.10.0.

O comportamento vem de lyraDatePicker() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Prop	Padrão	Obrigatória	Valores de exemplo
`label`	`null`	—	`0` `Date`
`hint`	`null`	—	—
`error`	`null`	—	—
`defaultValue`	`null`	—	—
`placeholder`	`null`	—	—
`min`	`null`	—	—
`max`	`null`	—	—
`locale`	`'en-US'`	—	—
`labels`	`[]`	—	—
`disabled`	`false`	—	—
`name`	`null`	—	—

blade

<lyra:date-picker
    name="due_date"
    label="Due date"
    hint="Pick a date within the current quarter."
    default-value="2026-03-17"
    min="2026-01-01"
    max="2026-12-31"
    locale="en-US"
/>