This topic describes how to use the DatePicker component in SPEAK.

The DatePicker control lets users pick a date. It displays a text box with the currently selected date (if any), and when users click inside the text box, a “date picker” opens. When the user clicks a date in the date picker, this date becomes the selected date. Users can also type a date directly in the text box.

You can set a date that is selected by default by specifying this date in the Date property.

You can limit the dates that users can select to a range specified with the MinDate and MaxDate properties. The DatePicker control then disables dates that are not within this range.

You can set and get date in different way in JavaScript (in PageCode, for example).

Setting the date

You can set date in the following ways:

  • Model.set(“date”)

    This sets the date in Sitecore date format. Example code:

    this.DatePicker1.set(“date”, “20131224”)

  • Model.set(“formattedDate”)

    This sets the date in the specified format. Example code:

    this.DatePicker1.set(“formattedDate”, “2013/12/24”)


Another function, Model.viewModel.setDate(), corresponds to set(“formattedDate”) but we recommend that you use Model.set.

Getting the date

You can get the date in the following ways:

  • Model.get(“date”)

    This returns the date in Sitecore date format, for example, 20131224. Example code:


  • Model.get(“formattedDate”)

    This returns the date in the format specified, for example: 2013/12/24. Example code:


  • Model.viewModel.getDate()

    This returns the date as a JavaScript date object, for example: Tue Dec 24 2013 00:00:00 GMT+0100 (Romance Standard Time). Example code:







You use this property to specify a date, and you use it to retrieve the currently selected date. If you specify a date, this date is the initially selected date.

The DatePicker controls only accepts dates in Sitecore date format, for example, 20131224, 20131224T123456 or 20131224T123456:635280071319116097

The current date.


You select a day of the week, from Monday to Sunday. The DatePicker control uses the day that you select as the first day of the week.



The date format. Specify the format using these specifiers:

  • d: day of month (no leading zero)

  • dd: day of month (two digits)

  • o: day of the year (no leading zeros)

  • oo: day of the year (three digits)

  • D: day name short

  • DD: day name long

  • m: month of year (no leading zero)

  • mm: month of year (two digits)

  • M: month name short

  • MM: month name long

  • yy: year (two digits)

  • yyyy: year (four digits)

  • @: Unix timestamp (milliseconds since 01/01/1970)

  • !: Windows ticks (100-nanosecond periods since 01/01/0001)



If True, users can only select dates from the DatePicker control calendar dropdown, and not by manually entering them in the field.



Specify a date that is the last date that users can select.


Specify a date that is the first date that users can select.


If True, the DatePicker control shows 35 days, including the days in a week that are in the previous or in the next month. If False, only the days that are in current month are shown in the DatePicker control.



If True, the control highlights the current day and adds a button that users can click to go to and select the current date.



You can specify Calendar or Textbox. If you specify Calendar, the DatePicker shows only the calendar panel and not the textbox. Users cannot collapse or dispose of the panel.



You can create a configuration item for a DatePicker control by creating an item based on the DatePicker Parameters template.

The configuration item has these specific fields:

  • Date

  • Format

  • FirstDay

  • ShowOtherMonths

  • IsReadOnly

  • MinDate

  • MaxDate

  • ShowToday

  • ShowIcon

It inherits these fields:

  • IsEnabled

  • IsVisible

  • AccessKey

  • Tooltip

  • Behaviors

  • Id