Blazor的Telerik UI吗?下载30天免费试用

日历导航

用户可以在日历中浏览几个不同的视图——从一个世纪到一个月。您可以控制用户在哪个视图中开始,日历最初显示的日期,用户可以进入的深度,还可以通过代码导航到所需的日期和视图。

日历显示箭头,让用户在相邻的时间段之间切换。单击今天按钮导航到当前视图中包含当前日期的时间段。

例如,当前日期为2019年4月,当前视图为月视图,则用户可以按前进箭头和后退箭头分别跳转到2019年3月和2019年5月。

属性可以控制用户可以走多远最小值而且马克斯属性。

“上一步”和“下一步”导航默认启用。您可以控制用户可以浏览的最小和最大日期范围

用户从2019年4月开始使用,可以在2019年1月至2019年7月之间导航。
@code {DateTime startDate = new DateTime(2019, 4,1);DateTime minDate = new DateTime(2019, 1,1);DateTime maxDate = new DateTime(2019, 7,31);CalendarView selectedView {get;设置;} = CalendarView.Month;}

上面代码片段的结果

Blazor Prev Next导航

上下切换查看细节

日历提供了几个视图,向用户显示不同的时间段:

  • 世纪
  • 十年
  • 一年

用户可以单击当前视图中的项目以进入更详细的视图。他们可以单击顶部的当前范围来导航到更大的视图,在那里导航更大的时间部分更容易(例如,年,甚至几十年)。

控件可以控制初始视图视图属性的成员Telerik.Blazor.CalendarView枚举,如上面所列。

若要控制用户可以进入的详细信息,请设置BottomView而且赢富数据参数设置为相同枚举的成员。

控制当前视图和用户可以进入的深度

用户只能在TopView和BottomView下到年份。

The selected date is: @selectedDate @code { private DateTime min = new DateTime(2015, 1, 1); private DateTime max = new DateTime(2025, 12, 31); private CalendarView SelectedView { get; set; } = CalendarView.Decade; private string selectedDate = ""; private void MyValueChangeHandler(DateTime newValue) { selectedDate = newValue.ToString(); StateHasChanged(); } }

TopView和BottomView

BottomView设置用户可以浏览的最大细节级别。默认值为CalendarView。月.如果视图未设置时,日历将初始显示其BottomView

赢富数据设置最小级别的细节(即最大级别的数据聚合)。默认值为CalendarView。世纪

程序化的导航

您可以使Calendar组件移动到某个日期并通过其查看日期而且视图支持双向绑定的参数。最小/最大和顶部/底部视图的约束适用于编程导航和用户导航。

将日历导航到日期并以编程方式查看

@*程序化日历导航*@   更新视图 @code {CalendarView CalendarView {get;设置;} = CalendarView.Month;DateTime startDate {get;设置;} = new DateTime(2019, 5,2);DateTime min = new DateTime(2015, 1,1);DateTime max = new DateTime(205,12,31);UpdateView() {calendarView = calendarView . year;startDate = new DateTime(2018,5,2); } }

另请参阅

在本文中
Baidu
map