ElementRef在使用Bsdatepicker的Angular 8中不起作用

Question

我需要

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

问题

输入日期时bsdatepicker正在更改日期格式。

角度代码

            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
}

Working Example