Blazor中绑定DateTime的type=time输入框无法编辑如何解决

问题原因 #

• 双向绑定不同步：my_DateTime属性的get方法每次取值都会从mytimestring转换生成新值，修改前端值触发set方法时，只更新了_my_DateTime字段，没有同步修改mytimestring的值。下次属性读取时旧的mytimestring会覆盖修改后的值，看起来就像编辑不生效。
• 时间格式不匹配：HTML的<input type="time">要求绑定的DateTime值使用HH:mm格式，Blazor默认DateTime格式不符合要求，会导致绑定失效。
• 语法错误：mytimestring属性的OnPropertyChanged参数少了左引号，会触发编译错误。

修复方案 #

1. 修改input绑定代码，添加格式声明 #

<input type="time" style="width:100%" @bind="my_DateTime" @bind:format="HH:mm" />

2. 修正my_DateTime属性逻辑，同步更新时间字符串 #

private DateTime? _my_DateTime;
[Parameter]
public DateTime? my_DateTime
{
    get
    {
        // 只有当_my_DateTime为空且mytimestring有值时才转换，避免每次读取都覆盖
        if (_my_DateTime == null && !string.IsNullOrEmpty(mytimestring))
        {
            _my_DateTime = Convert.ToDateTime(mytimestring);
        }
        return _my_DateTime;
    }
    set
    {
        _my_DateTime = value;
        // 把修改后的时间同步回mytimestring，保持两个属性一致
        if (value.HasValue)
        {
            mytimestring = value.Value.ToString("HH:mm");
        }
        else
        {
            mytimestring = string.Empty;
        }
        OnPropertyChanged("my_DateTime");
    }
}

3. 修正mytimestring属性的语法和逻辑 #

private string _mytimestring;
[Parameter]
public string mytimestring 
{
    get
    {
        return _mytimestring;
    }
    set
    {
        _mytimestring = value;
        // 补全参数的左引号
        OnPropertyChanged("mytimestring");
        // mytimestring修改时同步清空_my_DateTime，触发重新转换
        _my_DateTime = null;
        OnPropertyChanged("my_DateTime");
    }
}

内容的提问来源于stack exchange，提问作者Rifat Murtuza