# How to create a date or time field with a picker

> A field that opens the DatePicker or TimePicker when tapped and formats by the locale.

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

# How to create a date or time field with a picker

**Purpose.** Create a field that, when tapped, opens the `DatePicker` (calendar) or the `TimePicker` (clock) and fills the field formatted according to the locale. The user can also type directly with a mask.

## APIs used
- `campo.setMode(EditMode.DATE, true)` — date mode with `maskedEdit`. Derives the mask from the locale: `LocaleFormats.dateFormat == YMD → "9999-99-99"`, otherwise `"99/99/9999"` (using `LocaleFormats.dateSeparator`); `validChars = "0123456789"`; `keyboard = DATE`. On tap, it opens the `DatePicker`.
- `campo.setMode(EditMode.TIME, true)` — time mode with mask `"99:99"` (using `LocaleFormats.timeSeparator`); `keyboard = TIME`. On tap, it opens the `TimePicker`.
- `TextField.getText()` — text formatted with separators (`"15/03/2024"`, `"14:30"`).
- `TextField.getTextWithoutMask()` — only the digits (`"15032024"`, `"1430"`).

Internal behavior (automatic, no extra code):
- On opening, the field pre-populates the picker with the current value, if parseable (`DateTimeUtils.parseDate` for date; `hhmm` digits for time).
- On confirming in the picker, the internal `onSelect` calls `setText(...)` with the formatted value and restores focus at the end of the text (`restoreFocusAtEnd`).
- The `DatePicker`/`TimePicker` is created once per instance (lazy) and reused.

> To open the pickers manually (outside a field), use `new DatePicker().onSelect(...).show()` or `new TimePicker().onSelect(...).show()`. Useful getters: `DatePicker.getSelectedDay()/getDisplayMonth()/getDisplayYear()`, `TimePicker.getHour()/getMinute()/getTimeText()`.

## Complete example (copy, paste, and run)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // TextFieldStyle (config on the style)

/** Runnable main screen. Point the launcher (classname) and run: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Date field — opens the DatePicker on tap
      TextField data = new TextField("");
      data.caption("Data");
      data.setMode(EditMode.DATE, true);

      // Time field — opens the TimePicker on tap
      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);
   }
}
```

> The snippet below shows **only the core**. To run it, place it in the `MainWindow` skeleton above.

## Minimal snippet
```java
import dev.crossfly.ui.*;
import dev.crossfly.ui.style.*;
import static dev.crossfly.ui.UIConstants.EditMode;

// Date field — opens the DatePicker on tap
TextField data = new TextField("");
data.caption("Data");
data.setMode(EditMode.DATE, true);

// Time field — opens the TimePicker on tap
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"
   // ... persists
});
```

## Dig deeper
- [DatePicker](/docs/ui/widgets/datepicker) · [Masks and keyboards](/docs/ui/forms-and-input/masks-and-keyboards)
- Sibling recipes: [CPF/ZIP/date mask](/docs/cookbook/forms/mascara-cpf) · [Numeric keyboard](/docs/cookbook/forms/teclado-numerico)