Date entry

Wt 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
« 2024»
MonTueWedThuFriSatSun
25
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
source 
#include <Wt/WCalendar.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WText.h>


auto container = std::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
« 2024»
MonTueWedThuFriSatSun
25
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
source 
#include <Wt/WCalendar.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WDate.h>
#include <Wt/WText.h>


auto container = std::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 = std::make_unique<Wt::WTemplate>(Wt::WString::tr("dateEdit-template"));
form->addFunction("id", &Wt::WTemplate::Functions::id);

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

auto de2 = form->bindWidget("to", std::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", std::make_unique<Wt::WPushButton>("Save"));

auto out = form->bindWidget("out", std::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 = std::make_unique<Wt::WTemplate>(Wt::WString::tr("timeEdit-template"));
form->addFunction("id", &Wt::WTemplate::Functions::id);

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

auto te2 = form->bindWidget("to", std::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", std::make_unique<Wt::WPushButton>("Save"));

auto out = form->bindWidget("out", std::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