Unplanned
Last Updated: 06 Mar 2020 10:08 by ADMIN
Tom
Created on: 02 Mar 2020 11:56
Category: DatePicker
Type: Feature Request
2
Event for when the month has been changed (DateChanged)
I need an event like in the Calendar component so that I can load DisabledDates on demand, because they are tied to complex logic in my app.
1 comment
ADMIN
Svetoslav Dimitrov
Posted on: 02 Mar 2020 12:08

Hello Tom,

At the moment, only the standalone Calendar component supports such an event, called DateChanged. You can find more information and short code snippet here: https://docs.telerik.com/blazor-ui/components/calendar/events#datechanged.

It also lets you select a single date (live demo sample: https://demos.telerik.com/blazor-ui/calendar/selection), so it can also act as a date picker while providing you with such a user navigation event.

You can take this further and build a custom component which acts like the DatePicker through these steps:

Here's an example of this I made for you so you can see if it suits your needs and tweak it further as needed:

 

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

 

Regards,
Svetoslav Dimitrov
Progress Telerik

 UI for Blazor