Demos About Radzen
Search Results for

    Show / Hide Table of Contents

    DatePicker component

    This article demonstrates how to use the DatePicker component.

    Get and set the value

    As all Radzen Blazor input components the DatePicker has a Value property which gets and sets the value of the component. Use @bind-Value to get the user input.

    <RadzenDatePicker @bind-Value=@value Change=@OnChange />
    @code {
        DateTime? value = DateTime.Today;
    
        void OnChange(DateTime? value)
        {
            Console.WriteLine($"Value changed to {value}");
        }
    }
    

    Use DateFormat property to specify format of the DateTime value displayed in the component input.

    <RadzenDatePicker @bind-Value=@value DateFormat="d" />
    

    Use ShowTime, ShowSeconds, ShowTimeOkButton and TimeOnly properties to control the time parts visibility of the DatePicker.

    <RadzenDatePicker @bind-Value=@value ShowTime="true" ShowSeconds="true" ShowTimeOkButton="true" TimeOnly="true" />
    

    Use HoursStep, MinutesStep and SecondsStep properties to set step for the time numeric inputs of the DatePicker.

    <RadzenDatePicker @bind-Value=@value HoursStep="1.5" MinutesStep="5" SecondsStep="10"  />
    

    Use Inline="true" to display just the calendar component of the DatePicker.

    <RadzenDatePicker @bind-Value=@value Inline="true" />
    

    Use DateRender event to set attributes for the date.

    <RadzenDatePicker @bind-Value=@value DateRender=@DateRenderSpecial />
    @code {
        DateTime? value = DateTime.Today;
        IEnumerable<DateTime> dates = new DateTime[] { DateTime.Today.AddDays(-1), DateTime.Today.AddDays(1) };
    
        void DateRenderSpecial(DateRenderEventArgs args)
        {
            if (dates.Contains(args.Date))
            {
                args.Attributes.Add("style", "background-color: #ff6d41; border-color: white;");
            }
    
            args.Disabled = dates.Contains(args.Date);
        }
    }
    

    Boost your Blazor development with Radzen

    Radzen is a desktop tool that gives you the power to create line of business applications. Build and launch Blazor apps visually, while we generate clean code for you.

    Learn More

    Download Radzen
    Download Radzen
    In This Article
    Back to top Radzen Blazor Components, © 2018-2022 Radzen. Source Code licensed under MIT