datepicker

Adds an input field, which opens a "datepicker" calendar where you can easily choose a date.

Syntax


ABC
Select delivery date datepicker

 

Validation (Column D)


Use these to ensure the data entered by the user meets predefined criteria, such as format or range, thereby ensuring the accuracy and consistency of the data (Read more):

required

Checks that the chosen value is not the first option.

 

Settings (Column G)


Used these to configure the behavior and appearance of fields, such as determining the number of decimal places in a numeric output or controlling when a field is displayed based on other input values (Read more).

showIf:logicid=value

Hides the field until the field with the logic id that you define has the value you have entered.
​

Syntax

{showIf:insurance=Yes}

In this example, we only show the input field if the field with the logic id "insurance" has the value "Yes", e.g., for use on buttons with the options "Yes" and "No".

hideIf:logicid=value

Shows the field until the field with the logic id you define has the value you have entered.
​

Syntax

{showIf:insurance=No}

In this example, we only hide the input field if the field with the logic id "insurance" has the value "No", e.g., for use on buttons with the options "Yes" and "No".

yearRange:fromYear-toYear

Determines which years one can choose between
​

Syntax

{yearRange:2020-2023}

dateFormat:dd-mm-yy

Defines which date format you want the user to use:

  • dd = days with start 0 if under 10.
  • mm = month with start 0 if under 10.
  • yy = year with start 0 if under 10.
  • d = days without start 0 under 10.
  • m = month without start 0 under 10.
  • y = year without start 0 under 10.

Example syntax 1

{dateFormat:dd-mm-yy}

This format gives a date that looks like this: 04-06-2023
 

Example syntax 2

{dateFormat:d-m-y}

This format gives a date that looks like this: 4-6-23

 

Examples

ABCDEFG
Select date datepicker   {symbol:fa-calendar=before,dateFormat:dd-mm-yy}
Select date datepicker   {symbol:fa-calendar=before,yearRange:2020-2023}
Select date datepicker   {symbol:fa-calendar=before,yearRange:2020-2023,dateFormat:dd-mm-yy}