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)

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

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 · Masks and keyboards
• Sibling recipes: CPF/ZIP/date mask · Numeric keyboard