如何结合InputMask.js与Blazor实现带验证的原生日期选择器

问题根源 #

原生<input type="date">的value采用ISO标准格式（YYYY-MM-DD），且通过选择器修改值时会绕过InputMask的内部处理逻辑，导致mask与输入框值不同步，触发警告并阻断事件。

解决方案 #

通过适配InputMask的格式解析规则，并手动同步mask状态来解决冲突：

1. 配置InputMask适配原生日期格式 #

编写JS初始化方法，指定format和parse方法匹配ISO格式：

function initDateMask(element) {
  return IMask(element, {
    mask: Date,
    // 将Date对象转换为原生输入框要求的YYYY-MM-DD格式
    format: date => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 解析ISO格式字符串为Date对象
    parse: str => {
      const [year, month, day] = str.split('-');
      return new Date(year, month - 1, day);
    },
    min: new Date(1990, 0, 1),
    max: new Date(2025, 0, 1),
    lazy: false,
    overwrite: true // 禁用mask自动输入处理，交给原生选择器
  });
}

// 用于同步mask与输入框值的方法
function syncDateMask(maskInstance) {
  maskInstance.updateValue();
}

2. Blazor组件中集成并同步 #

在Blazor组件中通过ElementReference获取输入框实例，初始化mask并在日期变更时同步状态：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<input type="date" @ref="_dateInput" @onchange="OnDateChanged" />

@code {
  private ElementReference _dateInput;
  private IJSObjectReference? _maskInstance;

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
      // 初始化InputMask实例
      _maskInstance = await JSRuntime.InvokeAsync<IJSObjectReference>(
        "initDateMask", 
        _dateInput
      );
    }
  }

  private async Task OnDateChanged(ChangeEventArgs e)
  {
    // 同步mask状态，消除警告
    if (_maskInstance != null)
    {
      await _maskInstance.InvokeVoidAsync("syncDateMask", _maskInstance);
    }

    // 处理业务逻辑，比如绑定选中的日期
    var selectedDate = e.Value?.ToString();
    // ...
  }

  public async ValueTask DisposeAsync()
  {
    // 销毁mask实例，释放资源
    if (_maskInstance != null)
    {
      await _maskInstance.DisposeAsync();
    }
  }
}

关键说明 #

• format和parse确保InputMask与原生输入框的日期格式完全一致，避免格式不匹配导致的同步问题。
• 在onchange事件中调用mask.updateValue()，手动同步mask与输入框的最新值，解决控制台警告。
• 使用IJSObjectReference管理mask实例，确保组件销毁时正确释放资源，避免内存泄漏。

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