Add and configure Datetime Element in WPEForm

Take user's input of date or time or both.

SETTING INPUT TYPE AND FORMAT

Go to INTERFACE configuration and set the Picker type from there. Depending on the type, you can set these additional options.

Interface screenshot
Interface screenshot
  • Date Format - How date is presented in the picker. Choose from the given options.
  • Time Format - If 12 hours then we show an AM/PM selector.
  • Date time separator - The string used in the UI to separate date fields and time fields.
  • Hide seconds - Whether or not to hide the seconds input field. If true, then internally the second will be recorded as 0.

PREFIL AND DEFAULTS

From ATTRIBUTES you can set default values and URL/META based prefils. The default value field let's you choose what the value would be. From anywhere else, the input format should be YYYY-MM-DD H:i:s. For example 2021-01-18 14:20:10 would the value of 18th January, 2021, 2:20:10 PM. Here is an example of URL parameter based prefil.

Attributes screenshot
Attributes screenshot

With the above settings, you can navigate to the URL with ?dt0=2021-01-18%2014:20:10 to have the same date prefilled.

The default prefil also lets you enter formula, which is explained below.

DATE FORMULA INPUTS

Some fields will allow you to input Date/Time formula for calculating days relative to current date. The formula is

[plain]
1CURRENT +/- n (second|minute|hour|day)

Copied!

So to add 5 hours to current date, you'd enter

[plain]
1CURRENT + 5 hour

Copied!

To subtract 15 days from current date, you'd enter

[plain]
1CURRENT - 15 day

Copied!

The formula fields are available in

  • Default value field from ATTRIBUTES.
  • Score comparison.
  • Conditional events.
Formula screenshot
Formula screenshot

To enter a formula, click on the right dropdown button and select FORMULA.

SCORE

Date time element allows for automated score based on comparison with user input. The compare value can be either a strict datetime or a formula (see above). There are three types of comparison.

  • LESS THAN - When user input value is less than the given value.
  • EQUAL TO - When user input value is equal to the given value.
  • GREATER THAN - When user input value is greater than the given value.

NUMERIC VALUE

The numeric value of any date/time input is

  • The number second since epoch (January 1, 1970 (midnight UTC/GMT), not counting leap seconds);
  • When value is empty, or invalid, it considers the current time (the time the form was loaded on the user's browser for the first time.)

This is true even in case of just date or time inputs. With Date Only input, time is set as 00:00:00 and with Time Only input, date is set as current date.

CONDITIONAL EVENT

Can have conditional events based on the user input value. The comparison is same as the score and also allows for formula input.

  • LESS THAN - When user input value is less than the given value.
  • EQUAL TO - When user input value is equal to the given value.
  • GREATER THAN - When user input value is greater than the given value.