ElementRef не работает Angular 8 с Bsdatepicker

Question

Что мне нужно

• Мне нужно получить значение даты из текстового поля и привязать дату формата к текстовому полю.

Проблема

при введите дату bsdatepicker изменяет формат даты.

Angular код

            import { Component, OnInit, ViewEncapsulation,ViewChild,ElementRef } from '@angular/core';
            import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

            @Component({
              selector: 'my-app',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.css'],
              encapsulation: ViewEncapsulation.None
            })
            export class AppComponent implements OnInit {
              myDateValue: Date;
              customInitDate:Date;
              bsConfig: Partial<BsDatepickerConfig>;
              @ViewChild('dp', {static: false}) dpicker: ElementRef;
              ngOnInit() {
                this.myDateValue = new Date();
               // this.bsConfig = Object.assign({},'');
              }

              onDateChange(newDate: any) {
                console.log(newDate);
                console.log(this.dpicker.nativeElement);
                this.customInitDate=newDate;
              }
            }

Html код

        <input type="text"
        class="form-control"
        [minDate]="minDate"
        [maxDate]="maxDate"
        #dp
        [bsConfig]="{ dateInputFormat: 'DD-MMM-YYYY' }"
        value="{{ customInitDate | date: 'dd-MMM-yyyy'}}"
        bsDatepicker
        [(bsValue)]="myDateValue"
        [(ngModel)]="customInitDate"
        (ngModelChange)="onDateChange($event)"
        >
        </div>

объект Bsdatepicker

        BsDatepickerComponent {_config: {…}, placement: "bottom", triggers: "click", outsideClick: true, container: "body", …}
        isOpen: (...)
        _config:
        containerClass: "theme-green"
        displayMonths: 1
        showWeekNumbers: true
        dateInputFormat: "DD-MMM-YYYY"
        rangeSeparator: " - "
        rangeInputFormat: "L"
        locale: "en"
        monthTitle: "MMMM"
        yearTitle: "YYYY"
        dayLabel: "D"
        monthLabel: "MMMM"
        yearLabel: "YYYY"
        weekNumbers: "w"
        value: null
        isDisabled: undefined
        minDate: undefined
        maxDate: undefined
        __proto__: Object
        placement: "bottom"
        triggers: "click"
        outsideClick: true
        container: "body"
        bsValueChange: EventEmitter {_isScalar: false, observers: Array(2), closed: false, isStopped: false, hasError: false, …}
        _subs: (2) [Subscriber, Subscriber]
        containerClass: "theme-green"
        displayMonths: 1
        showWeekNumbers: true
        dateInputFormat: "L"
        rangeSeparator: " - "
        rangeInputFormat: "L"
        locale: "en"
        monthTitle: "MMMM"
        yearTitle: "YYYY"
        dayLabel: "D"
        monthLabel: "MMMM"
        yearLabel: "YYYY"
        weekNumbers: "w"
        _datepicker: ComponentLoader {_viewContainerRef: ViewContainerRef_, _renderer: RendererAdapter, _elementRef: ElementRef, _injector: NgModuleRef_, _componentFactoryResolver: CodegenComponentFactoryResolver, …}
        onShown: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
        onHidden: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
        _bsValue: Fri Dec 08 1989 00:00:00 GMT+0530 (India Standard Time) {}
        bsConfig: {dateInputFormat: "DD-MMM-YYYY"}
        minDate: undefined
        maxDate: undefined
        _datepickerRef: ComponentRef_ {_view: {…}, _viewRef: ViewRef_, _component: BsDatepickerContainerComponent, _elDef: {…}}
        __proto__: Object       

Stackblitz

https://stackblitz.com/edit/ngx-bootstrap-datepicker-testing-2e2eyu?file=app%2Fapp.component.html

Но он работает без bsdatepicker

https://stackblitz.com/edit/ngx-bootstrap-datepicker-testing-13hrji?file=app / app.component.ts

console.log (this.dpicker.nativeElement);

undefined

Любые предложения приветствуются.

Answer 1

BsDatepickerComponent внедрил ElementRef как частное поле, используйте его для получения значения поля ввода BsDatepickerComponent. Измените тип вашего ViewChild на BsDatepickerComponent

Попробуйте это

@ViewChild('dp') dpicker: BsDatepickerComponent;

onDateChange(newDate: any) {
    console.log(newDate);
    this.dpicker['_datepicker']['_elementRef'].nativeElement.value
}

Рабочий пример