时间戳

首页 > 解决方案 > 如何在 Blazor 中更改日期输入值

c# - 如何在 Blazor 中更改日期输入值

问题描述

我正在尝试将日期输入中选择的日期强制为用户实际选择的日期的星期几。因此，如果他们选择星期三，它实际上会更改为同一周的星期日。

我已经设法做到了，但是当我再次在同一周重新选择一个日期时，它就不起作用了。例如，当用户选择星期三时，它成功地选择了星期日。但是当他们去选择星期二时，它会将显示的值保持为星期二而不是将其更改为星期日（这是我想要它做的）

这是一些示例代码

<input type="date" value="@overrideStart.ToString("yyyy-MM-dd")" @onchange="@SelectStartOfWeek" />

@code {
    private DateTime overrideStart = DateTime.Today;

    protected override async Task OnInitializedAsync()
    {
        overrideStart = GetStartOfWeek(overrideStart)
    }

    public async Task SelectStartOfWeek(ChangeEventArgs args)
    {
        var value = args.Value.ToString();
        overrideStart = value == string.Empty ? DateTime.Today : DateTime.Parse(value);

        overrideStart = await GetStartOfWeek(overrideStart);
    }
    private async Task<DateTime> GetStartOfWeek(DateTime date)
    {
        return date.AddDays(-(int)date.DayOfWeek);
    }
}

显然问题是因为它识别出在完成overrideStart后最终具有相同的值SelectStartOfWeek。我试过StateHasChanged()了，但似乎没有任何效果。

标签： c#blazorblazor-webassembly

解决方案

您已经正确地确定了这个问题，但我认为只有避免这种优化的 hacky 方法。

其中一种方法是更改​​元素上的其他内容，例如@key将强制 Blazor 替换整个元素。

<input 
    @key="@toggle"
    type="date" 
    value="@overrideStart.ToString("yyyy-MM-dd")" 
    @onchange="@SelectStartOfWeek" />

@code {
    bool toggle;
    private DateTime overrideStart = DateTime.Today;

    protected override async Task OnInitializedAsync()
    {        
        overrideStart = await GetStartOfWeek(overrideStart);
    }

    public async Task SelectStartOfWeek(ChangeEventArgs args)
    {
        var value = args.Value.ToString();
        overrideStart = value == string.Empty ? DateTime.Today : DateTime.Parse(value);

        overrideStart = await GetStartOfWeek(overrideStart);
        toggle = !toggle;

    }
    private ValueTask<DateTime> GetStartOfWeek(DateTime date)
    {
        return ValueTask.FromResult(date.AddDays(-(int)date.DayOfWeek));
    }
}

推荐阅读