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!
63 lines • 7.04 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 value and listening to changes on a date input element.
*
* ### Example
* `<input type="date" name="myBirthday" ngModel useValueAsIso>`
*/
export class IsoDateValueAccessor {
constructor(renderer, elementRef) {
this.renderer = renderer;
this.elementRef = elementRef;
this.onInput = (date) => {
const isoString = date ? date.toISOString() : null;
this.onChange(isoString);
};
this.onChange = () => { };
this.onTouched = () => { };
}
writeValue(isoString) {
const date = isoString ? new Date(isoString) : null;
this.renderer.setProperty(this.elementRef.nativeElement, 'valueAsDate', date);
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
}
}
IsoDateValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: IsoDateValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
IsoDateValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: IsoDateValueAccessor, isStandalone: true, selector: "[useValueAsIso]", host: { listeners: { "input": "onInput($event.target.valueAsDate)", "blur": "onTouched()" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => IsoDateValueAccessor),
multi: true
}
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: IsoDateValueAccessor, decorators: [{
type: Directive,
args: [{
selector: '[useValueAsIso]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => IsoDateValueAccessor),
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaXNvLWRhdGUtdmFsdWUtYWNjZXNzb3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRlLXZhbHVlLWFjY2Vzc29yL3NyYy9saWIvaXNvLWRhdGUtdmFsdWUtYWNjZXNzb3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxVQUFVLEVBQWUsWUFBWSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ3hHLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFFekU7Ozs7O0dBS0c7QUFZSCxNQUFNLE9BQU8sb0JBQW9CO0lBVS9CLFlBQW9CLFFBQW1CLEVBQVUsVUFBc0I7UUFBbkQsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUFVLGVBQVUsR0FBVixVQUFVLENBQVk7UUFSakIsWUFBTyxHQUFHLENBQUMsSUFBVyxFQUFFLEVBQUU7WUFDOUUsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztZQUNuRCxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQzNCLENBQUMsQ0FBQTtRQUNELGFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFFQyxjQUFTLEdBQUcsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO0lBRTJCLENBQUM7SUFFNUUsVUFBVSxDQUFDLFNBQWtCO1FBQzNCLE1BQU0sSUFBSSxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztRQUNwRCxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxhQUFhLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDaEYsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQW9CO1FBQ25DLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUM7SUFDbkYsQ0FBQzs7aUhBM0JVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLDZKQVRwQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO1lBQ25ELEtBQUssRUFBRSxJQUFJO1NBQ1o7S0FDRjsyRkFHVSxvQkFBb0I7a0JBWGhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsU0FBUyxFQUFFO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHFCQUFxQixDQUFDOzRCQUNuRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjtvQkFDRCxVQUFVLEVBQUUsSUFBSTtpQkFDakI7eUhBR3VELE9BQU87c0JBQTVELFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsMkJBQTJCLENBQUM7Z0JBTTFCLFNBQVM7c0JBQWxDLFlBQVk7dUJBQUMsTUFBTSxFQUFFLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIGZvcndhcmRSZWYsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG4vKipcbiAqIFRoZSBhY2Nlc3NvciBmb3Igd3JpdGluZyBhbiBpc28tZm9ybWF0dGVkIHN0cmluZyB2YWx1ZSBhbmQgbGlzdGVuaW5nIHRvIGNoYW5nZXMgb24gYSBkYXRlIGlucHV0IGVsZW1lbnQuXG4gKlxuICogICMjIyBFeGFtcGxlXG4gKiAgYDxpbnB1dCB0eXBlPVwiZGF0ZVwiIG5hbWU9XCJteUJpcnRoZGF5XCIgbmdNb2RlbCB1c2VWYWx1ZUFzSXNvPmBcbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3VzZVZhbHVlQXNJc29dJyxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBJc29EYXRlVmFsdWVBY2Nlc3NvciksXG4gICAgICBtdWx0aTogdHJ1ZVxuICAgIH1cbiAgXSxcbiAgc3RhbmRhbG9uZTogdHJ1ZVxufSlcbmV4cG9ydCBjbGFzcyBJc29EYXRlVmFsdWVBY2Nlc3NvciBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcblxuICBASG9zdExpc3RlbmVyKCdpbnB1dCcsIFsnJGV2ZW50LnRhcmdldC52YWx1ZUFzRGF0ZSddKSBvbklucHV0ID0gKGRhdGU/OiBEYXRlKSA9PiB7XG4gICAgY29uc3QgaXNvU3RyaW5nID0gZGF0ZSA/IGRhdGUudG9JU09TdHJpbmcoKSA6IG51bGw7XG4gICAgdGhpcy5vbkNoYW5nZShpc29TdHJpbmcpO1xuICB9XG4gIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7fTtcblxuICBASG9zdExpc3RlbmVyKCdibHVyJywgW10pIG9uVG91Y2hlZCA9ICgpID0+IHsgfTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikgeyB9XG5cbiAgd3JpdGVWYWx1ZShpc29TdHJpbmc/OiBzdHJpbmcpOiB2b2lkIHtcbiAgICBjb25zdCBkYXRlID0gaXNvU3RyaW5nID8gbmV3IERhdGUoaXNvU3RyaW5nKSA6IG51bGw7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eSh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ3ZhbHVlQXNEYXRlJywgZGF0ZSk7XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiAoXzogYW55KSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnZGlzYWJsZWQnLCBpc0Rpc2FibGVkKTtcbiAgfVxufVxuIl19