Date Edit

• Dec 18, 2019
• 3 minutes to read

The BootstrapDateEdit control is a date editor control that combines the functionality of a single-line text editor, button editor and dropdown calendar.

<dx:BootstrapDateEdit runat="server" Date="2016-06-08">
</dx:BootstrapDateEdit>

Note

Online Demo: Date Edit

Bootstrap Date Edit offers the following features.

• Null Prompt Text

  The prompt text can be displayed if the editor’s value is null and the editor is not focused. The prompt text disappears when the editor receives focus. You can define the prompt text using the ASPxDateEdit.NullText property.

  <dx:BootstrapDateEdit runat="server" NullText="Enter Your Birth Date">
  </dx:BootstrapDateEdit>
  

  Note

  Online Demo: Date Edit - Null Text

• Edit Formatting

  You can specify how an editor value is represented within the edit boxes. For display and edit purposes, the edited value can be displayed in the following formats.

  View	Affected Properties
  	EditFormat=”Time”
  	EditFormat= “Date”
  	EditFormat=”DateTime”
  	EditFormat=”Custom” EditFormatString:=”MMMM dd, yyyy hh:mm tt”

  <dx:BootstrapDateEdit runat="server" Date="2016-06-08" EditFormat="Custom" EditFormatString="MMMM dd, yyyy" UseMaskBehavior="true">
  </dx:BootstrapDateEdit>
  

  Note

  Online Demo: Date Edit - Mask

• Display Formatting

  The editor display value can be formatted for display purposes when the editor is not focused using the DateEditProperties.DisplayFormatString property.

  <dx:BootstrapDateEdit runat="server" Date="2016-06-08" DisplayFormatString="D">
  </dx:BootstrapDateEdit>
  

  Note

  Online Demo: Date Edit - Display Format

• Masked Input

  If the DateEditProperties.UseMaskBehavior property is set to true, the BootstrapDateEdit editor supports masked input. In this mode, the pattern defined using the ASPxDateEdit.EditFormatString property serves as a mask.

  <dx:BootstrapDateEdit runat="server" Date="2016-06-08" EditFormat="Custom" EditFormatString="MMMM dd, yyyy" UseMaskBehavior="true">
  </dx:BootstrapDateEdit>
  

  Note

  Online Demo: Date Edit - Mask

• Customizable Minimum and Maximum Dates

  You can define the minimum and maximum allowed dates by the ASPxDateEdit.MinDate and ASPxDateEdit.MaxDate properties; this enables end-user input to be limited by the specified range.

• Out of Range Warning

  If the ASPxDateEdit.ShowOutOfRangeWarning property is set to true, the BootstrapDateEdit editor displays a warning message when an end-user types a date that is out of the range specified by the ASPxDateEdit.MinDate and ASPxDateEdit.MaxDate properties.

  

• Easy Date Selection

  The BootstrapDateEdit allows end-users to edit a date value by selecting it within a drop-down calendar, or by typing a date directly into the editor’s text box, or by using the mouse wheel or keyboard.

• Date Range Picker

  Two BootstrapDateEdit controls can be combined to implement a date range picker functionality. The ASPxDateEdit.DateRangeSettings property provides access to settings related to date range selection.

  

• Customizable Button Collection

  The BootstrapDateEdit control provides a collection to maintain its custom edit buttons. Each button exposes a set of properties allowing the button’s appearance and behavior to be defined. The settings of the default button, which invokes the dropdown calendar when clicked, can be customized as well.

• Built-in Validation

  The BootstrapDateEdit control allows you to perform data validation both on the client and server side. See the Validation topic to learn more.

• Full-Featured Client-Side API

  BootstrapDateEdit provides you with a comprehensive client-side API. This API is implemented using JavaScript and is exposed using the BootstrapClientDateEdit object. The BootstrapClientDateEdit object serves as a client-side equivalent of the BootstrapDateEdit control.

  You can modify the editor behavior using the following methods.

  Method	Description
  ASPxClientDateEdit.GetCalendar	Returns the calendar of the date editor.
  ASPxClientDateEdit.GetDate	Gets the date that is the editor’s value.
  ASPxClientDateEdit.GetMaxDate	Gets the maximum date of the editor.
  ASPxClientDateEdit.GetMinDate	Gets the minimum date of the editor.
  ASPxClientDateEdit.SetMaxDate	Sets the maximum date of the editor.
  ASPxClientDateEdit.SetMinDate	Sets the minimum date of the editor.