CODEWITHSUNDEEP
c#datetimerazorblazor
Kaan Taze
Kaan Taze

Reputation: 1146

Taking DateTime input in Blazor WASM

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.

Expected Behavior :

DatePicker

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)

Upvotes: 6

Views: 13071

Answers (2)

fingers10
fingers10

Reputation: 7987

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.

Upvotes: 11

Quango
Quango

Reputation: 13478

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 };

Upvotes: 3

Related Questions