# Como criar um campo de data ou hora com picker

> Campo que abre o DatePicker ou TimePicker ao ser tocado e formata pelo locale.

Source: https://crossfly.dev/pt/docs/cookbook/forms/data-e-hora — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Como criar um campo de data ou hora com picker

**Propósito.** Criar um campo que, ao receber toque, abre o `DatePicker` (calendário) ou o `TimePicker` (relógio) e preenche o campo formatado conforme o locale. O usuário pode também digitar diretamente com máscara.

## APIs usadas
- `campo.setMode(EditMode.DATE, true)` — modo data com `maskedEdit`. Deriva a máscara do locale: `LocaleFormats.dateFormat == YMD → "9999-99-99"`, senão `"99/99/9999"` (usando `LocaleFormats.dateSeparator`); `validChars = "0123456789"`; `keyboard = DATE`. Ao tocar, abre o `DatePicker`.
- `campo.setMode(EditMode.TIME, true)` — modo hora com máscara `"99:99"` (usando `LocaleFormats.timeSeparator`); `keyboard = TIME`. Ao tocar, abre o `TimePicker`.
- `TextField.getText()` — texto formatado com separadores (`"15/03/2024"`, `"14:30"`).
- `TextField.getTextWithoutMask()` — só os dígitos (`"15032024"`, `"1430"`).

Comportamento interno (automático, sem código extra):
- Ao abrir, o campo pré-popula o picker com o valor atual, se parseável (`DateTimeUtils.parseDate` para data; dígitos `hhmm` para hora).
- Ao confirmar no picker, o `onSelect` interno chama `setText(...)` com o valor formatado e restaura o foco no fim do texto (`restoreFocusAtEnd`).
- O `DatePicker`/`TimePicker` é criado uma vez por instância (lazy) e reutilizado.

> Para abrir os pickers manualmente (fora de um campo), use `new DatePicker().onSelect(...).show()` ou `new TimePicker().onSelect(...).show()`. Getters úteis: `DatePicker.getSelectedDay()/getDisplayMonth()/getDisplayYear()`, `TimePicker.getHour()/getMinute()/getTimeText()`.

## Exemplo completo (copiar, colar e rodar)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // TextFieldStyle (config no estilo)

/** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Campo de data — abre o DatePicker ao tocar
      TextField data = new TextField("");
      data.caption("Data");
      data.setMode(EditMode.DATE, true);

      // Campo de hora — abre o TimePicker ao tocar
      TextField hora = new TextField("");
      hora.caption("Hora");
      hora.setMode(EditMode.TIME, true);

      Label resultado = new Label("");

      Button salvar = new Button("Salvar");
      salvar.onAction(o ->
      {
         String dataFmt = data.getText();            // "15/03/2024"
         String horaFmt = hora.getText();            // "14:30"
         if (dataFmt.isEmpty() || horaFmt.isEmpty())
         {
            Hint.show("Preencha data e hora", 2000);
            return;
         }
         resultado.setText("Agendado para " + dataFmt + " às " + horaFmt);
      });

      add(LAY_FILL, data);
      add(LAY_FILL, hora);
      add(LAY_AUTO, salvar);
      add(LAY_FILL, resultado);
   }
}
```

> O trecho abaixo mostra **só o miolo**. Para rodar, coloque-o no esqueleto `MainWindow` acima.

## Trecho mínimo
```java
import dev.crossfly.ui.*;
import dev.crossfly.ui.style.*;
import static dev.crossfly.ui.UIConstants.EditMode;

// Campo de data — abre o DatePicker ao tocar
TextField data = new TextField("");
data.caption("Data");
data.setMode(EditMode.DATE, true);

// Campo de hora — abre o TimePicker ao tocar
TextField hora = new TextField("");
hora.caption("Hora");
hora.setMode(EditMode.TIME, true);

Button salvar = new Button("Salvar");
salvar.onAction(o ->
{
   String dataFmt = data.getText();            // "15/03/2024"
   String horaFmt = hora.getText();            // "14:30"
   String dataDig = data.getTextWithoutMask(); // "15032024"
   // ... persiste
});
```

## Aprofunde-se
- [DatePicker](/docs/ui/widgets/datepicker) · [Máscaras e teclados](/docs/ui/forms-and-input/masks-and-keyboards)
- Receitas irmãs: [Máscara de CPF/CEP/data](/docs/cookbook/forms/mascara-cpf) · [Teclado numérico](/docs/cookbook/forms/teclado-numerico)