Blazor Server中InputDate组件输入时日期重置问题求助

这是Blazor内置InputDate组件的即时验证逻辑导致的问题：当你手动在输入框修改月份时，组件会在每一次输入字符后尝试解析日期字符串。比如从07/31/2022修改为01/31/2022的过程中，当你输入第一个0时，字符串变成0/31/2022，解析失败，组件会将绑定的DateCreated设为null；后续输入1变成01/31/2022时，虽然解析有效，但组件的UI已经被重置，导致你看到日期变成01/dd/yyyy。

以下是几种解决方式：

• 使用日期选择器而非手动输入
  直接点击InputDate组件的日期选择器图标，通过可视化界面选择月份和日期，这种方式组件会自动处理合法日期的切换，不会出现手动输入的解析问题。

• 自定义InputDate组件，延迟解析时机
  继承内置的InputDate<T>，重写TryParseValueFromString方法，只有当输入的字符串是完整合法的日期格式时才执行解析，避免中间无效状态触发值重置：

  using System.Globalization;
  using Microsoft.AspNetCore.Components.Forms;
  
  public class CustomInputDate<TValue> : InputDate<TValue>
  {
      protected override bool TryParseValueFromString(string? value, out TValue result, out string validationErrorMessage)
      {
          // 仅当输入完整的MM/dd/yyyy格式时才解析
          if (!string.IsNullOrWhiteSpace(value) 
              && DateTime.TryParseExact(value, "MM/dd/yyyy", CultureInfo.CurrentCulture, DateTimeStyles.None, out _))
          {
              return base.TryParseValueFromString(value, out result, out validationErrorMessage);
          }
  
          // 中间状态返回默认值，不触发验证错误
          result = default!;
          validationErrorMessage = string.Empty;
          return true;
      }
  }
  

  使用时替换原组件：

  <CustomInputDate @bind-Value="_myclass.DateCreated" class="form_control" min="1753-01-01" max="9999-12-31" id="CreationDate" />
  

• 绑定字符串属性，手动控制日期转换
  先将输入框绑定到字符串变量，在表单提交或输入框失去焦点时手动解析为DateTime?，完全掌控解析逻辑：

  <InputText @bind-Value="_dateInput" class="form_control" id="CreationDate" />
  

  using System.Globalization;
  
  private string _dateInput = string.Empty;
  private MyClass _myclass = new MyClass();
  
  protected override void OnInitialized()
  {
      if (_myclass.DateCreated.HasValue)
      {
          _dateInput = _myclass.DateCreated.Value.ToString("MM/dd/yyyy");
      }
  }
  
  // 提交表单时处理转换
  private void SubmitForm()
  {
      if (DateTime.TryParseExact(_dateInput, "MM/dd/yyyy", CultureInfo.CurrentCulture, DateTimeStyles.None, out DateTime parsedDate))
      {
          _myclass.DateCreated = parsedDate;
          // 执行提交逻辑
      }
      else
      {
          // 提示无效日期
      }
  }
  

• 通过JavaScript延迟绑定更新
  给输入框添加JS事件，阻止即时的输入事件触发Blazor的绑定更新，仅在失去焦点时触发：

  <InputDate @bind-Value="_myclass.DateCreated" class="form_control" min="1753-01-01" max="9999-12-31" id="CreationDate" />
  
  <script>
      const dateInput = document.getElementById('CreationDate');
      dateInput.addEventListener('input', (e) => {
          e.stopPropagation(); // 阻止Blazor捕获input事件即时更新绑定
      });
  
      dateInput.addEventListener('blur', () => {
          dateInput.dispatchEvent(new Event('change')); // 失去焦点时触发绑定更新
      });
  </script>
  

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