Date Selection
The user can select one or mode dates depending on the Calendar configuration set by the developer. They may also be forbidden selection of certain disabled dates.
This article contains the following sections:
Selection Mode
To control how many dates the user can select, use the SelectionMode property. It takes a member of the Telerik.Blazor.CalendarSelectionMode enum and can be:
SingleMultipleRange
You can pre-select a date in Single selection mode by setting the Value property of the calendar to the desired date.
To pre-select dates in the Multiple selection mode, use the SelectedDates property which is of type List<DateTime>.
In Range selection mode you can get the start and end dates of the range the user selected through the RangeStart and RangeEnd parameters of type DateTime. You also get events RangeStartChanged and RangeEndChanged. You can read more about them and see an example in the Events article.
Receive User Selection
The way you can get the user selection depends on the selection mode you use:
Single Selection Mode
When using single selection mode, you can get the selected date through:
- two-way binding of the
Valueparameter - the
ValueChangedevent - the event handler receives aDateTimeobject as parameter which represents the new selected date.
You can find examples of both below.
Two-way binding for the selected date
<TelerikCalendar @bind-Date="@startDate"
@bind-Value="@SelectedDate"
SelectionMode="@CalendarSelectionMode.Single">
</TelerikCalendar>
<p>
Selected Date: @SelectedDate
</p>
@code {
private DateTime SelectedDate { get; set; } = DateTime.Now.Date;
private DateTime startDate = DateTime.Now.Date;
}
Handle Single selection in the Calendar through an event
<TelerikCalendar @bind-Date="@StartDate"
SelectionMode="@CalendarSelectionMode.Single"
Value="@SelectedDate"
ValueChanged="SelectionHandler">
</TelerikCalendar>
<p>
Selected Date: @SelectedDate.ToShortDateString()
</p>
@code {
private DateTime SelectedDate { get; set; } = DateTime.Today;
private DateTime StartDate = DateTime.Today;
private void SelectionHandler(DateTime newDate)
{
SelectedDate = newDate;
}
}
Multiple Selection Mode
With multiple selection mode, to get the user selection, use the SelectedDates property of the component reference in the ValueChanged handler.
Handle Multiple selection in the Calendar
<TelerikCalendar @ref="@CalendarRef"
SelectionMode="@CalendarSelectionMode.Multiple"
ValueChanged="@OnCalendarValueChanged">
</TelerikCalendar>
@if (SelectedDates.Any())
{
<ul>
@foreach (var date in SelectedDates)
{
<li>
@date.ToShortDateString()
</li>
}
</ul>
}
@code {
private List<DateTime> SelectedDates { get; set; } = new List<DateTime>();
private TelerikCalendar CalendarRef { get; set; }
private void OnCalendarValueChanged()
{
SelectedDates = CalendarRef.SelectedDates;
}
}
Range Selection Mode
With range selection mode, the range selection is alternating, meaning every odd click sets the value of the RangeStart parameter, while every even click sets the value of the RangeEnd parameter.
Setting either value may reset the other value if the range is not valid. The range is not valid if the RangeStart value is after the RangeEnd value. To set such range as valid you can use the AllowReverse parameter.
With range selection mode, you have two options to get the user choice:
- Configure two-way binding for the
RangeStartand theRangeEndparameters, OR - Use one-way binding for
RangeStartand theRangeEndparameters and handle the RangeStartChanged and RangeEndChanged events.
Range selection with two-way binding and AllowReverse
@* This example shows how to handle Range selection through two-way binding *@
<TelerikCheckBox Id="myCheckBox" @bind-Value="@AllowReverse" />
<label for="myCheckBox">@(AllowReverse ? "Allowed reverse selection" : "Not allowed reverse selection")</label>
<br />
<TelerikCalendar Views="2"
Date="@Date"
@bind-RangeStart="@RangeStart"
@bind-RangeEnd="@RangeEnd"
SelectionMode="@CalendarSelectionMode.Range"
ShowOtherMonthDays="false"
AllowReverse="@AllowReverse">
</TelerikCalendar>
<p>
Start: @RangeStart
<br />
End: @RangeEnd
</p>
@code {
private DateTime Date { get; set; } = DateTime.Now.AddDays(-5);
private DateTime RangeStart { get; set; } = DateTime.Now.Date;
private DateTime RangeEnd { get; set; } = DateTime.Now.AddDays(15).Date;
private bool AllowReverse { get; set; }
// the RangeEnd value will be the default(DateTime) while the user is selecting a range
// that is, while they have clicked only once in the calendar
}
Disabled Dates
To prevent the user from selecting certain dates (for example, holidays), add those dates to the DisabledDates collection.
With Single and Multiple selection, the user can't select these dates. With Range selection, these dates cannot be the start or end of a range, but can be included in the range.
Add Disabled dates to a Calendar with Multiple selection
@* The user will not be able to select the first and second of April 2019. *@
<TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple"
ValueChanged="@MultipleSelectionChangeHandler"
DisabledDates="@DisabledDates"
@bind-Date="@startDate"
@ref="multipleSelCalendar">
</TelerikCalendar>
<br />
@if (chosenDates != null && chosenDates.Count > 0)
{
<ul>
@foreach (DateTime date in chosenDates)
{
<li>@date.ToString("dd MMM yyyy")</li>
}
</ul>
}
@code {
private DateTime startDate = new DateTime(2019, 4, 1); // set the initial date of the calendar
// set dates the user can't select
private List<DateTime> DisabledDates = new List<DateTime>() { new DateTime(2019, 4, 1), new DateTime(2019, 4, 2) };
// fields to store and render the user selection
private List<DateTime> chosenDates { get; set; }
// reference used to obtain the selected dates from a multiple selection calendar
private Telerik.Blazor.Components.TelerikCalendar multipleSelCalendar;
private void MultipleSelectionChangeHandler()
{
//with multiple selection, get the selected dates from a component reference
chosenDates = multipleSelCalendar.SelectedDates;
}
}