Default Date Edit
This example demonstrates the Bootstrap Date Edit control with default settings. The Bootstrap Date Edit control is a date editor control that combines the functionality of a single-line text editor, button editor, and drop-down calendar.
<dx:BootstrapDateEdit runat="server" Date="1.1.2017">
</dx:BootstrapDateEdit>
Time Section
The Date Edit control allows you to edit date-time values using a time section of drop-down window or directly within an edit box. The time section settings can be accessed through the TimeSectionProperties property:
The EditFormat property allows you to specify whether the edit box should display a date, time, or both.
<dx:BootstrapDateEdit runat="server" Date="1.1.2017 8:00" EditFormat="DateTime">
<TimeSectionProperties Visible="true" />
</dx:BootstrapDateEdit>
Multi-Month View
This example illustrates the multi-month view feature. The drop-down calendar of the Date Edit control below simultaneously displays multiple months, organizing them into several rows and columns.
<dx:BootstrapDateEdit runat="server">
<CalendarProperties Columns="2"></CalendarProperties>
</dx:BootstrapDateEdit>
Disabled Dates
In this example, some of the dates displayed by the Date Edit control's drop-down calendar are disabled, so they appear grayed out and cannot be selected. The control provides two approaches to disabling dates.
If a disabled date is typed into the input element, it is considered invalid and is handled by the editor in a way specified by the DateOnError property.
<dx:BootstrapDateEdit ID="DateEditDisabledDates" runat="server" OnCalendarCustomDisabledDate="DateEdit_CustomDisabledDate" DateOnError="Null">
<ClientSideEvents CalendarCustomDisabledDate="onCustomDisabledDate" />
</dx:BootstrapDateEdit>
protected void Page_Load(object sender, EventArgs e) {
DateEditDisabledDates.DisabledDates.AddRange(GetDisabledDates());
}
public IEnumerable<DateTime> GetDisabledDates() {
List<DateTime> disabledDates = new List<DateTime>();
disabledDates.Add(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 7));
disabledDates.Add(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 11));
disabledDates.Add(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 13));
disabledDates.Add(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 17));
disabledDates.Add(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 19));
return disabledDates;
}
protected void DateEdit_CustomDisabledDate(object sender, CalendarCustomDisabledDateEventArgs e) {
if(e.Date.DayOfWeek == DayOfWeek.Wednesday)
e.IsDisabled = true;
}
function onCustomDisabledDate(s, e) {
if(e.date.getDay() == 3)
e.isDisabled = true;
}
Null Text
This example illustrates how the NullText property can be used to display prompt text (watermark) in the editor's edit box. Specified text is displayed when the value of the editor is null and the editor is not focused. The prompt text disappears when the editor receives focus. To show the null text even in the focused editor set the NullTextDisplayMode property to UnfocusedAndFocused.
<dx:BootstrapDateEdit runat="server" NullText="Enter Your Birth Date">
</dx:BootstrapDateEdit>
Mask
In this example, the Date Edit control takes advantage of the masked input feature to only accept values in a specific date format. To enable masked input within a date editor, the UseMaskBehavior property should be set to true.
The mask is specified using the EditFormatString property when the EditFormat property is set to Custom.
<dx:BootstrapDateEdit runat="server" Date="1.1.2017" EditFormat="Custom" EditFormatString="MMMM dd, yyyy" UseMaskBehavior="true">
</dx:BootstrapDateEdit>
The DisplayFormatString property specifies the pattern used to format the value of an editor for display purposes when the editor is not focused. Display values can be formatted using the standard formatting mechanism described in MSDN. For more information about composing format patterns, see the following MSDN topics: Numeric Format Strings and Date and Time Format Strings.
<dx:BootstrapDateEdit runat="server" Date="1.1.2017" DisplayFormatString="D">
</dx:BootstrapDateEdit>
Caption and HelpText
In this example, the Date Edit control displays a caption on the top and auxiliary help text at the bottom of the editor.
<dx:BootstrapDateEdit runat="server" Caption="Birthday" HelpText="Enter your birthday">
<ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
</dx:BootstrapDateEdit>
Picker Type
The DevExpress Bootstrap Date Edit control (BootstrapDateEdit) allows you to specify which date component users can select in the control: day, month, year, or decade.
The following APIs specify the date picker settings:
- PickerType - Specifies a date component a user can select (a day, month or year).
- InitialView - Specifies the initial calendar view.
- MaxView - Sets the earliest available calendar view. For example, if the MaxView property is set to "Months", the picker displays the months of a particular year and January is the earliest available calendar view item.
PickerType="Months"
InitialView="Years"
MaxView="Years"
<div class="pb-3">
<dx:BootstrapDateEdit runat="server" PickerType="Months">
</dx:BootstrapDateEdit>
<div class="col-md-12">
PickerType="Months"
</div>
</div>
<div class="pb-3">
<dx:BootstrapDateEdit runat="server" PickerType="Months">
<CalendarProperties>
<FastNavProperties InitialView="Years" MaxView="Years" />
</CalendarProperties>
</dx:BootstrapDateEdit>
<div class="col-md-12">
PickerType="Months"<br />
InitialView="Years"<br />
MaxView="Years"<br />
</div>
</div>
<div class="pb-3">
<dx:BootstrapDateEdit runat="server" PickerType="Years">
</dx:BootstrapDateEdit>
<div class="col-md-12">
PickerType="Years"
</div>
</div>
Adaptivity
The Date Edit control's drop-down calendar can be wider than the browser window, for example on a device with a smaller screen. In this case, set the SettingsAdaptivity.Mode property to "OnWindowInnerWidth" to display the drop-down calendar as a modal window.
The following API members specify the date edit's adaptive settings:
<dx:BootstrapDateEdit runat="server" Caption="Check-In" HelpText="Registration will be closed in 5 days">
<SettingsAdaptivity Mode="OnWindowInnerWidth" SwitchToModalAtWindowInnerWidth="750" />
<TimeSectionProperties Visible="true"></TimeSectionProperties>
<CalendarProperties HighlightToday="false" ShowTodayButton="false" ShowClearButton="false" />
</dx:BootstrapDateEdit>
You can set the PickerDisplayMode property to "ScrollPicker" or "Auto" to enable Scroll Picker mode. In this mode, the Date Edit displays rotating wheels for each date component (day, month, year, time).
"Auto", as demonstrated in this demo, affects the Date Edit in adaptive mode only. It specifies that the drop-down window's appearance (regular calendar or scroll picker) depends on the browser window's width.
<dx:BootstrapDateEdit runat="server" PickerDisplayMode="Auto" Caption="Choose a date">
<SettingsAdaptivity Mode="OnWindowInnerWidth" SwitchToModalAtWindowInnerWidth="750" />
<TimeSectionProperties Visible="true" />
<CalendarProperties HighlightToday="false" ShowTodayButton="false" ShowClearButton="false" />
</dx:BootstrapDateEdit>