ASP.NET Core Blazor [Preview]
Search results

Getting Started

This section briefly explains how to include simple DateRangePicker control in your ASP.NET Core Razor application. You can refer to ASP .NET Core Razor Components Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Adding component to the Application

DateRangePicker component can be rendered by using the EjsDateRangePicker tag helper in ASP.NET Core Razor application. Add the DateRangePicker component in any web page razor in the Pages folder. For example, the DateRangePicker component is added in the ~/Pages/Index.razor page.

The following example shows a basic DateRangePicker component.

    <EjsDateRangePicker id="daterangepicker" placeHolder="Choose a Range"></EjsDateRangePicker>

Run the application

After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

DateRangePicker Sample

Setting the min and max

The minimum and maximum date range can be defined with the help of min and max property. The following example demonstrates to set the min and max on initializing the DateRangePicker.

    <EjsDateRangePicker id="daterangepicker" placeHolder="Choose a Range" min="minDate" max="maxDate"></EjsDateRangePicker>>

    @functions{
        public DateTime minDate {get;set;} = new DateTime(2017, 01, 05);
        public DateTime maxDate {get;set;} = new DateTime(2017, 12, 20);
    }