Date entry

JWt supports several date entry methods, including a WCalendar, WTimeEdit and WDateEdit.

Date entry using a calendar

The WCalendar widget provides navigation by month and year, and indicates the current day.

Example
« 2026»
MonTueWedThuFriSatSun
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
source 
  void CalendarSimple() {
    WContainerWidget container = new WContainerWidget();
    final WCalendar c1 = new WCalendar((WContainerWidget) container);
    final WText out = new WText((WContainerWidget) container);
    out.addStyleClass("help-block");
    c1.selectionChanged()
        .addListener(
            this,
            () -> {
              Set<WDate> selection = c1.getSelection();
              if (selection.size() != 0) {
                WDate d = null;
                d = selection.iterator().next();
                WDate toDate = new WDate(d.getYear() + 1, 1, 1);
                int days = d.getDaysTo(toDate);
                out.setText(new WString("<p>That's {1} days until New Year's Day!</p>").arg(days));
              }
            });
  }

You can select multiple dates after passing the flag ExtendedSelection to the method setSelectionMode().

Example
« 2026»
MonTueWedThuFriSatSun
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
source 
  void CalendarExtended() {
    WContainerWidget container = new WContainerWidget();
    final WCalendar c2 = new WCalendar((WContainerWidget) container);
    c2.setSelectionMode(SelectionMode.Extended);
    final WText out = new WText((WContainerWidget) container);
    out.addStyleClass("help-block");
    c2.selectionChanged()
        .addListener(
            this,
            () -> {
              WString selected = new WString();
              Set<WDate> selection = c2.getSelection();
              for (WDate date : c2.getSelection()) {
                if (!(selected.length() == 0)) {
                  selected.append(", ");
                }
                selected.append(date.toString("dd/MM/yyyy"));
              }
              out.setText(
                  new WString("<p>You selected the following dates: {1}</p>").arg(selected));
            });
  }

Top

Date entry using a date edit

The WDateEdit widget is a line edit with support for date entry, using a WCalendar in a popup for editing the date. In the future, it is foreseen that this widget can evolve to use browser support for easy date entry.

By default the selected date is shown in the format defined by your WLocale settings as in the first example. In the second example the format is set to "dd MM yyyy".

Example

When do you want to take your holiday?

source 
  void DateEdit() {
    WTemplate form = new WTemplate(WString.tr("dateEdit-template"));
    form.addFunction("id", WTemplate.Functions.id);
    final WDateEdit de1 = new WDateEdit();
    form.bindWidget("from", de1);
    de1.setDate(WDate.getCurrentServerDate().addDays(1));
    final WDateEdit de2 = new WDateEdit();
    form.bindWidget("to", de2);
    de2.setFormat("dd MM yyyy");
    de2.getCalendar().setHorizontalHeaderFormat(CalendarHeaderFormat.SingleLetterDayNames);
    de2.setBottom(de1.getDate());
    WPushButton button = new WPushButton("Save");
    form.bindWidget("save", button);
    final WText out = new WText();
    form.bindWidget("out", out);
    de1.changed()
        .addListener(
            this,
            () -> {
              if (de1.validate() == ValidationState.Valid) {
                de2.setBottom(de1.getDate());
                out.setText("Date picker 1 is changed.");
              }
            });
    de2.changed()
        .addListener(
            this,
            () -> {
              if (de1.validate() == ValidationState.Valid) {
                de1.setTop(de2.getDate());
                out.setText("Date picker 2 is changed.");
              }
            });
    button
        .clicked()
        .addListener(
            this,
            () -> {
              if (de1.getText().length() == 0 || de2.getText().length() == 0) {
                out.setText("You should enter two dates!");
              } else {
                int days = de1.getDate().getDaysTo(de2.getDate()) + 1;
                if (days == 1) {
                  out.setText("It's fine to take holiday just for one day!");
                } else {
                  if (days > 1) {
                    out.setText(
                        new WString("So, you want to take holiday for a period of {1} days?")
                            .arg(days));
                  } else {
                    out.setText("Invalid period!");
                  }
                }
              }
            });
    form.setCondition("if:is-not-native", true);
  }

