Search results

Customization in ASP.NET MVC DateRangePicker control

20 Oct 2021 / 1 minute to read

The DateRangePicker is available for UI customization that can be achieved by using available properties and events in the control.

Day cell format

The DateRangePicker is available for UI customization based on your application requirements. It can be achieved by using renderDayCell event that provides an option to customize each day cell on rendering.

The following example disables the weekends of every month by using renderDayCell event.

Copied to clipboard
@Html.EJS().DateRangePicker("element").RenderDayCell("onRenderCell").Placeholder("Select a Range").Render()

    function onRenderCell(args) {
        if ( == 0 || == 6) {
            //sets isDisabled to true to disable the date.
            args.isDisabled = true;
            //To know about the disabled date customization, you can refer in "styles.css".

First day of week

Start day in a week will differ based on the culture, but you can also customize this based on the application needs. For this, you have to make use of firstDayOfWeek property. By default, first day of a week in en-US is Sunday. In the following example it is customized to Monday with the help of this property.

Copied to clipboard

See Also