[[form]]
fields:
  date-1:
    type: date
[[/form]]

The specific properties you can use on a text field:

• width: specifies the visible field width in columns (fixed spaced characters, more or less). If the autoSize option is enabled, it overrides this property setting.
• options: specifies the jQuery UI Datepicker Widget options to apply.

Here is an example using a few of the available options:

[[form]]
fields:
  mydate:
    type: date
    label: 'My Date Widget'
    options:
      appendText: ' This Demo is Cool!'
      autoSize: true
      changeYear: true
      dateFormat: 'DD, d MM yy'
      firstDay: 1
      showOn: button
      yearRange: '2014:2025'
[[/form]]

• showon: button adds a button after the input field and it must be clicked to open the datepicker.
• autoSize: true automatically sets the width of the input box to fit the date format defined in the dateFormat option.
• changeYear: true creates a dropdown selector of changing the year. This is useful if you don't want to make users click the previous/next links 12 times to move to another year.
• dateFormat: 'DD, d MM yy formats the date selected to something like "Wednesday, 1 October 2014". See the date format reference below for more details on date formats.
• firstDay: 1 tells the calendar to use Monday as the first day of the week for the widget's calendar instead of the default of Sunday (0=Sunday, 1=Monday, …, 6=Saturday).
• yearRange: '2014:2025' limits the year selection to the range specified.

Dates in a date field are stored as a date number and displayed based on the dateFormat option you specifiy. add the altFormat option to use a different date format for your alternate date. If you want to save and use the date as text and not a number, you can use the altField option to place a text version of the date into another field in your data form. The example below will place a copy of the date selected in the mydate field as text into the alt-date field text box on the form. %%form_data{alt-date}%% will be stored in the data form as text.

altDate/altFormat Example

[[form]]
fields:
  mydate:
    type: date
    label: 'This date will fill in'
    options:
      appendText: ' altField Demo'
      autoSize: true
      changeYear: true
      dateFormat: 'DD, d MM yy'
      altField: 'input[name=field-alt-date]'
      altFormat: 'm/d/yy'
      yearRange: '2014:2025'
  alt-date:
    type: text
    label: 'Filled in by date above'
    width: 10
[[/form]]

Live Examples

A very comprehensive demo has been created on the Bootstrap Playground site.
The _template page that drives the demo is located here.

Datepicker Widget Options:

Date Formats Reference