TDatePicker

API Manual

TDatePicker displays a text box for date input purpose. When the text box receives focus, a calendar will pop up and users can pick up from it a date that will be automatically entered into the text box. The format of the date string displayed in the text box is determined by the DateFormat property. Valid formats are the combination of the following tokens:

Character      Format Pattern (en-US)
---------------------------------------------------------------------
 d              day digit
 dd             padded day digit e.g. 01, 02
 M              month digit
 MM             padded month digit
 MMM            localized abbreviated month names, e.g. Mar, Apr
 MMMM           localized month name, e.g. March, April
 yy             2 digit year
 yyyy           4 digit year
---------------------------------------------------------------------

The date of the date picker can be set using the Date or Timestamp properties. The Date property value must be in the same format as the pattern specified in the DateFormat property. The Timestamp property only accepts integers such as the Unix timestamp.

TDatePicker has three Mode to show the date picker popup.

  • Basic - Only shows a text input, focusing on the input shows the date picker.
  • Button - Shows a button next to the text input, clicking on the button shows the date, button text can be by the ButtonText property.
  • ImageButton - Shows an image next to the text input, clicking on the image shows the date picker, image source can be change through the ImageUrl property.

The CssClass property can be used to override the CSS class name for the date picker panel. The CalendarStyle property changes the overall calendar style. The following CalendarStyle values are available:

  • default - The default calendar style.

The InputMode property can be set to "TextBox" or "DropDownList" with default as "TextBox". In DropDownList mode, in addition to the popup date picker, three drop down list (day, month and year) are presented to select the date . When InputMode equals "DropDownList", the order and appearance of the date, month, and year will depend on the pattern specified in DateFormat property.

The popup date picker can be hidden by specifying ShowCalendar as false. Much of the text of the popup date picker can be changed to a different language using the Culture property.

The calendar picker year limit can be set using the FromYear and UpToYear properties where FromYear is the starting year and UpToYear is the last year selectable. The starting day of the week can be changed by the FirstDayOfWeek property, with 0 as Sunday, 1 as Monday, etc.

Note 1: If the InputMode is "TextBox", the DateFormat should only NOT contain MMM or MMMM patterns. The server side date parser will not be able to determine the correct date if MMM or MMMM are used. When InputMode equals "DropDownList", all patterns can be used.

Note 2: When the TDatePicker is used together with a validator, the DateFormat property of the validator must be equal to the DateFormat of the TDatePicker AND must set DataType="Date" on the validator to ensure correct validation. See TCompareValidator, TDataTypeValidator and TRangeValidator for details.