ASP.NET Core Blazor [Preview]
Search results

Getting Started

This section briefly explains how to include simple DatePicker 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

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

The following example shows a basic DatePicker component.

    <EjsDatePicker id='datepicker' placeholder='Choose a Date'></EjsDatePicker>

Run the application

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

Output be like the below.

DatePicker Sample

Setting the value, and min and max dates

The following example demonstrates how to set the value, min and max dates on initializing the DatePicker. Here you can able to select a date within a range from 5th to 27th of this month.

    <EjsDatePicker id='datepicker' value='@value' min='@minDate' max='@maxDate'></EjsDatePicker>

    @functions{
        public DateTime value {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,10);
        public DateTime minDate {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,05);
        public DateTime maxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);
    }