使用 ASP.NET 核心模型值绑定 Bootstrap3 datetimepicker

Question

我正在尝试使用 MVC 标签助手将 Bootstrap 3 Datetimepicker 绑定到我的 ASP.NET 核心模型：

<div class='input-group date' id='datetimepicker1'>
    <input asp-for="Observation.ObservationDateTime" type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

我在初始化控件时遇到问题。以下不起作用：

1) 在 Razor 部分脚本如下：

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker();
    });
</script>
}

这样做会初始化日期时间选择器，但没有模型值。我如何让它工作但使用模型值作为初始值？

Answer 1

像这样在视图中包含您的日期字段：

@Html.EditorFor(model => model.MyDate, new { htmlAttributes = new { @class = "my-date" } })

然后像这样在你的 JavaScript 中初始化它（我正在使用 jQuery）

$(document).ready(function () {
    // get date from MyDate input field
    var date = $(".my-date").val();

   // use current date as default, if input is empty
   if (!date) {
       date = new Date();
   }

    $('.my-date').datetimepicker({
        format: 'YYYY/MM/DD',
        date: date
    });
});

请注意，我使用 'my-date' class 作为输入 select 或者，您可能想要 select 不同的方式...显然您需要包括bootstrap 图书馆...

附带说明一下，最好将脚本放在外部文件中：why should I avoid inline Scripts

使用 ASP.NET 核心模型值绑定 Bootstrap3 datetimepicker

Bind Bootstrap3 datetimepicker with ASP.NET Core model value

asp.net-core

bootstrap-datetimepicker

eonasdan-datetimepicker