Top

Date entry using a native widget

The WDateEdit widget can be rendered as a completely native widget, managed by the browser. This is often a better choice for UX on mobile.

Example

When do you want to take your holiday?

source 
  void DateEditNative() {
    WTemplate form = new WTemplate(WString.tr("dateEdit-template"));
    form.addFunction("id", WTemplate.Functions.id);
    final WDateEdit de1 = new WDateEdit();
    form.bindWidget("from", de1);
    de1.setDate(WDate.getCurrentServerDate().addDays(1));
    de1.setNativeControl(true);
    final WDateEdit de2 = new WDateEdit();
    form.bindWidget("to", de2);
    de2.setFormat("dd MM yyyy");
    de2.getCalendar().setHorizontalHeaderFormat(CalendarHeaderFormat.SingleLetterDayNames);
    de2.setBottom(de1.getDate());
    de2.setNativeControl(true);
    WPushButton button = new WPushButton("Save");
    form.bindWidget("save", button);
    final WText out = new WText();
    form.bindWidget("out", out);
    de1.changed()
        .addListener(
            this,
            () -> {
              if (de1.validate() == ValidationState.Valid) {
                de2.setBottom(de1.getDate());
                out.setText("Date picker 1 is changed.");
              }
            });
    de2.changed()
        .addListener(
            this,
            () -> {
              if (de1.validate() == ValidationState.Valid) {
                de1.setTop(de2.getDate());
                out.setText("Date picker 2 is changed.");
              }
            });
    button
        .clicked()
        .addListener(
            this,
            () -> {
              if (de1.getText().length() == 0 || de2.getText().length() == 0) {
                out.setText("You should enter two dates!");
              } else {
                int days = de1.getDate().getDaysTo(de2.getDate()) + 1;
                if (days == 1) {
                  out.setText("It's fine to take holiday just for one day!");
                } else {
                  if (days > 1) {
                    out.setText(
                        new WString("So, you want to take holiday for a period of {1} days?")
                            .arg(days));
                  } else {
                    out.setText("Invalid period!");
                  }
                }
              }
            });
  }

Top

Time entry using a time edit

The WTimeEdit widget is a line edit with support for time entry.

Example

When do you want your package to be delivered?

source 
  void TimeEdit() {
    WTemplate form = new WTemplate(WString.tr("timeEdit-template"));
    form.addFunction("id", WTemplate.Functions.id);
    final WTimeEdit te1 = new WTimeEdit();
    form.bindWidget("from", te1);
    form.bindString("from-format", te1.getFormat());
    te1.setTime(WTime.getCurrentTime());
    final WTimeEdit te2 = new WTimeEdit();
    form.bindWidget("to", te2);
    te2.setFormat("h:mm:ss.SSS a");
    te2.setTime(WTime.getCurrentTime().addSecs(60 * 15));
    form.bindString("to-format", te2.getFormat());
    WPushButton button = new WPushButton("Save");
    form.bindWidget("save", button);
    final WText out = new WText();
    form.bindWidget("out", out);
    te1.changed()
        .addListener(
            this,
            () -> {
              if (te1.validate() == ValidationState.Valid) {
                out.setText("Time picker 1 is changed.");
              }
            });
    te2.changed()
        .addListener(
            this,
            () -> {
              if (te2.validate() == ValidationState.Valid) {
                out.setText("Time picker 2 is changed.");
              }
            });
    button
        .clicked()
        .addListener(
            this,
            () -> {
              if (te1.getText().length() == 0 || te2.getText().length() == 0) {
                out.setText("You should enter two times!");
              } else {
                long secs = te1.getTime().secsTo(te2.getTime()) + 1;
                if (secs <= 60 * 10) {
                  out.setText("This is a really small range of time");
                } else {
                  out.setText(
                      new WString("So, you want your package to be delivered between {1} and {2}?")
                          .arg(te1.getTime().toString())
                          .arg(te2.getTime().toString()));
                }
              }
            });
    form.setCondition("if:is-not-native", true);
  }

