如何将RadzenDatePicker的值绑定到TimeOnly属性？

问题描述 #

我正使用RadzenDatePicker仅获取时间值，已将其设置为仅显示时间而非日历，但无法将它返回的DateTime类型值绑定到TimeOnly属性。请问能否实现该绑定？

代码示例 #

<RadzenDatePicker style="display: block; width: 100%" 
                  @bind-Value="@station.OpenTime" 
                  Name="OpenTime" 
                  TValue="TimeOnly" 
                  ShowTime="true" 
                  HourFormat="12"
                  TimeOnly="true"/>

报错信息 #

System.InvalidCastException: Unable to cast object of type 'System.DateTime' to type 'System.TimeOnly'.
         at Radzen.Blazor.RadzenDatePicker`1.OnChange()
         at Radzen.Blazor.RadzenDatePicker`1.OkClick()
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

解决方案 #

可以实现绑定，但需要通过中间属性做类型转换来规避组件内部的类型强制转换问题。原因是RadzenDatePicker在TimeOnly=true模式下，内部仍会生成DateTime类型的值，直接指定TValue=TimeOnly会触发类型转换异常。

具体实现步骤：

1. 在组件类中定义一个DateTime?类型的中间变量，用于和RadzenDatePicker绑定。
2. 通过ValueChanged事件将中间变量的DateTime值转换为TimeOnly，同步到目标属性；初始化时则将TimeOnly值转换为DateTime赋值给中间变量。

示例代码：

组件类代码

// 目标TimeOnly属性
public TimeOnly OpenTime { get; set; }

// 中间绑定变量
private DateTime? _openTimeDateTime;

protected override void OnInitialized()
{
    // 初始化：将TimeOnly转换为DateTime（基于当天日期）
    _openTimeDateTime = DateTime.Today.Add(OpenTime);
}

Razor模板代码

<RadzenDatePicker style="display: block; width: 100%" 
                  @bind-Value="@_openTimeDateTime" 
                  Name="OpenTime" 
                  TValue="DateTime?" 
                  ShowTime="true" 
                  HourFormat="12"
                  TimeOnly="true"
                  ValueChanged="@(value => {
                      if (value.HasValue)
                      {
                          OpenTime = TimeOnly.FromDateTime(value.Value);
                      }
                  })"/>

另外，也可以检查Radzen组件库的最新版本，确认是否已原生支持TimeOnly类型的直接绑定。如果当前使用的版本较低，升级后可能无需中间属性即可实现绑定。

内容的提问来源于stack exchange，提问作者Ibrahim Timimi