The Date/Time Cheat Sheet

Dates in WordPress forms can be complex! On this page we provide a variety of Date/Time field examples. You can download any of the examples below and import them into a blank form to review them further. You can even drag and drop them into your section library to use in any other form.

In the demos below we are using the following WordPress date and time format settings:

  • Date: F j, Y
  • Time: g:i a

When using date variables, there are three types of date/time you can reference:

  • Blog – This is the blog date/time localized to your time zone
  • Client – This is the date/time of the visitors viewing your form
  • Server – This is the date/time of your hosting server (This is often set to UTC)

Default to Today’s Date

The date/time field will default to your visitors date/time when the picker is opened, but it will not show this as the default value. To set the default value to today’s date, the following variables can be used:

  • #blog_date
  • #client_date
  • #server_date

These variables are added in the ‘Default Value’ setting of the field:

WS Form - Date/Time Field - Default Value

Demo

Default to Today’s Date with Custom Formatting

You can change the format of a date using the following variables:

  • #blog_date_custom(format)
  • #client_date_custom(format)
  • #server_date_custom(format)

For example:

#blog_date_custom("m/d/Y")

The date format follows the date format as the PHP date function. Learn more.

Demo

Default to Today’s Date with Offset

You can offset a date/time using the offset parameter:

  • #blog_date_custom(format, offset)
  • #client_date_custom(format, offset)
  • #server_date_custom(format, offset)

The offset is the number of seconds to add (or subtract) from the current date.

For example:

#blog_date_custom("m/d/Y", #seconds_year)

This would offset today’s date by a year and then format the date as m/d/Y (e.g. 12/31/2022)

Demo

Seconds Constant Variables

As well as entering your own offset, you can use the following variables for several helpful constants that represent durations in seconds.

Variable Output Description
#seconds_minute 60 Seconds in a minute
#seconds_hour 3600 Seconds in an hour
#seconds_day 86400 Seconds in a day
#seconds_week 604800 Seconds in a week
#seconds_year 31536000 Seconds in a year

Default to Current Time

If you are using a date/time field with a type of ‘Time’, you can also pre-populate the time. To set the default value to the current time, the following variables can be used:

  • #blog_time
  • #client_time
  • #server_time

Demo

Offset a Date

The #field_date_offset variable can be used to insert the value of date field that has been offset by a value in seconds.

The syntax is #field_date_offset(field_id, offset_in_seconds)

The parameters are:

  • field_id – The ID of the source date field
  • offset_in_seconds – The number of seconds to offset the date by (e.g. #seconds_day or 86400)

You can put this variable in the default value of a date field as well as the minimum and maximum settings should you wish to dynamically adjust the available date range.

By wrapping the variable in #text(...) you can ensure the value updates whenever the source date is changed.

Demo (Default Value)

  • Default Value (Basic tab): #text(#field_date_offset(123, #calc(#seconds_day * 10))) (Where 123 is he ID of the input date field)

Demo (Default Value + Date Range)

  • Default Value (Basic tab): #text(#field_date_offset(123, #calc(#seconds_day * 10))) (Where 123 is he ID of the input date field)
  • Minimum (Advanced tab): #text(#field_date_offset(123, #calc(#seconds_day * 7)))
  • Maximum (Advanced tab): #text(#field_date_offset(123, #calc(#seconds_day * 13)))

Setting Minimum and Maximum Date Offsets

When the date picker is opened, you can limit the dates shown to the visitor. You can set the minimum and maximum dates available to choose by using the following date/time field settings (these can be found in the advanced tab):

  • Minimum
  • Maximum

You can enter an actual date in these fields, or enter offsets. For example if you wanted to set the minimum date to todays date minus 3 days, you would enter:

-1970-01-03

If you wanted the maximum date to be todays date plus 3 days, you would enter:

+1970-01-03

If you wanted the maximum date to be todays date plus 1 month, you would enter:

+1970-02-01

If you wanted the maximum date to be todays date plus 1 year and 6 months, you would enter:

+1971-07-01

Demo

Disabling Week Days

You can disable any week day in the date/time picker by using the ‘Disabled Week Days’ setting in the ‘Advanced’ tab.

WS Form - Date/Time Field - Disabled Week Days

Demo

Disabling Dates

You can disable dates in the date/time picker by using the ‘Disabled Dates’ setting in the ‘Advanced’ tab.

WS Form - Date/Time Field - Disabled Dates

To add a date to disable:

  1. Click the ‘Add’  icon to add a new date.
  2. Enter a date in the format: yyyy-mm-dd.
  3. Repeat this for each date you wish to disable.
  4. Click ‘Save.

Demo

Enabling Dates

You can enable dates and exclude all others  in the date/time picker by using the ‘Enabled Dates’ setting in the ‘Advanced’ tab.

WS Form - Date/Time Field - Enabled Dates

To add a date to enable:

  1. Click the ‘Add’  icon to add a new date.
  2. Enter a date in the format: yyyy-mm-dd.
  3. Repeat this for each date you wish to enable.
  4. Click ‘Save.

Demo

Setting the Minimum and Maximum Year

By default, the minimum and maximum year in the date/time picker will be 1950 – 2050. You can change this range by using the following settings in the ‘Advanced’ tab:

WS Form - Date/Time Field - Minimum and Maximum Year

Demo

Calculated Dates

It is possible to use dates in calculated fields.

Demo