ASP.NET Core Blazor [Preview]
Search results

Getting Started

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

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

The following example shows a basic DateTimePicker component.

    <EjsDateTimePicker id='datetimepicker' placeholder='Select a date and time'></EjsDateTimePicker>

Run the application

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

Output be like the below.

DateTimePicker Sample

Setting the min and max

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

    <EjsDateTimePicker id="datetimeicker" value="@value" min="@minDate" max="@maxDate"></EjsDateTimePicker>

    @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);
    }