MudDatePicker doesn't change culture date dynamically

Question

@page "/DatePicker"


<MudButton @onclick='() => ChangeDatePicker("FA")' Variant="@variantfa" Color="Color.Primary">FA</MudButton>
<MudButton @onclick='() => ChangeDatePicker("ENG")' Variant="@varianteng" Color="Color.Primary">ENG</MudButton>

<MudDatePicker @ref="_picker"  DateFormat="yyyy/MM/dd" />


@code {
MudDatePicker _picker;

public DateTime? date = DateTime.Today;

public CultureInfo culture = CultureInfo.GetCultureInfo("en-US");

private string language = "ENG";

private Variant variantfa = Variant.Outlined;
private Variant varianteng = Variant.Outlined;

private async Task ChangeDatePicker(string language)
{
    if (language == "FA")
    {
        culture = CultureInfo.GetCultureInfo("fa-IR");
        _picker.Culture = culture;

        _picker.Date = date;
        _picker.Label = "Persian";
        _picker.TitleDateFormat = "dddd, dd MMMM";

        variantfa = Variant.Filled;
        varianteng = Variant.Outlined;
    }
    else
    {
        culture = CultureInfo.GetCultureInfo("en-US");
        _picker.Culture = culture;
        _picker.Date = date;
        _picker.Label = ""; 

        varianteng = Variant.Filled;
        variantfa = Variant.Outlined;
    }
    await Task.CompletedTask;
}

}

in the code above I'm trying to change my date picker culture from the Persian calendar to Gregorian but the problem is that the calendar glitches and it seems like it doesn't change its culture

here is when I change my date to Persian

and here is when I turn it back

I tried statehaschanged and even and individual function to set each calendar

Answer 1

@key is a directive in Blazor that causes the component to be re-rendered and its state to be refreshed. When @key is placed on a component, every time the value of @key changes, that component will be re-rendered. So when we set the value of an int or bool as @key and then change that int(bool), the component will be re-rendered. This causes the state and content of the component to be refreshed. So by changing @key we can force a component to re-render and refresh its state. This is very useful for things like refreshing a DatePicker after changing the Culture.

@using System.Globalization
@using System.Reflection
<MudSwitch T="bool" Color=@Color.Primary Checked=@IsPersian CheckedChanged=CultureChanged Label=@(IsPersian?"Persian":"English") />

<MudDatePicker Culture="SelectedCulture" @bind-Date="@Date" @key=datePickerState />
@code {
    bool datePickerState = false;
    public DateTime? Date { get; set; }
    public bool IsPersian { get; set; }
    private void CultureChanged()
    {
        IsPersian = !IsPersian;
        datePickerState = !datePickerState;
    }
    public CultureInfo SelectedCulture
    {
        get
        {
            if (IsPersian)
            {
                var culture = new CultureInfo("fa-IR");

                DateTimeFormatInfo formatInfo = culture.DateTimeFormat;
                formatInfo.AbbreviatedDayNames = ["ی", "د", "س", "چ", "پ", "ج", "ش"];
                formatInfo.DayNames = ["یکشنبه", "دوشنبه", "سه شنبه", "چهار شنبه", "پنجشنبه", "جمعه", "شنبه"];
                var monthNames = new[] { "فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "", };
                formatInfo.AbbreviatedMonthNames = formatInfo.MonthNames = formatInfo.MonthGenitiveNames = formatInfo.AbbreviatedMonthGenitiveNames = monthNames;
                formatInfo.AMDesignator = "ق.ظ";
                formatInfo.PMDesignator = "ب.ظ";
                formatInfo.ShortDatePattern = "yyyy/MM/dd";
                formatInfo.LongDatePattern = "dddd, dd MMMM,yyyy";
                formatInfo.FirstDayOfWeek = DayOfWeek.Saturday;
                Calendar cal = new PersianCalendar();
                FieldInfo? fieldInfo = culture.GetType()?.GetField("calendar", BindingFlags.NonPublic | BindingFlags.Instance);
                fieldInfo?.SetValue(culture, cal);
                FieldInfo? info = formatInfo.GetType().GetField("calendar", BindingFlags.NonPublic | BindingFlags.Instance);
                info?.SetValue(formatInfo, cal);
                culture.NumberFormat.NumberDecimalSeparator = "/";
                culture.NumberFormat.DigitSubstitution = DigitShapes.NativeNational;
                culture.NumberFormat.NumberNegativePattern = 0;
                return culture;
            }
            return new CultureInfo("en-US");
        }
    }
}