10. Date field

Created by Danny Wong, Modified on Sun, 09 Aug 2020 at 03:38 PM by Danny Wong

HTML5 has introduced date input type. Browsers supporting this input type render a date field as a calendar-style date picker UI that you choose a date from. Contact Form 7 supports date and date* types of form-tag that correspond with date input type.

Currently, only some modern browsers support this date input type. Older browsers and some modern browsers ~~including Firefox~~ don’t support this input type and just render it as a traditional text input field. Fortunately, Contact Form 7 can provide a fallback for those browsers.

If a value is specified in a date field, the value must be in YYYY-MM-DD format (e.g. 2013-04-08) according to the HTML5 specification. This is in most cases you don’t need to care about because browser’s date picker UI will set a value in the correct format.

OPTION	EXAMPLES	DESCRIPTION
`min:`(date)	`min:2013-01-01`	`min` attribute value of the `input` element. Allowed minimum value for this field. You can use a relative date format (e.g., ‘today+10days’, ‘today-2weeks’) as well.
`max:`(date)	`max:2013-12-31`	`max` attribute value of the `input` element. Allowed maximum value for this field. You can use a relative date format (e.g., ‘today+10days’, ‘today-2weeks’) as well.
`step:`(num)	`step:3`	`step` attribute value of the `input` element. When minimum date is 2013-01-01 and step is 3, acceptable inputs are 2013-01-01, 2013-01-04, 2013-01-07, …
`id:`(id)	`id:foo`	`id` attribute value of the `input` element.
`class:`(class)	`class:bar`	`class` attribute value of the `input` element. To set two or more classes, you can use multiple `class:` option, like `[date your-date class:y2008 class:m01 class:d01]`.
`placeholder` `watermark`		Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Example:

[date* your-date min:2013-01-01 max:2013-12-31 step:7 class:required "2013-04-01"]

Format date value in mail#Format date value in mail

As previously explained, if a value is specified in a date field, the value must be in YYYY-MM-DD format (e.g. 2013-04-08). When the value is inserted into mail template, the date format keeps by default. To change the format in mail, you can use a variant of mail-tag notation [_format_{field name} "{date format}"].

Example:

[_format_your-date "D, d M y"]

D, d, M, and y in the above example are date format character described in the manual page of PHP date() function. "D, d M y" will format 2013-04-08 as Mon, 08 Apr 13. As the format is affected by localization, with the same "D, d M y" format, 2013-04-08 will become 月, 08 4月 13 in Japanese-localized WordPress.