事件

这篇文章解释了在Blazor的Telerik DateRangePicker中可用的事件:

• StartValueChanged和EndValueChanged
• OnChange
• OnOpen
• OnClose
• ViewChanged
• OnCalendarCellRender

StartValueChanged和EndValueChanged

这两个ValueChanged事件(StartValueChanged而且EndValueChanged)当用户选择一个新的范围时触发。

当用户输入输入时，它们独立触发——只有对应输入的事件触发。

当用户从日历弹出窗口中选择一个范围时，第一次单击总是触发所选日期的开始更改，然后清除范围的结束，因此结束更改事件也会触发默认的值。

用户只能输入输入，这样就会触发相应的事件。从日历弹出框中进行选择也会触发事件。当用户开始修改这些值时，没有办法知道他们的意图是什么——他们是修改一个值还是同时修改两个值，因此没有明确的方法知道用户什么时候完成了对组件的使用。这种逻辑是启发式的，由应用程序决定。

如果AdaptiveRendering在中小型设备上启用StartValueChanged而且EndValueChanged仅当用户单击操作表中的确认按钮时才会触发。

@StartValue ?。ToString("dd MMM yyyy") 
 @EndValue?。ToString("dd MMM yyyy") 
 Changed event does not let you use @bind- // not updating the model will effectively cancel the event EndValue = currEnd; // sample check to execute logic only after the user has selected both ends of the range // if this does not pass, the user has only clicked once in the calendar popup if (currEnd != default(DateTime?)) { Console.WriteLine($"end changed to: {currEnd}. The range is from {StartValue} to {EndValue}"); } } }

这个事件是EventCallback它可以是同步的(返回无效)，或者它也可以是异步的并返回异步任务．

处理程序中的lambda表达式是框架所需要的:https://github.com/aspnet/AspNetCore/issues/12226．

OnChange

的OnChange事件表示用户操作—确认当前值。它在用户按下时触发输入在输入中，或者当输入失去焦点时。当用户开始点击弹出的日历时，焦点也会丢失。

@StartValue ?。ToString("dd MMM yyyy") 
 @EndValue?。ToString("dd MMM yyyy") 
   @code {public DateTime?StartValue {get;设置;} = DateTime.Now;公共DateTime ?EndValue {get;设置;} = DateTime.Now.AddDays(10); async Task OnChangeHandler(DateRangePickerChangeEventArgs e) { Console.WriteLine($"The range is from {e.StartValue} to {e.EndValue}"); // the fields are of type object because you can use nullable or non-nullable DateTime // so you may need to cast them if you want to use the actual DateTime objects ## OnOpen The `OnOpen` event fires before the DateRangePicker popup renders. The event handler receives as an argument an `DateRangePickerOpenEventArgs` object that contains:  | Property | Description | | --- | --- | | `IsCancelled` | Set the `IsCancelled` property to `true` to cancel the opening of the popup. | ````CSHTML   @code { private DateTime? StartValue { get; set; } = DateTime.Now; private DateTime? EndValue { get; set; } = DateTime.Now.AddDays(10); private DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0); private DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45); private void OnDateRangePickerPopupOpen(DateRangePickerOpenEventArgs args) { //set the IsCancelled to true to cancel the OnOpen event args.IsCancelled = false; } }

这个事件是EventCallback它可以是同步的(返回无效)，或者它也可以是异步的并返回异步任务．

的OnChangeEvent是自定义事件，不影响绑定，因此可以与模型和表单一起使用。

OnClose

的OnClose事件在DateRangePicker弹出窗口关闭之前触发。

事件处理程序接收一个参数DateRangePickerCloseEventArgs对象，该对象包含:

@*根据条件取消OnClose事件*@   @code {private DateTime?StartValue {get;设置;} = DateTime.Now;私人DateTime吗?EndValue {get;设置;} = DateTime.Now.AddDays(10);private DateTime Min = new DateTime(1990,1,8,15,0);private DateTime Max = new DateTime(2025, 1,1,19,30,45); private void OnDateRangePickerPopupClose(DateRangePickerCloseEventArgs args) { //cancel the OnClose event based on a condition if (EndValue > DateTime.Today.AddDays(15)) { args.IsCancelled = true; } } }

ViewChanged

的ViewChanged事件在用户更改他们在日历弹出窗口中看到的视图时触发(例如，从一个月中的天数上升到一年中的月份)。

@StartValue ?。ToString("dd MMM yyyy") 
 @EndValue?。ToString("dd MMM yyyy") 
   @code {public DateTime?StartValue {get;设置;} = DateTime.Now;公共DateTime ?EndValue {get;设置;} = DateTime.Now.AddDays(10); async Task ViewChangeHandler(CalendarView currView) { Console.WriteLine($"The user is now looking at the {currView} calendar view"); } }

这个事件是EventCallback它可以是同步的(返回无效)，或者它也可以是异步的并返回异步任务．

OnCalendarCellRender

的OnCalendarCellRender事件在每个视图中的每个日历单元即将呈现时触发。该事件允许您查找当前视图和单元格日期。类的自定义CSS类< td >元素。

事件处理程序接收一个参数DateRangePickerCalendarCellRenderEventArgs对象，该对象包含:

使用OnCalendarCellRender事件自定义日历单元格。*@   @code {private DateTime?StartValue {get;设置;} = DateTime.Now;私人DateTime吗?EndValue {get;设置;} = DateTime.Now.AddDays(10);private DateTime Min = new DateTime(1990,1,8,15,0); private DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45); private void OnCalendarCellRenderHandler(DateRangePickerCalendarCellRenderEventArgs args) { if (args.View == CalendarView.Month) { args.Class = args.Date.Day % 3 == 0 ? "special" : ""; } else if (args.View == CalendarView.Decade) { args.Class = args.Date.Year == 2020 ? "special" : ""; } } } 

另请参阅

• ValueChanged和Validation
• 只触发一次OnChange