时间戳

首页 > 解决方案 > Bootstrap 日期时间选择器不适用于 Angular 6 或 7

angular - Bootstrap 日期时间选择器不适用于 Angular 6 或 7

问题描述

我从角度 6 创建一个正常的反应

<div class="input-group date">
    <input type="text" class="form-control m-input m_datetimepicker"  placeholder="Select auction start date & time" 
        formControlName="addStartDate" [ngClass]="{ 'is-invalid': addForm.get('addStartDate').touched && addForm.get('addStartDate').invalid }" />
    <div class="input-group-append">
        <span class="input-group-text"><i class="la la-calendar-check-o glyphicon-th"></i></span>
    </div>
    <div class="invalid-feedback">
        <div>* Time start date & time is required</div>
    </div>
</div>

因此，我使用基本 jquery 来初始化日期时间选择器 

$("body").on("focus", ".m_datetimepicker", function () {
    $(".m_datetimepicker").datetimepicker({
        autoclose: true,
        todayBtn: true,
        keepOpen: false,
        startDate: today,
        dateFormat: 'dd/mm/yy',
    });
});

它可以工作，但是当我们在表单中使用日期时间来但this.addForm.value该列表示日期时间选择器值没有与之绑定时formControlName，它给了我null价值。有人能告诉我为什么吗？

标签： angularangular6angular-reactive-formsbootstrap-datetimepicker

解决方案

你不应该在 Angular 中使用 jQuery 和基于 jQuery 的库。这是整个 Angular 理念的矛盾。你也不应该直接在 DOM 上操作以保持与 Angular 服务的不同环境的兼容。

为了安全地操作 DOM 树，请使用内置渲染器 - Renderer2（必须注入到组件中）

尝试改用 ngx-bootstrap 库。它完全适合与 Angular 一起使用： https ://www.npmjs.com/package/ngx-bootstrap

编辑 这里是使用 ngx-bootstrap 的 datepicker 示例： https ://stackblitz.com/edit/ngx-bootstrap-datepicker

推荐阅读