Is there any way to add a fill mask to the date fields (DatePicker)?

Radzen.Blazor Components
1

Example: when typing the date 09/12/2023, the user would not need to enter the slashes (/) manually, it would be filled in automatically.

2

Such feature is not supported at the moment.

3

I understood. One solution would be to transform the current property I use to string and use the Mask component, right.

4

Did you manage to do this? I am trying to create a function to adjust this, but the value does not come as a string.

@rendermode InteractiveServer

<RadzenDatePicker @ref=testPicker @bind-Value=@Value DateFormat="dd/MM/yyyy" ShowCalendarWeek @onfocusout=ValidateDate />

@code {
public RadzenDatePicker testPicker { get; set; }
[Parameter] public DateTime? Date { get; set; }
[Parameter] public EventCallback<DateTime?> DateChanged { get; set; }

public string Value { get; set; } = string.Empty;

private void ValidateDate()
{
    var pickerValue = testPicker.Value;
    var dateString = Value;

    var currentDay = DateTime.Now.Day;
    var currentMonth = DateTime.Now.Month;
    var currentYear = DateTime.Now.Year;

    var day = currentDay.ToString();
    var month = currentMonth.ToString();
    var year = currentYear.ToString();

    if (dateString.Length >= 2)
    {
        day = dateString.Substring(0, 2);
    }

    if (dateString.Length >= 4)
    {
        month = dateString.Substring(2, 4);
    }

    if (dateString.Length >= 8)
    {
        year = dateString.Substring(4, 8);
    }

    if (dateString.Length == 2)
    {
        dateString = $"{day}/{currentMonth}/{currentYear}";
    }
    else if (dateString.Length <= 4)
    {
        dateString = $"{day}/{month}/{currentYear}";
    }
    else if (dateString.Length == 8)
    {
        dateString = $"{day}/{month}/{year}";
    }

    Date = ConverterHelper.ToDate(dateString);
}

}

5

I managed with the following code:

@using System.Globalization

@rendermode InteractiveServer

<RadzenDatePicker TValue=DateTime Value=@Valor @onkeypress=@(args => VerificaTeclaEnterTab(args.Key)) @onfocusout="ValidaData" @oninput=@(args => HandleInput(args.Value.ToString())) DateFormat="dd/MM/yyyy" ShowCalendarWeek />
@* @onkeypress=@(args => VerificaTeclaEnterTab(args.Key)) @oninput=@(args => HandleInput(args.Value.ToString())) *@
@code {
[Parameter] public DateTime? Data { get; set; }
[Parameter] public EventCallback<DateTime?> DataChanged { get; set; }

public void LimpaCampos()
{
    Valor = null;
    Data = Valor;
    DataChanged.InvokeAsync(Data);
}

private DateTime? Valor { get; set; }

private string ValorAuxiliar { get; set; }


private void VerificaTeclaEnterTab(string key)
{
    if (key.Equals("enter", StringComparison.OrdinalIgnoreCase))
        ValidaData();
}

protected override void OnParametersSet()
{
    base.OnParametersSet();
}

private void HandleInput(string valor)
{
    ValorAuxiliar = valor;
}

private void ValidaData()
{
    if (string.IsNullOrEmpty(ValorAuxiliar))
        return;

    if (DateTime.TryParseExact(ValorAuxiliar, "dd/MM/yyyy", new CultureInfo("pt-BR"), DateTimeStyles.None, out var dateValue))
        return;

    var diaAtual = DateTime.Now.Day; 
    var mesAtual = DateTime.Now.Month;
    var anoAtual = DateTime.Now.Year;

    var dia = diaAtual.ToString();
    var mes = mesAtual.ToString();
    var ano = anoAtual.ToString();

    if (ValorAuxiliar.Length >= 2)
    {
        dia = ValorAuxiliar.Substring(0, 2);
    }

    if (ValorAuxiliar.Length >= 4)
    {
        mes = ValorAuxiliar.Substring(2, 2);
    }

    if (ValorAuxiliar.Length >= 8)
    {
        ano = ValorAuxiliar.Substring(4, 4);
    }

    ValorAuxiliar = $"{dia}/{mes}/{ano}";

    Valor = ConversorHelper.Date(ValorAuxiliar);
    Data = Valor;
    DataChanged.InvokeAsync(Data);
}

}

1 Like