Bootstrap Date Time Picker не работает с Angular 6 или 7 - PullRequest
0 голосов
/ 19 ноября 2018

Я создаю нормальный реактив из в угловых 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 значение. Может кто-нибудь сказать мне, почему?

1 Ответ

0 голосов
/ 19 ноября 2018

Вы не должны использовать библиотеки на основе jQuery и jQuery с Angular.Это противоречие всей угловой идеи.Вы также не должны работать напрямую с DOM, чтобы поддерживать совместимость с различными средами Angular serve.

Чтобы безопасно работать с деревом DOM, используйте встроенный рендерер - Renderer2 (должен быть внедрен в компонент)

Попробуйте вместо этого использовать библиотеку ngx-bootstrap.Он точно настроен для использования с Angular: https://www.npmjs.com/package/ngx-bootstrap

EDIT Вот пример использования DatePicker с ngx-bootstrap: https://stackblitz.com/edit/ngx-bootstrap-datepicker

...