Flowbite Datepicker设置dd.mm.yyyy格式后，12日后日期转换异常

问题确认 #

这个问题确实很常见——Flowbite Datepicker在使用dd.mm.yyyy格式时，当日份大于12时，会因为内部解析逻辑的fallback机制，错误将日期按美式MM.DD.YYYY格式解析，导致日期错乱（比如2024-10-20被解析成2025-10-08）。

可行解决方案 #

1. 手动控制日期解析与绑定

绕过组件自动绑定的解析逻辑，手动处理字符串和DateTime的转换，确保严格遵循dd.mm.yyyy格式：

<InputText @bind-Value="displayDate" 
           @onchange="HandleDateInput"
           datepicker 
           datepicker-format="dd.mm.yyyy" 
           id="datepicker-range-end" 
           name="end" 
           type="text" 
           class="..." 
           placeholder="Select date end" />

@code {
    public DateTime InputEnd { get; set; }
    private string displayDate = string.Empty;

    private void HandleDateInput(ChangeEventArgs e)
    {
        var inputValue = e.Value?.ToString().Trim();
        if (!string.IsNullOrEmpty(inputValue) 
            && DateTime.TryParseExact(inputValue, "dd.MM.yyyy", 
                System.Globalization.CultureInfo.InvariantCulture, 
                System.Globalization.DateTimeStyles.None, 
                out DateTime parsedDate))
        {
            InputEnd = parsedDate;
            displayDate = parsedDate.ToString("dd.MM.yyyy");
        }
    }
}

2. 手动初始化Datepicker，强制解析规则

通过JS互操作手动初始化Flowbite Datepicker，自定义解析和格式化函数，彻底避免默认的fallback行为：

1. 在wwwroot/js/custom-datepicker.js中添加初始化逻辑

window.initStrictDatepicker = function(elementId) {
    const elem = document.getElementById(elementId);
    if (!elem) return;

    new Datepicker(elem, {
        format: 'dd.mm.yyyy',
        autohide: true,
        // 自定义解析函数，严格按日.月.年拆分
        parseDate: function(dateStr) {
            const parts = dateStr.split('.');
            return new Date(parts[2], parts[1] - 1, parts[0]);
        },
        // 自定义格式化函数
        formatDate: function(date) {
            const day = date.getDate().toString().padStart(2, '0');
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const year = date.getFullYear();
            return `${day}.${month}.${year}`;
        }
    });
}

2. 在Blazor组件中调用初始化

<InputText @bind-Value="Input.End" 
           id="datepicker-range-end" 
           name="end" 
           type="text" 
           class="..." 
           placeholder="Select date end" />

@code {
    [Inject]
    private IJSRuntime JS { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("initStrictDatepicker", "datepicker-range-end");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

3. 替代方案：使用Blazor官方或成熟第三方组件

如果Flowbite的问题难以彻底解决，可更换更稳定的日期组件：

• Blazor官方InputDate：配置文化信息实现dd.mm.yyyy格式

  <InputDate @bind-Value="Input.End" DisplayFormat="dd.MM.yyyy" class="..." />
  

  同时在Program.cs中设置默认文化（以德国文化为例，默认格式为dd.MM.yyyy）：

  var supportedCultures = new[] { new System.Globalization.CultureInfo("de-DE") };
  builder.Services.Configure<RequestLocalizationOptions>(options =>
  {
      options.DefaultRequestCulture = new Microsoft.AspNetCore.Localization.RequestCulture("de-DE");
      options.SupportedCultures = supportedCultures;
      options.SupportedUICultures = supportedCultures;
  });
  

• 第三方组件：如Blazorise、Radzen Blazor等，这类组件对自定义日期格式的支持更完善，无需担心解析异常。

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