问题描述
我在我的 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" readonly ngModel name="requestedDate" class="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; }
}
这篇关于Angular:将从 bootstrap-datepicker 中选取的日期绑定到底层 ngModel 或 formControlName的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!