Top

Time entry using a native widget

The WTimeEdit widget can be rendered as a completely native widget, managed by the browser. This is often a better choice for UX on mobile.

Example

When do you want your package to be delivered?

source 
  void TimeEditNative() {
    WTemplate form = new WTemplate(WString.tr("timeEdit-template"));
    form.addFunction("id", WTemplate.Functions.id);
    final WTimeEdit te1 = new WTimeEdit();
    form.bindWidget("from", te1);
    form.bindString("from-format", te1.getFormat());
    te1.setTime(WTime.getCurrentTime());
    te1.setNativeControl(true);
    final WTimeEdit te2 = new WTimeEdit();
    form.bindWidget("to", te2);
    te2.setFormat("h:mm:ss.SSS a");
    te2.setTime(WTime.getCurrentTime().addSecs(60 * 15));
    te2.setNativeControl(true);
    form.bindString("to-format", te2.getFormat());
    WPushButton button = new WPushButton("Save");
    form.bindWidget("save", button);
    final WText out = new WText();
    form.bindWidget("out", out);
    te1.changed()
        .addListener(
            this,
            () -> {
              if (te1.validate() == ValidationState.Valid) {
                out.setText("Time picker 1 is changed.");
              }
            });
    te2.changed()
        .addListener(
            this,
            () -> {
              if (te2.validate() == ValidationState.Valid) {
                out.setText("Time picker 2 is changed.");
              }
            });
    button
        .clicked()
        .addListener(
            this,
            () -> {
              if (te1.getText().length() == 0 || te2.getText().length() == 0) {
                out.setText("You should enter two times!");
              } else {
                long secs = te1.getTime().secsTo(te2.getTime()) + 1;
                if (secs <= 60 * 10) {
                  out.setText("This is a really small range of time");
                } else {
                  out.setText(
                      new WString("So, you want your package to be delivered between {1} and {2}?")
                          .arg(te1.getTime().toString())
                          .arg(te2.getTime().toString()));
                }
              }
            });
  }

Top

Datetime entry using a datetime edit

The WDateTimeEdit widget is a line edit with support for datetime entry.

Example

When do you want to rent a car?

source 
  void DateTimeEdit() {
    WTemplate form = new WTemplate(WString.tr("dateTimeEdit-template"));
    form.addFunction("id", WTemplate.Functions.id);
    form.setCondition("if:show-format", true);
    final WDateTimeEdit dte1 = new WDateTimeEdit();
    form.bindWidget("from", dte1);
    dte1.setDateTime(WDate.getCurrentServerDate());
    dte1.setFormat("yyyy-MM-dd HH:mm");
    form.bindString("from-format", dte1.getFormat());
    final WDateTimeEdit dte2 = new WDateTimeEdit();
    form.bindWidget("to", dte2);
    dte2.setDateTime(WDate.getCurrentServerDate());
    dte2.setFormat("dd MM yyyy hh:mm:ss.SSS a");
    form.bindString("to-format", dte2.getFormat());
    dte2.setBottom(dte1.getDateTime());
    WPushButton button = new WPushButton("Save");
    form.bindWidget("save", button);
    final WText out = new WText();
    form.bindWidget("out", out);
    dte1.changed()
        .addListener(
            this,
            () -> {
              if (dte1.validate() == ValidationState.Valid) {
                out.setText("DateTime 1 is changed.");
              }
            });
    dte2.changed()
        .addListener(
            this,
            () -> {
              if (dte2.validate() == ValidationState.Valid) {
                out.setText("DateTime 2 is changed.");
              }
            });
    button
        .clicked()
        .addListener(
            this,
            () -> {
              if (dte1.getText().length() == 0 || dte2.getText().length() == 0) {
                out.setText("You should enter two dates and times!");
              } else {
                long secs = dte1.getDateTime().getTime().secsTo(dte2.getDateTime().getTime());
                int days = dte1.getDateTime().getDaysTo(dte2.getDateTime());
                if (days < 0 || days == 0 && secs < 0) {
                  out.setText(new WString("You cannot rent a car for a negative amount of time."));
                } else {
                  if (days >= 1) {
                    out.setText(
                        new WString("So, you want to rent a car for {1} day(s)?").arg(days));
                  } else {
                    if (secs > 60 * 60) {
                      out.setText(
                          new WString("So, you want you want to rent a car for {1} hour(s)?")
                              .arg(secs / (60 * 60)));
                    } else {
                      if (secs == 60 * 60) {
                        out.setText(new WString("So, you want to rent a car for a hour?"));
                      } else {
                        out.setText(
                            new WString("Sorry, you can't rent a car for less than a hour."));
                      }
                    }
                  }
                }
              }
            });
  }

