Syncfusion DatePicker Calendar

<div class="control-section">
    <div id="wrapper" class="datepicker-section">
        <div id="datepicker-control">
            <SfDatePicker TValue="DateTime?" @bind-Value="@SelectedDate" Format="MM-dd-yyyy">
                <DatePickerEvents TValue="DateTime?" ValueChange="@SelectedDateOnChange"></DatePickerEvents>
            </SfDatePicker>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 150px;
        margin: 0px auto;
        padding-top: 20px;
    }
</style>

public DateTime? SelectedDate { get; set; } = DateTime.Now;

        protected async Task SelectedDateOnChange(Syncfusion.Blazor.Calendars.ChangedEventArgs<DateTime?> args)
        {
            SelectedDate = args.Value;
            StateHasChanged();

            await this.RefreshGrid();
        }

        protected async Task RefreshGrid()
        {
            ...
        }

Sources:

https://blazor.syncfusion.com/demos/datepicker/default-functionalities?theme=bootstrap4

https://blazor.syncfusion.com/documentation/datepicker/data-binding/