You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.6 KiB
49 lines
1.6 KiB
import { Directive, ElementRef, forwardRef, HostListener, Renderer2 } from '@angular/core'; |
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|
|
|
export const DATE_VALUE_ACCESSOR: any = { |
|
provide: NG_VALUE_ACCESSOR, |
|
useExisting: forwardRef(() => DateValueAccessor), |
|
multi: true, |
|
}; |
|
|
|
/** |
|
* The accessor for writing a value and listening to changes on a date input element |
|
* |
|
* ### Example |
|
* `<input type="date" choice_label="myBirthday" ngModel useValueAsDate>` |
|
*/ |
|
@Directive({ |
|
// this selector changes the previous behavior silently and might break existing code |
|
// selector: 'input[type=date][formControlName],input[type=date][formControl],input[type=date][ngModel]', |
|
|
|
// this selector is an opt-in version |
|
selector: '[useValueAsDate]', |
|
providers: [DATE_VALUE_ACCESSOR], |
|
}) |
|
export class DateValueAccessor implements ControlValueAccessor { |
|
@HostListener('input', ['$event.target.valueAsDate']) onChange = (_: any) => {}; |
|
@HostListener('blur', []) onTouched = () => {}; |
|
|
|
constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {} |
|
|
|
writeValue(value: Date): void { |
|
if (!value) { |
|
this._renderer.setProperty(this._elementRef.nativeElement, 'value', null); |
|
return; |
|
} |
|
this._renderer.setProperty(this._elementRef.nativeElement, 'valueAsDate', value); |
|
} |
|
|
|
registerOnChange(fn: (_: any) => void): void { |
|
this.onChange = fn; |
|
} |
|
|
|
registerOnTouched(fn: () => void): void { |
|
this.onTouched = fn; |
|
} |
|
|
|
setDisabledState(isDisabled: boolean): void { |
|
this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled); |
|
} |
|
}
|
|
|