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!
71 lines • 8.83 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 an iso-formatted string and listening to changes on a date input element.
*
* ### Example
* `<input type="date" name="myBirthday" ngModel useValueAsLocalIso>`
*
* See also:
* What is the correct way to set and get HTMLInputElement.valueAsDate using local Dates?
* https://stackoverflow.com/a/53033442
*/
export class LocalIsoDateValueAccessor {
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;
const isoString = localDate ? localDate.toISOString() : null;
this.onChange(isoString);
};
this.onChange = () => { };
this.onTouched = () => { };
}
writeValue(isoString) {
const date = isoString ? new Date(isoString) : null;
// 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);
}
}
LocalIsoDateValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalIsoDateValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
LocalIsoDateValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: LocalIsoDateValueAccessor, isStandalone: true, selector: "[useValueAsLocalIso]", host: { listeners: { "input": "onInput($event.target.valueAsDate)", "blur": "onTouched()" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => LocalIsoDateValueAccessor),
multi: true
}
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalIsoDateValueAccessor, decorators: [{
type: Directive,
args: [{
selector: '[useValueAsLocalIso]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => LocalIsoDateValueAccessor),
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9jYWwtaXNvLWRhdGUtdmFsdWUtYWNjZXNzb3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRlLXZhbHVlLWFjY2Vzc29yL3NyYy9saWIvbG9jYWwtaXNvLWRhdGUtdmFsdWUtYWNjZXNzb3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxVQUFVLEVBQWUsWUFBWSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ3hHLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFFekU7Ozs7Ozs7OztHQVNHO0FBWUgsTUFBTSxPQUFPLHlCQUF5QjtJQVlwQyxZQUFvQixRQUFtQixFQUFVLFVBQXNCO1FBQW5ELGFBQVEsR0FBUixRQUFRLENBQVc7UUFBVSxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBVmpCLFlBQU8sR0FBRyxDQUFDLElBQVcsRUFBRSxFQUFFO1lBQzlFLDREQUE0RDtZQUM1RCxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsRUFBRSxJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUUsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztZQUN2RyxNQUFNLFNBQVMsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1lBQzdELElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDM0IsQ0FBQyxDQUFBO1FBQ0QsYUFBUSxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUVDLGNBQVMsR0FBRyxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFFMkIsQ0FBQztJQUU1RSxVQUFVLENBQUMsU0FBa0I7UUFDM0IsTUFBTSxJQUFJLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ3BELHdEQUF3RDtRQUN4RCxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFDdEcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsYUFBYSxFQUFFLE9BQU8sQ0FBQyxDQUFDO0lBQ25GLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFvQjtRQUNuQyxJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBYztRQUM5QixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsVUFBVSxFQUFFLFVBQVUsQ0FBQyxDQUFDO0lBQ25GLENBQUM7O3NIQS9CVSx5QkFBeUI7MEdBQXpCLHlCQUF5QixrS0FUekI7UUFDVDtZQUNFLE9BQU8sRUFBRSxpQkFBaUI7WUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx5QkFBeUIsQ0FBQztZQUN4RCxLQUFLLEVBQUUsSUFBSTtTQUNaO0tBQ0Y7MkZBR1UseUJBQXlCO2tCQVhyQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxzQkFBc0I7b0JBQ2hDLFNBQVMsRUFBRTt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSwwQkFBMEIsQ0FBQzs0QkFDeEQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7b0JBQ0QsVUFBVSxFQUFFLElBQUk7aUJBQ2pCO3lIQUd1RCxPQUFPO3NCQUE1RCxZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLDJCQUEyQixDQUFDO2dCQVExQixTQUFTO3NCQUFsQyxZQUFZO3VCQUFDLE1BQU0sRUFBRSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBmb3J3YXJkUmVmLCBIb3N0QmluZGluZywgSG9zdExpc3RlbmVyLCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuLyoqXG4gKiBUaGUgYWNjZXNzb3IgZm9yIHdyaXRpbmcgYW4gaXNvLWZvcm1hdHRlZCBzdHJpbmcgYW5kIGxpc3RlbmluZyB0byBjaGFuZ2VzIG9uIGEgZGF0ZSBpbnB1dCBlbGVtZW50LlxuICpcbiAqICAjIyMgRXhhbXBsZVxuICogIGA8aW5wdXQgdHlwZT1cImRhdGVcIiBuYW1lPVwibXlCaXJ0aGRheVwiIG5nTW9kZWwgdXNlVmFsdWVBc0xvY2FsSXNvPmBcbiAqXG4gKiBTZWUgYWxzbzpcbiAqIFdoYXQgaXMgdGhlIGNvcnJlY3Qgd2F5IHRvIHNldCBhbmQgZ2V0IEhUTUxJbnB1dEVsZW1lbnQudmFsdWVBc0RhdGUgdXNpbmcgbG9jYWwgRGF0ZXM/XG4gKiBodHRwczovL3N0YWNrb3ZlcmZsb3cuY29tL2EvNTMwMzM0NDJcbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3VzZVZhbHVlQXNMb2NhbElzb10nLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IExvY2FsSXNvRGF0ZVZhbHVlQWNjZXNzb3IpLFxuICAgICAgbXVsdGk6IHRydWVcbiAgICB9XG4gIF0sXG4gIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgTG9jYWxJc29EYXRlVmFsdWVBY2Nlc3NvciBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcblxuICBASG9zdExpc3RlbmVyKCdpbnB1dCcsIFsnJGV2ZW50LnRhcmdldC52YWx1ZUFzRGF0ZSddKSBvbklucHV0ID0gKGRhdGU/OiBEYXRlKSA9PiB7XG4gICAgLy8gY29udmVydCB0byBMT0NBTCBEYXRlLCB0aW1lIGlzIHNldCB0byAwMDowMCBpbiBMT0NBTCB0aW1lXG4gICAgY29uc3QgbG9jYWxEYXRlID0gZGF0ZSA/IG5ldyBEYXRlKGRhdGUuZ2V0VVRDRnVsbFllYXIoKSwgZGF0ZS5nZXRVVENNb250aCgpLCBkYXRlLmdldFVUQ0RhdGUoKSkgOiBudWxsO1xuICAgIGNvbnN0IGlzb1N0cmluZyA9IGxvY2FsRGF0ZSA/IGxvY2FsRGF0ZS50b0lTT1N0cmluZygpIDogbnVsbDtcbiAgICB0aGlzLm9uQ2hhbmdlKGlzb1N0cmluZyk7XG4gIH1cbiAgb25DaGFuZ2U6IGFueSA9ICgpID0+IHt9O1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2JsdXInLCBbXSkgb25Ub3VjaGVkID0gKCkgPT4geyB9O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMiwgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7IH1cblxuICB3cml0ZVZhbHVlKGlzb1N0cmluZz86IHN0cmluZyk6IHZvaWQge1xuICAgIGNvbnN0IGRhdGUgPSBpc29TdHJpbmcgPyBuZXcgRGF0ZShpc29TdHJpbmcpIDogbnVsbDtcbiAgICAvLyBjb252ZXJ0IHRvIFVUQyBEYXRlLCB0aW1lIGlzIHNldCB0byAwMDowMCBpbiBVVEMgdGltZVxuICAgIGNvbnN0IHV0Y0RhdGUgPSBkYXRlID8gbmV3IERhdGUoRGF0ZS5VVEMoZGF0ZS5nZXRGdWxsWWVhcigpLCBkYXRlLmdldE1vbnRoKCksIGRhdGUuZ2V0RGF0ZSgpKSkgOiBudWxsO1xuICAgIHRoaXMucmVuZGVyZXIuc2V0UHJvcGVydHkodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICd2YWx1ZUFzRGF0ZScsIHV0Y0RhdGUpO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogKF86IGFueSkgPT4gdm9pZCk6IHZvaWQge1xuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiAoKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoZWQgPSBmbjtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMucmVuZGVyZXIuc2V0UHJvcGVydHkodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdkaXNhYmxlZCcsIGlzRGlzYWJsZWQpO1xuICB9XG59XG4iXX0=