CODEWITHSUNDEEP
asp.net-coreblazorblazor-server-side
Dieter
Dieter

Reputation: 121

How to format the date using local culture using the blazor <InputDate /> tag

I am using the tag in my Blazor app. But how can i format the date using my own culture ? 

            <InputDate class="form-control" @bind-Value="@ValidDate" @bind-Value:culture="nl-BE" @bind-Value:format="dd/MM/yyyy" />

enter image description here

regards Dieter

Upvotes: 8

Views: 18076

Answers (3)

Bart
Bart

Reputation: 1

The solution did not work for me. I got it working like this:

@code {
    private DateOnly? _geboortedatum;

    private string GeboortedatumFormatted
    {
        get => _geboortedatum?.ToString("dd-MM-yyyy") ?? "";
        set
        {
            if (DateOnly.TryParse(value, out var newDate))
            {
                _geboortedatum = newDate;
            }
        }
    }
}

<div class="col-3">
    <div class="form-floating mb-3">
        <InputDate @bind-Value="_geboortedatum" class="form-control d-none" />
        <InputText @bind-Value="GeboortedatumFormatted" class="form-control" id="geboorte-datum" placeholder="Geef geboortedatum." />
        <label for="geboorte-datum" class="form-label">Geboortedatum</label>
        <ValidationMessage For="() => _geboortedatum" class="text-danger" />
    </div>
</div>

Upvotes: 0

palota
palota

Reputation: 642

It's impossible to set format of InputDate or <input type="date">. It depends on browser settings. Users can change language of their browser. But you cannot change it from HTML. If you really need to customize format, you have to use InputText or <input type="text">. I would recommend to use some javascript library, for example jQuery UI datepicker.

Upvotes: 1

Peter Morris
Peter Morris

Reputation: 23224

The answer is @bind-Value:format, like so

@page "/"

<EditForm Model="@CurrentPerson">
    <InputDate @bind-Value="@CurrentPerson.DateOfBirth" @bind-Value:format="dd/MM/yyyy"/>
</EditForm>

@code
{
    Person CurrentPerson = new Person();
    public class Person
    {
        public DateTime DateOfBirth { get; set; } = DateTime.Now;
    }
}

There is also the option of using bind-Value:culture.

Upvotes: 6

Related Questions