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!
316 lines (304 loc) • 15.6 kB
JavaScript
import * as i0 from '@angular/core';
import { forwardRef, Directive, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
/**
* The accessor for writing a date object value and listening to changes on a date input element.
*
* ### Example
* `<input type="date" name="myBirthday" ngModel useValueAsDate>`
*/
class DateValueAccessor {
constructor(renderer, elementRef) {
this.renderer = renderer;
this.elementRef = elementRef;
this.onChange = (_) => { };
this.onTouched = () => { };
}
writeValue(date) {
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);
}
}
DateValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DateValueAccessor, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
DateValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: DateValueAccessor, isStandalone: true, selector: "[useValueAsDate]", host: { listeners: { "input": "onChange($event.target.valueAsDate)", "blur": "onTouched()" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DateValueAccessor),
multi: true
}
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DateValueAccessor, decorators: [{
type: Directive,
args: [{
selector: '[useValueAsDate]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DateValueAccessor),
multi: true
}
],
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { onChange: [{
type: HostListener,
args: ['input', ['$event.target.valueAsDate']]
}], onTouched: [{
type: HostListener,
args: ['blur', []]
}] } });
class DateValueAccessorModule {
}
DateValueAccessorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DateValueAccessorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DateValueAccessorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: DateValueAccessorModule, imports: [DateValueAccessor], exports: [DateValueAccessor] });
DateValueAccessorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DateValueAccessorModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: DateValueAccessorModule, decorators: [{
type: NgModule,
args: [{
imports: [DateValueAccessor],
exports: [DateValueAccessor]
}]
}] });
/**
* 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
*/
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', []]
}] } });
class LocalDateValueAccessorModule {
}
LocalDateValueAccessorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalDateValueAccessorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
LocalDateValueAccessorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: LocalDateValueAccessorModule, imports: [LocalDateValueAccessor], exports: [LocalDateValueAccessor] });
LocalDateValueAccessorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalDateValueAccessorModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalDateValueAccessorModule, decorators: [{
type: NgModule,
args: [{
imports: [LocalDateValueAccessor],
exports: [LocalDateValueAccessor]
}]
}] });
/**
* 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>`
*/
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', []]
}] } });
class IsoDateValueAccessorModule {
}
IsoDateValueAccessorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: IsoDateValueAccessorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
IsoDateValueAccessorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: IsoDateValueAccessorModule, imports: [IsoDateValueAccessor], exports: [IsoDateValueAccessor] });
IsoDateValueAccessorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: IsoDateValueAccessorModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: IsoDateValueAccessorModule, decorators: [{
type: NgModule,
args: [{
imports: [IsoDateValueAccessor],
exports: [IsoDateValueAccessor]
}]
}] });
/**
* 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
*/
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', []]
}] } });
class LocalIsoDateValueAccessorModule {
}
LocalIsoDateValueAccessorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalIsoDateValueAccessorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
LocalIsoDateValueAccessorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: LocalIsoDateValueAccessorModule, imports: [LocalIsoDateValueAccessor], exports: [LocalIsoDateValueAccessor] });
LocalIsoDateValueAccessorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalIsoDateValueAccessorModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LocalIsoDateValueAccessorModule, decorators: [{
type: NgModule,
args: [{
imports: [LocalIsoDateValueAccessor],
exports: [LocalIsoDateValueAccessor]
}]
}] });
/*
* Public API Surface of the date-value-accessor
*/
/**
* Generated bundle index. Do not edit.
*/
export { DateValueAccessor, DateValueAccessorModule, IsoDateValueAccessor, IsoDateValueAccessorModule, LocalDateValueAccessor, LocalDateValueAccessorModule, LocalIsoDateValueAccessor, LocalIsoDateValueAccessorModule };
//# sourceMappingURL=angular-date-value-accessor.mjs.map