Taking DateTime input in Blazor WASM

Question

I'm trying to take "Meeting data" as input from users.

I have a modal like this:

div class="simple-form">
    <EditForm Model="meeting" OnValidSubmit="SubmitForm">
        <DataAnnotationsValidator />

        <div class="form-group">
            <label>Location</label>
            <InputText @bind-Value="meeting.Location" class="form-control" placeholder="Adres Giriniz" />
            <ValidationMessage For="@(() => meeting.Location)" />
        </div>
        <div class="form-group">
            <label>Date</label>
            <InputDate @bind-Value="meeting.Date" />
            <ValidationMessage For="@(() => meeting.Date)" />
        </div>



        <button type="submit" class="btn btn-primary">Submit</button>
        <button @onclick="Cancel" class="btn btn-secondary">Cancel</button>
    </EditForm>
</div>

@code {

    Meetings meeting = new Meetings();
    ...

and this model return meeting object to main page where I Post it to database:

Meetings meeting;

    async Task ShowModal()
    {
        var MeetingModal = Modal.Show<MeetingRequestComponent>();
        var result = await MeetingModal.Result;

        if (!result.Cancelled)
        {
            meeting = (Meetings)result.Data;
            meeting.ReceiverId = id;
            meeting.SenderId = _userId;
            await http.PostAsJsonAsync("api/Meetings", meeting);
        }
    }

Model for Date info is just DateTime :

    public DateTime Date { get; set; }

But I couldn't get the time information.

I tried to use <input type="datetime" bind="meeting.Date"> but it did not work. I couldn't take both Date and Time value. It discarded given time value and set as 12:00:00 AM
I tried to create another column in the database for Hour and Minutes Data only but it asks for bytes[].

Expected Behavior :

Date Picker like this and time picker ("HH:mm")

How can I take time information as input?

How do I set an initial value to a date? (This was problematic because I get some error saying that I cannot use Value with @bind-Value)

You can set an initial value by setting meeting.Date when you create the value, e.g. Meetings meeting = new Meetings() { Date = DateTime.Today }; — Quango
– Quango, Commented Sep 14, 2020 at 8:06

sceee · Accepted Answer · 2023-09-20 18:33:07Z

15

Starting .NET 6, you can use built in blazor form input component <InputDate Type="InputDateType.DateTimeLocal".... You can also pass the InputDateType enum as Type parameter to component to fit your needs. This will carry both date and time information entered by user.

<InputDate Type="InputDateType.DateTimeLocal"
           min="@DateTime.Today.ToString("yyyy-MM-dd")" @bind-Value="@dateTime" />

@code {
    DateTime dateTime;
}

Available Options,

Field	Value	Description
Date	0	Lets the user enter a date.
DateTimeLocal	1	Lets the user enter both a date and a time.
Month	2	Lets the user enter a month and a year.
Time	3	Lets the user enter a time.

Refer to the InputDate component docs and the InputDateType Enum docs for more details.

edited Sep 20, 2023 at 18:33

sceee

2,1953 gold badges24 silver badges38 bronze badges

answered May 1, 2023 at 14:38

fingers10

8,44913 gold badges66 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quango · Accepted Answer · 2020-09-14 08:21:10Z

3

The <InputDate> component only handles creating a <input type='date' ... tag (see original Blazor code)

If you want to enter/edit a date-time combination you need to roll your own.

The code in this comment should work: https://github.com/dotnet/aspnetcore/issues/18078#issuecomment-626997904

As I mentioned in comments, to set an initial value you need to code this when creating the bound object, e.g.

   Meetings meeting = new Meetings() { Date = DateTime.Now };

answered Sep 14, 2020 at 8:21

Quango

13.7k7 gold badges52 silver badges85 bronze badges

Collectives™ on Stack Overflow

Taking DateTime input in Blazor WASM

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related