将 Bootstrap3 datetimepicker 与 ASP.NET Core 模型值绑定

Question

我正在尝试使用 MVC 标签助手将Bootstrap 3 Datetimepicker 绑定到我的 ASP.NET Core 模型，如下所示：

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

这样做会初始化 datetimepicker，但没有模型值。我如何让它工作但以模型值作为初始值？

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' 类作为输入选择器，您可能希望以不同的方式选择它...显然您需要包含引导库...

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