Date component
in Common Forms

creates a date input field

  • multiple Display Modes
  • date picker
  • configurable format
  • configurable date range

The Date component is used to create a date input field inside a Form component. There are several Display Modes to adapt its appearance.

on this page:
Display Mode , Opens In New Window
Format , Opens In New Window
Display & Usage , Opens In New Window Component settings , Opens In New Window
Step by step , Opens In New Window

Introduction

The Date component is used to create date input fields that let the portal visitor state e.g. the birth date or choose a date for an appointment. It comes in different Display Modes where either a date can be chosen from a dropdown or it must be entered as text input. Additonally, a date picker is available. There are several formats by which available date fields can be defined, e.g. DD.MM.YYYY for a day/month/year set-up or hh:mm for the time. It is also possible to restrict the offered time period.

Glossary:

Example:

Display in Form Reference

 

 

Display in Modal Overlay

Display & Usage

Click behaviour

Depending on the chosen Format and Display Mode, different input fields are provided. The following example has a Format DD.MM.YYYY in a Display Mode = Multiple with Date Picker.

Clicking on a dropdown, opens the available date options.

Alternatively, the Date Picker can be chosen to set the desired date.

Display Mode

There are three different Display Modes available that define which kind of date fields are offered:

Single

A simple input field that is restricted to numbers. The portal visitor must state the date in the defined Format.

Multiple

This mode provides, according to the chosen Format, dropdown fields for day, month, year and/or hours, minutes.

Additonally, it is possible to add a date picker next to it (not suitable for hh:mm).

Date Picker

This mode only provides a date picker for the Format DD.MM.YYYY.

Format

The Format of the date defines which date input fields shall be displayed. Available formats are: DD.MM.YYYY (default, day, month, year) and DD.MM.YYYY hh:mm (day, month, year, hour, minute). The hours have a 24h format.

Date Restrictions

With the Date From and Date To fields, it is possible to restrict the available date, e.g. in following example, it is set as as a relative restriction: Today minus and plus 2 days. Of course, it is also possible to set a fixed date.

 If no restrictions are set, the default values are: 

day:       1-31

month: 1-12

year:     current year +/- 10 years

Component settings

The Date component is available in the Common Forms component group in a Modal Content template.

tab: Name

In the Name tab, settings for the general appearance of the input field are set up.

tab: Values

In the Values tab, the Format and the date range of the date inputs fields are defined.

Editorial hint:

Date From / To in the future or past

Please note that it is also possible to set the Dates From/To reversivly, by adding a minus (-) in front of the variable. So a Date From set to -1M would set a start date of the calendar 1 month in the future. A setting Date From 10Y and Date To -5Y would create a date range from 10 years to 5 years in the past.

tab: Constraints

Common Form Constraints element to restrict the display of the component (via Expressions) and to set the Mandatory Type.

tab: Styling

In the Styling tab, besides the Style (width) of the component, the Display Mode is defined.

Step by step

1

2

3

4

5

6

Related topics

Used recurring elements