angular-date-value-accessor
Version:
A set of ControlValueAccessors for Angular to work with Browser's native date input elements. Now you can use <input type='date'> with template-driven and reactive forms!
69 lines • 8.22 kB
JavaScript
import { Directive, forwardRef, HostListener } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
/**
* The accessor for writing a value and listening to changes on a date input element in local time.
*
* ### Example
* `<input type="date" name="myBirthday" ngModel useValueAsLocalDate>`
*
* See also:
* What is the correct way to set and get HTMLInputElement.valueAsDate using local Dates?
* https://stackoverflow.com/a/53033442
*/
export class LocalDateValueAccessor {
constructor(renderer, elementRef) {
this.renderer = renderer;
this.elementRef = elementRef;
this.onInput = (date) => {
// convert to LOCAL Date, time is set to 00:00 in LOCAL time
const localDate = date ? new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()) : null;
this.onChange(localDate);
};
this.onChange = () => { };
this.onTouched = () => { };
}
writeValue(date) {
// convert to UTC Date, time is set to 00:00 in UTC time
const utcDate = date ? new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())) : null;
this.renderer.setProperty(this.elementRef.nativeElement, 'valueAsDate', utcDate);
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
}
}
LocalDateValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalDateValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
LocalDateValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: LocalDateValueAccessor, isStandalone: true, selector: "[useValueAsLocalDate]", host: { listeners: { "input": "onInput($event.target.valueAsDate)", "blur": "onTouched()" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => LocalDateValueAccessor),
multi: true
}
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalDateValueAccessor, decorators: [{
type: Directive,
args: [{
selector: '[useValueAsLocalDate]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => LocalDateValueAccessor),
multi: true
}
],
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { onInput: [{
type: HostListener,
args: ['input', ['$event.target.valueAsDate']]
}], onTouched: [{
type: HostListener,
args: ['blur', []]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9jYWwtZGF0ZS12YWx1ZS1hY2Nlc3Nvci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGUtdmFsdWUtYWNjZXNzb3Ivc3JjL2xpYi9sb2NhbC1kYXRlLXZhbHVlLWFjY2Vzc29yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsVUFBVSxFQUFFLFlBQVksRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUMzRixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBRXpFOzs7Ozs7Ozs7R0FTRztBQVlILE1BQU0sT0FBTyxzQkFBc0I7SUFXakMsWUFBb0IsUUFBbUIsRUFBVSxVQUFzQjtRQUFuRCxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQVUsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQVRqQixZQUFPLEdBQUcsQ0FBQyxJQUFXLEVBQUUsRUFBRTtZQUM5RSw0REFBNEQ7WUFDNUQsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLEVBQUUsSUFBSSxDQUFDLFdBQVcsRUFBRSxFQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7WUFDdkcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUMzQixDQUFDLENBQUE7UUFDRCxhQUFRLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBRUMsY0FBUyxHQUFHLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUUyQixDQUFDO0lBRTVFLFVBQVUsQ0FBQyxJQUFXO1FBQ3BCLHdEQUF3RDtRQUN4RCxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFDdEcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsYUFBYSxFQUFFLE9BQU8sQ0FBQyxDQUFDO0lBQ25GLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFvQjtRQUNuQyxJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBYztRQUM5QixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsVUFBVSxFQUFFLFVBQVUsQ0FBQyxDQUFDO0lBQ25GLENBQUM7O21IQTdCVSxzQkFBc0I7dUdBQXRCLHNCQUFzQixtS0FUdEI7UUFDVDtZQUNFLE9BQU8sRUFBRSxpQkFBaUI7WUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxzQkFBc0IsQ0FBQztZQUNyRCxLQUFLLEVBQUUsSUFBSTtTQUNaO0tBQ0Y7MkZBR1Usc0JBQXNCO2tCQVhsQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx1QkFBdUI7b0JBQ2pDLFNBQVMsRUFBRTt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSx1QkFBdUIsQ0FBQzs0QkFDckQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7b0JBQ0QsVUFBVSxFQUFFLElBQUk7aUJBQ2pCO3lIQUd1RCxPQUFPO3NCQUE1RCxZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLDJCQUEyQixDQUFDO2dCQU8xQixTQUFTO3NCQUFsQyxZQUFZO3VCQUFDLE1BQU0sRUFBRSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBmb3J3YXJkUmVmLCBIb3N0TGlzdGVuZXIsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG4vKipcbiAqIFRoZSBhY2Nlc3NvciBmb3Igd3JpdGluZyBhIHZhbHVlIGFuZCBsaXN0ZW5pbmcgdG8gY2hhbmdlcyBvbiBhIGRhdGUgaW5wdXQgZWxlbWVudCBpbiBsb2NhbCB0aW1lLlxuICpcbiAqICAjIyMgRXhhbXBsZVxuICogIGA8aW5wdXQgdHlwZT1cImRhdGVcIiBuYW1lPVwibXlCaXJ0aGRheVwiIG5nTW9kZWwgdXNlVmFsdWVBc0xvY2FsRGF0ZT5gXG4gKlxuICogU2VlIGFsc286XG4gKiBXaGF0IGlzIHRoZSBjb3JyZWN0IHdheSB0byBzZXQgYW5kIGdldCBIVE1MSW5wdXRFbGVtZW50LnZhbHVlQXNEYXRlIHVzaW5nIGxvY2FsIERhdGVzP1xuICogaHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9hLzUzMDMzNDQyXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1t1c2VWYWx1ZUFzTG9jYWxEYXRlXScsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTG9jYWxEYXRlVmFsdWVBY2Nlc3NvciksXG4gICAgICBtdWx0aTogdHJ1ZVxuICAgIH1cbiAgXSxcbiAgc3RhbmRhbG9uZTogdHJ1ZVxufSlcbmV4cG9ydCBjbGFzcyBMb2NhbERhdGVWYWx1ZUFjY2Vzc29yIGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2lucHV0JywgWyckZXZlbnQudGFyZ2V0LnZhbHVlQXNEYXRlJ10pIG9uSW5wdXQgPSAoZGF0ZT86IERhdGUpID0+IHtcbiAgICAvLyBjb252ZXJ0IHRvIExPQ0FMIERhdGUsIHRpbWUgaXMgc2V0IHRvIDAwOjAwIGluIExPQ0FMIHRpbWVcbiAgICBjb25zdCBsb2NhbERhdGUgPSBkYXRlID8gbmV3IERhdGUoZGF0ZS5nZXRVVENGdWxsWWVhcigpLCBkYXRlLmdldFVUQ01vbnRoKCksIGRhdGUuZ2V0VVRDRGF0ZSgpKSA6IG51bGw7XG4gICAgdGhpcy5vbkNoYW5nZShsb2NhbERhdGUpO1xuICB9XG4gIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7fTtcblxuICBASG9zdExpc3RlbmVyKCdibHVyJywgW10pIG9uVG91Y2hlZCA9ICgpID0+IHsgfTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikgeyB9XG5cbiAgd3JpdGVWYWx1ZShkYXRlPzogRGF0ZSk6IHZvaWQge1xuICAgIC8vIGNvbnZlcnQgdG8gVVRDIERhdGUsIHRpbWUgaXMgc2V0IHRvIDAwOjAwIGluIFVUQyB0aW1lXG4gICAgY29uc3QgdXRjRGF0ZSA9IGRhdGUgPyBuZXcgRGF0ZShEYXRlLlVUQyhkYXRlLmdldEZ1bGxZZWFyKCksIGRhdGUuZ2V0TW9udGgoKSwgZGF0ZS5nZXREYXRlKCkpKSA6IG51bGw7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eSh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ3ZhbHVlQXNEYXRlJywgdXRjRGF0ZSk7XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiAoXzogYW55KSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eSh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2Rpc2FibGVkJywgaXNEaXNhYmxlZCk7XG4gIH1cbn1cbiJdfQ==