Pular para o conteúdo
CrossFly é 100% open sourceSiga no GitHub
CrossFlyCrossFly
Começar

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)

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

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

Esta página foi útil?