日期选择

用户可以根据开发人员设置的Calendar配置选择一个或模式日期。他们也可能被禁止选择某些被禁用的日期。

本文包含以下部分:

• 选择模式
• 接收用户选择
  • 单一选择模式
  • 多选模式
  • 范围选择模式
• 禁用日期

选择模式

控件可以控制用户可以选择的日期数量SelectionMode财产。它需要一个元素Telerik.Blazor.CalendarSelectionMode枚举，可以为:

• 单
• 多个
• 范围

中预选日期单的选择模式价值属性设置为所需日期。

中预选日期多个选择模式，使用SelectedDates类型的属性< DateTime列表>．

在范围选择模式，您可以获得用户选择范围的开始和结束日期RangeStart和RangeEnd类型参数DateTime．你也会得到事件RangeStartChanged和RangeEndChanged．您可以阅读更多关于它们的内容，并在事件篇文章。

接收用户选择

你可以获得用户选择的方式取决于你使用的选择模式:

• 单一选择模式
• 多选模式
• 范围选择模式

单一选择模式

当使用单一选择模式时，您可以通过以下方式获取所选日期:

• 双向绑定价值参数
• 的ValueChanged事件-事件处理程序接收一个DateTime对象作为参数，表示新的选定日期。

你可以在下面找到这两种情况的例子。

@*对于单个选择，您可以使用所选日期的双向绑定*@   
 SelectedDate: @SelectedDate 
 @code {private DateTime SelectedDate {get;设置;} = DateTime.Now.Date;private DateTime startDate = DateTime. now . date;｝

这个例子展示了如何处理单个选择。单" ValueChanged="SelectionHandler">  
 Selected Date: @SelectedDate 
 @code { private DateTime SelectedDate { get; set; } private DateTime startDate = new DateTime(2019, 5, 2); public void SelectionHandler(DateTime selectedDate) { SelectedDate = selectedDate; } }

多选模式

具有多重选择模式，获得用户选择，使用SelectedDates属性中的组件引用ValueChanged处理程序。

这个例子展示了如何处理多重选择*@   @if (SelectedDates.Any()) { 
 @foreach (var date in SelectedDates) { 
 @date.ToShortDateString() 
 } 
 } @code { private List SelectedDates { get; set; } = new List(); private TelerikCalendar CalendarRef { get; set; } private void OnCalendarValueChanged() { SelectedDates = CalendarRef.SelectedDates; } }

范围选择模式

使用范围选择模式，你有两个选项来获得用户的选择:

• 双向绑定RangeStart(表示选择的第一个日期)和RangeEnd(选择的最后日期)参数。
• 处理RangeStartChanged和RangeEndChanged事件

@*这个例子展示了如何通过双向绑定处理范围选择*@   
开始:@RangeStart 
结束:@RangeEnd 
 @code {public DateTime Date {get;设置;} = DateTime.Now.AddDays(-5);public DateTime RangeStart {get;设置;} = DateTime.Now.Date;public DateTime RangeEnd {get;设置;} = DateTime.Now.AddDays(15).Date;//当用户选择一个范围时，RangeEnd值将是默认值(DateTime) //也就是说，当用户在日历中只单击一次时

禁用日期

为防止用户选择某些日期(例如假日)，请将这些日期添加到DisabledDates收集。

与单和多个选择时，用户不能选择这些日期。与范围选择时，这些日期不能是范围的开始或结束，但可以包含在范围中。

@*用户将无法选择2019年4月1日和2日。*@   
 @if (chosenDates != null && chosenDates.Count > 0) { 
 @foreach (DateTime date in chosenDates) { 
@date.ToString("dd MMM yyyy")
 } 
 } @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 DisabledDates = new List() { new DateTime(2019, 4, 1), new DateTime(2019, 4, 2) }; // fields to store and render the user selection private List 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; } }

另请参阅

• 现场演示:日历选择