Behavior Settings

13 Jun 20233 minutes to read

The Essential ASP.NET MVC DatePicker has some default behavior settings which helps to perform more operation by built-in.

Selected Date

The Essential ASP.NET MVC DatePicker value can be selected through picking date from DatePicker calendar or you can set it by using “Value” property.

EJMVC DatePicker allows only the valid date to be entered and it should be within the specified range. By default, strict mode is enabled in DatePicker, so it will restrict invalid date and resets to previous date if it’s not valid. Also the valid date should be defined in specified range or else it resets to min or maximum date when the entered date is out of range. To know more about strict mode refer Strict Mode

Date Range

EJMVC DatePicker provides an option to restrict the user to pick the date from specified range of value. You can utilize this option by make use of ‘MinDate’ and ‘MaxDate’ property.

MinDate - specifies the minimum date to be picked in DatePicker calendar by disabling below date of minDate.

MaxDate - specifies the maximum date to be picked in DatePicker calendar by disabling above date of maxDate.
Refer below example to set min and max date range in DatePicker at initialization (You can change the ‘MinDate’ and ‘MaxDate’ value dynamical as like ‘Value’ property)

CSHTML

@*sets min and max date to be pick able in datepicker*@
  
    @Html.EJ().DatePicker("datePicker").Value(System.DateTime.Now).MinDate("2014/06/03").MaxDate("2014/06/19")

NOTE

You can change the MinDate and MaxDate value dynamically like Value property

Start and Depth Level

Start and depth represents the view of Essential ASP.NET MVC DatePicker calendar. DatePicker calendar has four different level of views, which are month, year, decade and century. It allows you to quick pick date from different months and years by navigating through different views.

By default DatePicker starts with month view and can be drill down into year, decade and century. You can also change the start and depth level view by using StartLevel and DepthLevel property. So that you can initiate DatePicker calendar to view at any level and control the navigation.

“Month” - shows the days in month to pick.
“Year” - shows the months in year to pick.
“Decade” - shows the years in decade to pick.
“Century” - shows the decades in century to pick.

CSHTML

@*sets the start view and defines when the DatePicker calendar to return date*@
        @Html.EJ().DatePicker("datePicker").Value(System.DateTime.Now).StartLevel(Period.Year).DepthLevel(Period.Year).DateFormat("MMMM yyyy")

Display Inline Mode

The Essential ASP.NET MVC DatePicker provides an option to act as calendar by setting the DisplayInline property as true. In this mode the DatePicker calendar has been placed open state constantly to pick the date.
Refer below code example to represent DatePicker as calendar.

CSHTML

@*sets inline to represent datePicker as DatePicker calendar*@

    @Html.EJ().DatePicker("datePicker").Value(System.DateTime.Now).DisplayInline(true)

Strict Mode

Strict mode in Essential ASP.NET MVC DatePicker allows you to enter valid or invalid date in input textbox, but an error class will get added to exhibit if it is an invalid date. When you set EnableStrictMode to false, DatePicker allows you to enter only the valid date or else it will resets with previous value.

Also the valid date should be defined in specified range or else it resets to min or maximum date when the entered date is out of range

By default EnableStrictMode is true, so you can enter any value other than date too, but an error class (“e - error”) will get added to wrapper to highlight the invalid date.

CSHTML

@*sets active strict mode*@

    @Html.EJ().DatePicker("datePicker").Value(System.DateTime.Now).EnableStrictMode(false)

You can also override the error class to highlight when invalid date is entered.

CSHTML

@*sets inactive strict mode*@

    @Html.EJ().DatePicker("datePicker").Value(System.DateTime.Now).EnableStrictMode(true)

CSS

<style>
        /* error class to highlight invalid date */

        .e-error .e-input {
            color: Red; /* highlights invalid date font color in input */
        }
    </style>