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

Question

我在 angular 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

您不应将 jQuery 和基于 jQuery 的库与 Angular 一起使用。这是整个Angular想法的矛盾。您也不应直接在 DOM 上操作以保持与不同环境的兼容性 Angular 服务。

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

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

编辑这是使用日期选择器与 ngx-bootstrap 的示例： https://stackblitz.com/edit/ngx-bootstrap-datepicker

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

Bootstrap Date Time Picker Not Working With Angular 6 or 7

angular

angular6

angular-reactive-forms

bootstrap-datetimepicker