角度：将从bootstrap-datepicker中选取的日期绑定到基础ngModel或formControlName [英] Angular: Bind date picked from bootstrap-datepicker to underlying ngModel or formControlName

问题描述

我在Angular项目中使用 bootstrap-datepicker 作为指示。以下是我的代码。

I'm using bootstrap-datepicker in my Angular project by creating it as a directive. Below is my code.

HTML：
< input [datepicker] = datepickerConfig只读ngModel name = requestedDate类= form-control id = requestedDate type = text>

组件中的日期选择器配置：

Datepicker config in component:

datepickerConfig = {
    format: 'dd-M-yyyy'
};

指令：

@Directive({ selector: '[datepicker]' })
export class DatepickerDirective implements OnInit {
    @Input() datepicker;

    constructor(private el: ElementRef) { }

    ngOnInit() {
        $(this.el.nativeElement).datepicker(this.datepicker);
        $(this.el.nativeElement).next('.input-group-addon').find('.glyphicon-calendar')
            .click(() => $(this.el.nativeElement).focus());
    }

}

如果我专注于文本框，我应用了此指令后，日期选择器会弹出，并且当我选择一个日期时，它会显示在文本框中。但这并没有绑定到基础 ngModel / formControlName 。相应的变量仍然是 undefined 。

If I focus on the textbox to which I've applied this directive, the datepicker pops up, and when I select a date, it's shown on the textbox. But it's not getting bound to the underlying ngModel / formControlName. The corresponding variable is still undefined.

请帮助我。

推荐答案

我使用 ControlValueAccessor 做到了。以下是我的实现。

I did it using ControlValueAccessor. Below is my implementation.

import { Directive, ElementRef, Input, OnInit, HostListener, forwardRef } from '@angular/core';
import { DatePipe } from '@angular/common';
import 'bootstrap-datepicker';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
    selector: '[datepicker]',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => DatepickerDirective),
            multi: true
        },
        DatePipe
    ]
})
export class DatepickerDirective implements OnInit, ControlValueAccessor {
    @Input() datepicker;

    constructor(private el: ElementRef, private datePipe: DatePipe) { }

    ngOnInit() {
        $(this.el.nativeElement).datepicker(this.datepicker);
        $(this.el.nativeElement).next('.input-group-addon').find('.glyphicon-calendar')
            .click(() => $(this.el.nativeElement).focus());
    }

    // ControlValueAccessor interface
    private _onChange = (_) => { };
    private _onTouched = () => { };

    @HostListener('blur', ['$event'])
    input(event) {
        this._onChange(event.target.value);
        this._onTouched();
    }
    writeValue(value: any): void {
        $(this.el.nativeElement).val(this.datePipe.transform(value, 'dd-MMM-yyyy'));
    }

    registerOnChange(fn: (_: any) => void): void { this._onChange = fn; }
    registerOnTouched(fn: any): void { this._onTouched = fn; }

}

这篇关于角度：将从bootstrap-datepicker中选取的日期绑定到基础ngModel或formControlName的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！