javascript - ElementRef 无法与 Bsdatepicker 一起使用 Angular 8

Question

我需要什么

• 我需要从文本框获取日期值并将格式日期绑定(bind)到文本框。

问题

when enter date bsdatepicker is changing date format.

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       

堆栈 Blitz

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 作为私有(private)字段注入(inject)，使用它来获取 BsDatepickerComponent 输入字段值。将 ViewChild 类型更改为 BsDatepickerComponent

试试这个

@ViewChild('dp') dpicker: BsDatepickerComponent;

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

Working Example