<label for="date-input">Select a date</label>
<div style="position:relative;">
    <TelerikDateInput @bind-Value="@selectedDate" Min="@min" Max="@max" Id="date-input"></TelerikDateInput>
    <TelerikButton Icon="calendar" OnClick="@ToggleCalendar"></TelerikButton>
    <TelerikAnimationContainer @ref="@CalendarContainer" Top="30px" Height="300px" Width="300px">
        <TelerikCalendar Min="@min" Max="@max"
                         Date="@initialDate"
                         Value="@selectedDate"
                         ValueChanged="@((DateTime d) => ViewSelectedDate(d))"
                         DateChanged="@DateChangedHandler">
        </TelerikCalendar>
    </TelerikAnimationContainer>
</div>
<p>Selected date: @selectedDate</p>
<p>@result</p>

@code {
    DateTime initialDate { get; set; } = DateTime.Now;
    DateTime min = new DateTime(2015, 1, 1);
    DateTime max = new DateTime(2025, 12, 31);

    string result { get; set; }

    DateTime selectedDate { get; set; } = DateTime.Now;
    bool CalendarVisible { get; set; } = false;
    TelerikAnimationContainer CalendarContainer { get; set; }

    void DateChangedHandler(DateTime firstDateOfNewRange)
    {
        result = $"the user now sees a range that includes {firstDateOfNewRange}";
        initialDate = firstDateOfNewRange;
    }

    async Task ViewSelectedDate(DateTime input)
    {
        selectedDate = input;
        await CalendarContainer.HideAsync();
    }

    async Task ToggleCalendar()
    {
        await CalendarContainer.ToggleAsync();
    }
}