Top

Datetime entry using a native edit

The WDateTimeEdit widget can be converted to a native datetime edit. This essentially uses an input of the type `datetime-local`. This will render a widget specific to the brower (and thus may look different on different browsers). This widget will always use the locale of the browser to format its content.

Example

When do you want to rent a car?

source 
  void DateTimeNativeEdit() {
    WTemplate form = new WTemplate(WString.tr("dateTimeEdit-template"));
    form.addFunction("id", WTemplate.Functions.id);
    form.setCondition("if:show-format", false);
    final WDateTimeEdit dte1 = new WDateTimeEdit();
    form.bindWidget("from", dte1);
    dte1.setDateTime(WDate.getCurrentServerDate());
    dte1.setFormat("yyyy-MM-dd HH:mm");
    dte1.setNativeControl(true);
    form.bindString("from-format", dte1.getFormat());
    final WDateTimeEdit dte2 = new WDateTimeEdit();
    form.bindWidget("to", dte2);
    dte2.setDateTime(WDate.getCurrentServerDate());
    dte2.setNativeControl(true);
    dte2.setFormat("dd MM yyyy hh:mm:ss.SSS a");
    form.bindString("to-format", dte2.getFormat());
    dte2.setBottom(dte1.getDateTime());
    WPushButton button = new WPushButton("Save");
    form.bindWidget("save", button);
    final WText out = new WText();
    form.bindWidget("out", out);
    dte1.changed()
        .addListener(
            this,
            () -> {
              if (dte1.validate() == ValidationState.Valid) {
                out.setText("DateTime 1 is changed.");
              }
            });
    dte2.changed()
        .addListener(
            this,
            () -> {
              if (dte2.validate() == ValidationState.Valid) {
                out.setText("DateTime 2 is changed.");
              }
            });
    button
        .clicked()
        .addListener(
            this,
            () -> {
              if (dte1.getText().length() == 0 || dte2.getText().length() == 0) {
                out.setText("You should enter two dates and times!");
              } else {
                long secs = dte1.getDateTime().getTime().secsTo(dte2.getDateTime().getTime());
                int days = dte1.getDateTime().getDaysTo(dte2.getDateTime());
                if (days < 0 || days == 0 && secs < 0) {
                  out.setText(new WString("You cannot rent a car for a negative amount of time."));
                } else {
                  if (days >= 1) {
                    out.setText(
                        new WString("So, you want to rent a car for {1} day(s)?").arg(days));
                  } else {
                    if (secs > 60 * 60) {
                      out.setText(
                          new WString("So, you want you want to rent a car for {1} hour(s)?")
                              .arg(secs / (60 * 60)));
                    } else {
                      if (secs == 60 * 60) {
                        out.setText(new WString("So, you want to rent a car for a hour?"));
                      } else {
                        out.setText(
                            new WString("Sorry, you can't rent a car for less than a hour."));
                      }
                    }
                  }
                }
              }
            });
  }

Top