在 Blazor 中禁用特定日期

Question

我的编辑表单中有一些字段。所以这里基于我的运输下拉值选择，运输日期（日期时间）应该禁用其日历中的日期。就这样吧。

 <div class="form-group col">
  <label>Main Transport</label>
    @if (lstTransports != null)
      {
         <InputSelect id="txtMainTransport" class="form-control" @bind-Value="@trade.transport" @onchange="OnMainTransportValueChange">
         <option selected value="-1">-Select-</option>
         @foreach (var transport in lstTransports)
           {
              <option value="@transport.id">@transport.id</option>
           }
          </InputSelect>
          <ValidationMessage For="@(() => trade.transport)" />
         }
 </div>

   <div class="form-group col">
         <label>Estimated Shipping Date</label>
            <InputDate id="shippingDate" @bind-Value="@trade.shippingDate" @bind-Value:format="dd/mm/yyyy"  class="form-control" />
            <ValidationMessage For="@(() => trade.shippingDate)" />
       </div>

这里是 onchange 函数：

private async void OnMainTransportValueChange(ChangeEventArgs e)
        {
            trade.transport= e.Value.ToString();
            if(trade.transport == "Sea")
            {
                //here it should have my date disable code
                
            }
        }

现在在基于运输价值的 onchange 中，我想在装运日期之前禁用日历日期。因此，如果 Transport == Sea 则发货日期日历中的日期 less than Datetime.Today.AddDays(5) 应该被禁用。

我如何在 C# 中处理它？我试图通过发货日期 id 进行修改，但它似乎没有检测到 id 值。请帮忙。

Answer 1

这对我有用

    <InputDate @bind-Value="@myClass.shippingDate" @attributes="@shippingDateAttributes"  />

...

@code {
    Dictionary<string, object>? shippingDateAttributes = new();

private async void OnMainTransportValueChange(ChangeEventArgs e)
        {
            trade.transport= e.Value.ToString();
            if(trade.transport == "Sea")
            {
                //here it should have my date disable code
                string maxDate = (DateTime.Now + TimeSpan.FromDays(5)).ToString("yyyy-MM-dd");
                shippingDateAttributes.Add("max", maxDate);
               StateHasChanged();
            }
        }
   }

您还需要一些逻辑来确保您不会添加该属性两次。所以理想情况下，您应该先删除 'max' 属性，然后再添加它。

这是我为此使用的参考 post： Disable Dates for DateTime picker

在 Blazor 中禁用特定日期

Disable specific dates in Blazor

c#

datetime

date

blazor

blazor-webassembly