4.3 Date and Time

Input type

The element types Date, Time and Date and Time are generally open fields where the users can click to set the date or time themselves, through calendar, date or time pop-ups or text fields. The elements can also be set to automatically show the present date and time – which can then be changed by the user.

Autocapture

To autocapture e.g. time or date when opening a form or a subform (repeat) you can select Capture value automatically under Element Properties – Element Type.

Formatting

Zegeba uses moment.js date and time as described under General Formatting below.

Default data and time formatting uses the settings of the device or the browser used. You can override the standard settings by using a date/time formatting string.

The example below shows various parameters for customizing the look and functionality of the Date and Time input.

This element automatically shows the placeholder texts we have entered: “No date given” and “No time given”:

When the update button to the right is pressed, the date will be shown as DD.MM.YYYY and the time as HH:mm in 30-minute intervals (rounded down to the 30 minutes just passed):

The user can press this date to get a calendar to choose a date from and a text field to type a different time in.

From Zegeba v 4.4, there is a new option for dates: Date view mode. Normally when you click on a date, the calendar will open up as shown in the picture above, where you can scroll horizontally through the months. The Date view mode can be set to either days, months, years or decades, to make it easier to find dates that are way back or ahead in time. With the Decades view mode, the date element will open like below, where it is much easier to find for instance a date of birth decades ago.

General formatting
Original source: momentjs.com