时间戳

首页 > 解决方案 > 在 Blazor WASM 中获取 DateTime 输入

c# - 在 Blazor WASM 中获取 DateTime 输入

问题描述

我正在尝试将“会议数据”作为用户的输入。

我有这样的模态：

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();
    ...

并且此模型将meeting对象返回到我将其发布到数据库的主页：

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

日期信息的模型只是DateTime：

    public DateTime Date { get; set; }

但我无法获得时间信息。

预期行为：

日期选择器

像这样的日期选择器和时间选择器（“HH：mm”）

如何将时间信息作为输入？

如何将初始值设置为日期？（这是有问题的，因为我收到一些错误说我不能将 Value 与 @bind-Value 一起使用）

标签： c#datetimerazorblazor

解决方案

该<InputDate>组件仅处理创建<input type='date' ...标记（请参阅原始Blazor 代码）

如果您想输入/编辑日期时间组合，您需要自己滚动。

此评论中的代码应该可以工作： https ://github.com/dotnet/aspnetcore/issues/18078#issuecomment-626997904

正如我在评论中提到的，要设置一个初始值，您需要在创建绑定对象时对此进行编码，例如

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

推荐阅读