如何使用 Blazor 从当前日期禁用未来日期并禁用当前日期前 1 个月的日期？

Question

使用 Blazor 日期输入如何禁用当前日期的未来日期以及禁用当前日期前 1 个月或更长时间的日期？但是在页面加载时显示当前日期。

我正在使用 Blazor 服务器端。

到目前为止，我的剃刀页面设置如下：

<InputDate @bind-Value="viewmodel.Date" class="form-control" id="date"></InputDate> 
<label> The date </label>
<ValidationMessage For="() => viewmodel.Date" />

模型是这样的：

  [Required(ErrorMessage = "Select the date")]        
    public DateTime Date { get; set; } = DateTime.Now;

我已经尝试在输入标签中使用 'max' 属性来留下结束日期，但没有成功。我找不到执行此操作的方法。请告诉我如何在 Balzor 中解决这个问题，或者是否有其他方法可以达到相同的结果？如果不使用 jquery 我会更喜欢。感谢您的帮助。

Answer 1

如果你乐意在标记中这样做，你可以使用 min 和 max

<input type="date" min="2021-11-01" max="2022-01-31"/>

此示例限制为 2021 年 11 月 1 日至 2022 年 1 月 31 日之间的日期 - 格式 yyyy-MM-dd 在 min/max 中很重要。

您可以在 Blazor 中为日期使用变量，但请确保使用 yyyy-MM-dd 对其进行格式化。

<InputDate @bind-Value="viewmodel.Date" 
    class="form-control" 
    id="date" 
    min=@DateTime.Today.AddMonths(-1).ToString("yyyy'-'MM'-'dd") 
    max=@DateTime.Today.ToString("yyyy'-'MM'-'dd")  
    />

Blazor Repl - Working Sample

如何使用 Blazor 从当前日期禁用未来日期并禁用当前日期前 1 个月的日期？

How can one disable future dates from the current date and also disable dates 1 month before the current date using Blazor?

forms

date

blazor

blazor-server-side