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

Question

我从角度 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 的价值。谁能告诉我为什么？

Answer 1

您不应该在 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