Forms — widgets and support classes for capturing user information

Date entry

Wt provides to kinds of widgets to enter a date, namely WCalendar and WDatePicker.

Date entry using a calendar

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

Example
« 2019»
MonTueWedThuFriSatSun
25
26
27
28
29
30
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
31
1
2
3
4
5
source
#include <Wt/WCalendar.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WText.h>


auto container = Wt::cpp14::make_unique<Wt::WContainerWidget>();

Wt::WCalendar *c1 = container->addNew<Wt::WCalendar>();

Wt::WText *out = container->addNew<Wt::WText>();
out->addStyleClass("help-block");

c1->selectionChanged().connect([=] {
    std::set<Wt::WDate> selection = c1->selection();
    if (selection.size() != 0) {
        Wt::WDate d;
	d = (*selection.begin());
	Wt::WDate toDate(d.year() + 1, 1, 1);
	int days = d.daysTo(toDate);
	out->setText(Wt::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
« 2019»
MonTueWedThuFriSatSun
25
26
27
28
29
30
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
31
1
2
3
4
5
source
#include <Wt/WCalendar.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WDate.h>
#include <Wt/WText.h>


auto container = Wt::cpp14::make_unique<Wt::WContainerWidget>();

Wt::WCalendar *c2 = container->addNew<Wt::WCalendar>();
c2->setSelectionMode(Wt::SelectionMode::Extended);

Wt::WText* out = container->addNew<Wt::WText>();
out->addStyleClass("help-block");

c2->selectionChanged().connect([=] {
    Wt::WString selected;
    std::set<Wt::WDate> selection = c2->selection();

    for (auto &date : c2->selection()) {
	if (!selected.empty())
	    selected += ", ";

        selected += date.toString("dd/MM/yyyy");
    }

    out->setText(Wt::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
#include <Wt/WCalendar.h>
#include <Wt/WDate.h>
#include <Wt/WDateEdit.h>
#include <Wt/WLabel.h>
#include <Wt/WPushButton.h>
#include <Wt/WText.h>
#include <Wt/WTemplate.h>
#include <Wt/WString.h>


auto form = Wt::cpp14::make_unique<Wt::WTemplate>(Wt::WString::tr("dateEdit-template"));
form->addFunction("id", &Wt::WTemplate::Functions::id);

auto de1 = form->bindWidget("from", Wt::cpp14::make_unique<Wt::WDateEdit>());
de1->setDate(Wt::WDate::currentServerDate().addDays(1));

auto de2 = form->bindWidget("to", Wt::cpp14::make_unique<Wt::WDateEdit>());
de2->setFormat("dd MM yyyy"); // Apply a different date format.
de2->calendar()->setHorizontalHeaderFormat(Wt::CalendarHeaderFormat::SingleLetterDayNames);
de2->setBottom(de1->date());

auto button = form->bindWidget("save", Wt::cpp14::make_unique<Wt::WPushButton>("Save"));

auto out = form->bindWidget("out", Wt::cpp14::make_unique<Wt::WText>());

de1->changed().connect([=] {
    if (de1->validate() == Wt::ValidationState::Valid) {
        de2->setBottom(de1->date());
        out->setText("Date picker 1 is changed.");
    }
});

de2->changed().connect([=] {
    if (de1->validate() == Wt::ValidationState::Valid) {
        de1->setTop(de2->date());
        out->setText("Date picker 2 is changed.");
    }
});

button->clicked().connect([=] {
    if (de1->text().empty() || de2->text().empty())
        out->setText("You should enter two dates!");
    else {
        int days = de1->date().daysTo(de2->date()) + 1;
	if (days == 1)
	    out->setText("It's fine to take holiday just for one day!");
	else if (days > 1) 
	    out->setText(Wt::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
#include <Wt/WCalendar.h>
#include <Wt/WDate.h>
#include <Wt/WTimeEdit.h>
#include <Wt/WLabel.h>
#include <Wt/WPushButton.h>
#include <Wt/WText.h>
#include <Wt/WTemplate.h>
#include <Wt/WString.h>

auto form = Wt::cpp14::make_unique<Wt::WTemplate>(Wt::WString::tr("timeEdit-template"));
form->addFunction("id", &Wt::WTemplate::Functions::id);

auto te1 = form->bindWidget("from", Wt::cpp14::make_unique<Wt::WTimeEdit>());
form->bindString("from-format", te1->format());
te1->setTime(Wt::WTime::currentTime());

auto te2 = form->bindWidget("to", Wt::cpp14::make_unique<Wt::WTimeEdit>());
te2->setFormat("h:mm:ss.zzz AP");
te2->setTime(Wt::WTime::currentTime().addSecs(60*15));
form->bindString("to-format", te2->format());

auto button = form->bindWidget("save", Wt::cpp14::make_unique<Wt::WPushButton>("Save"));

auto out = form->bindWidget("out", Wt::cpp14::make_unique<Wt::WText>());

te1->changed().connect([=] {
    if (te1->validate() == Wt::ValidationState::Valid) {
      out->setText("Time picker 1 is changed.");
    }
});

te2->changed().connect([=] {
    if (te2->validate() == Wt::ValidationState::Valid) {
      out->setText("Time picker 2 is changed.");
    }
});

button->clicked().connect([=] {
    if (te1->text().empty() || te2->text().empty())
        out->setText("You should enter two times!");
    else {
    long secs = te1->time().secsTo(te2->time()) + 1;
	if (secs <= 60*10)
	  out->setText("This is a really small range of time");
	else
	  out->setText
	    (Wt::WString("So, you want your package to be delivered between "
	                 "{1} and {2}?")
	     .arg(te1->time().toString())
	     .arg(te2->time().toString()));
    }  
});

Top

Date entry using a date picker

The date picker offers about the same functionality as the newer WDateEdit, but with a slightly different API. Most importantly, the date editor is a form widget, and integrates better with other parts in Wt. It is in general more convenient to use the newer WDateEdit class instead.

Example

When do you want to take your holiday?

source
#include <Wt/WContainerWidget.h>
#include <Wt/WCalendar.h>
#include <Wt/WDate.h>
#include <Wt/WDatePicker.h>
#include <Wt/WLabel.h>
#include <Wt/WLineEdit.h>
#include <Wt/WPushButton.h>
#include <Wt/WText.h>
#include <Wt/WTemplate.h>


auto form = Wt::cpp14::make_unique<Wt::WTemplate>(Wt::WString::tr("dateEdit-template"));
form->addFunction("id", &Wt::WTemplate::Functions::id);

auto dp1 = form->bindWidget("from", Wt::cpp14::make_unique<Wt::WDatePicker>());
dp1->setDate(Wt::WDate::currentServerDate().addDays(1));

auto dp2 = form->bindWidget("to", Wt::cpp14::make_unique<Wt::WDatePicker>());
dp2->setFormat("dd MM yyyy"); // Apply a different date format.
dp2->calendar()->setHorizontalHeaderFormat(Wt::CalendarHeaderFormat::SingleLetterDayNames);
dp2->setBottom(dp1->date());

auto button = form->bindWidget("save", Wt::cpp14::make_unique<Wt::WPushButton>("Save"));

auto out = form->bindWidget("out", Wt::cpp14::make_unique<Wt::WText>());

dp1->lineEdit()->changed().connect([=] {
    dp2->setBottom(dp1->date());
    out->setText("Date picker 1 is changed.");
});

dp2->lineEdit()->changed().connect([=] {
    dp1->setTop(dp2->date());
    out->setText("Date picker 2 is changed.");
});

button->clicked().connect([=] {
    if (dp1->lineEdit()->text().empty() || dp2->lineEdit()->text().empty())
        out->setText("You should enter two dates!");
    else {
        int days = dp1->date().daysTo(dp2->date()) + 1;
	if (days == 0)
	    out->setText("It's fine to take holiday just for one day!");
	else if (days > 1)
	    out->setText(Wt::WString("So, you want to take holiday for a period "
				     "of {1} days?...").arg(days));
	else
	    out->setText("Invalid period!");
   }
});

Top