Default Date Edit

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. This example demonstrates the Bootstrap Date Edit control with default settings.

@(Html.DevExpress()
    .BootstrapDateEdit("dateEditDefault")
    .Value("01/01/2017")
)

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.

@(Html.DevExpress()
    .BootstrapDateEdit("multiMonthViewDateEdit")
    .CalendarProperties(properties => properties.Columns(2))
)

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 the following approache to disable 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 method.

@(Html.DevExpress()
    .BootstrapDateEdit("disabledDatesDateEdit")
    .ClientSideEvents(events=> events.CalendarCustomDisabledDate("onCustomDisabledDate"))
    .DateOnError(DateOnError.Null)
)
function onCustomDisabledDate(args) {
    if(args.date.getDay() == 3)
        args.isDisabled = true;
}

Null Text

This example illustrates how the NullText method 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, call the NullTextDisplayMode method with the UnfocusedAndFocused argument.

@(Html.DevExpress()
    .BootstrapDateEdit("nullTextDateEdit")
    .NullText("Enter Your Birth Date")
)

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 use masked input, call the EditFormat method with the Custom argument. The mask is specified using the EditFormatString method.

@(Html.DevExpress()
    .BootstrapDateEdit("maskDateEdit")
    .Value("01/01/2017")
    .EditFormat(EditFormat.Custom)
    .EditFormatString("MMMM dd, yyyy")
    .UseMaskBehavior(true)
)

Display Format

The DisplayFormatString method allows yout to specify 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.

@(Html.DevExpress()
    .BootstrapDateEdit("displayFormatDateEdit")
    .Value("01/01/2017")
    .DisplayFormatString("D")
)

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.

@(Html.DevExpress()
    .BootstrapDateEdit("captionAndHelpTextDateEdit")
    .Caption("Birthday")
    .HelpText("Enter your birthday")
)
Screen Size
Color Themes
Demo QR Code