Cómo crear un campo de fecha u hora con picker

Propósito. Crear un campo que, al recibir un toque, abre el DatePicker (calendario) o el TimePicker (reloj) y rellena el campo formateado conforme al locale. El usuario también puede escribir directamente con máscara.

APIs usadas

• campo.setMode(EditMode.DATE, true) — modo fecha con maskedEdit. Deriva la máscara del locale: LocaleFormats.dateFormat == YMD → "9999-99-99", si no "99/99/9999" (usando LocaleFormats.dateSeparator); validChars = "0123456789"; keyboard = DATE. Al tocar, abre el DatePicker.
• campo.setMode(EditMode.TIME, true) — modo hora con máscara "99:99" (usando LocaleFormats.timeSeparator); keyboard = TIME. Al tocar, abre el TimePicker.
• TextField.getText() — texto formateado con separadores ("15/03/2024", "14:30").
• TextField.getTextWithoutMask() — solo los dígitos ("15032024", "1430").

Comportamiento interno (automático, sin código extra):

• Al abrir, el campo pre-popula el picker con el valor actual, si es parseable (DateTimeUtils.parseDate para fecha; dígitos hhmm para hora).
• Al confirmar en el picker, el onSelect interno llama a setText(...) con el valor formateado y restaura el foco al final del texto (restoreFocusAtEnd).
• El DatePicker/TimePicker se crea una vez por instancia (lazy) y se reutiliza.

Para abrir los pickers manualmente (fuera de un campo), usa new DatePicker().onSelect(...).show() o new TimePicker().onSelect(...).show(). Getters útiles: DatePicker.getSelectedDay()/getDisplayMonth()/getDisplayYear(), TimePicker.getHour()/getMinute()/getTimeText().

Ejemplo completo (copiar, pegar y ejecutar)

package com.exemplo;

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

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

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

      // Campo de hora — abre el TimePicker al 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);
   }
}

El fragmento de abajo muestra solo el núcleo. Para ejecutarlo, colócalo en el esqueleto MainWindow de arriba.

Fragmento mínimo

import dev.crossfly.ui.*;
import dev.crossfly.ui.style.*;
import static dev.crossfly.ui.UIConstants.EditMode;

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

// Campo de hora — abre el TimePicker al 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
});

Profundiza

• DatePicker · Máscaras y teclados
• Recetas hermanas: Máscara de CPF/CEP/fecha · Teclado numérico