代码之家 › 专栏 › 技术社区 › Winthorpe

将Bootstrap3 datetimepicker与ASP绑定。核心模型净值

eonasdan-datetimepicker bootstrap-datetimepicker asp.net-core

1

Winthorpe · 技术社区 · 6 年前

我想把 Bootstrap 3 Datetimepicker 到我的ASP。NET Core模型使用MVC标记助手,如下所示:

<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, 但没有模型值 。如何使其工作,但将模型值作为初始值?

1 回复 | 直到 6 年前

1

2

Hooman Bahreini 6 年前

在视图中包括日期字段,如下所示:

@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

推荐文章

Winthorpe · 将Bootstrap3 datetimepicker与ASP绑定。核心模型净值

6 年前

nielsv · 选项从引导数据库禁用日期时间选择器不工作

7 年前

imdadhusen · 如果使用引导Datetimepicker将minDate属性设置为矩(),则无法将较旧的日期设置为当前日期

7 年前

Jaggi · 如何在初始加载后覆盖datetimepicker enabledHours?

7 年前

Merji · 在viewMode引导datetimepicker中禁用键盘导航

7 年前

kanarifugl · 如何使用Bootstrap 3 Datetimepicker修复奇怪的样式

7 年前

moses toh · 为什么在选择今天以外的日期时,计时器不能降级?

7 年前