@ng-not-found/ng-typed-date
Version:
Directive that uses the native date picker and binds the typed value to Date.
308 lines (301 loc) • 12.3 kB
JavaScript
import * as i2 from '@angular/common';
import { DatePipe, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Optional, Host, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { NgModel, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
class NgModelDateDirective extends NgModel {
constructor(parent, elementRef, renderer, datePipe) {
super(parent, null, null, null);
this.elementRef = elementRef;
this.renderer = renderer;
this.datePipe = datePipe;
this.required = null;
this.ngModelDateChange = new EventEmitter();
this.onChange = () => { };
this.onTouched = () => { };
super.valueAccessor = this;
super.options = { updateOn: 'blur' };
super.model = this.ngModelDate;
}
get ngModelDate() {
return this._ngModelDate;
}
set ngModelDate(value) {
if (this.isValidDate(value)) {
if (this._ngModelDate != value) {
this._ngModelDate = value;
this.onBlur();
}
}
else {
this._ngModelDate = null;
}
}
get min() {
return this._min;
}
set min(value) {
if (this._min != value) {
this._min = value;
this.setSettingsInputDate('min', this._min);
}
}
get max() {
return this._max;
}
set max(value) {
if (this._max != value) {
this._max = value;
this.setSettingsInputDate('max', this._max);
}
}
writeValue(value) {
this.setPropertyElement('value', value);
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.setPropertyElement('disabled', isDisabled);
}
ngOnInit() {
this.setRequired();
this.setSettingsInputDate('min', this.min);
this.setSettingsInputDate('max', this.max);
this.onBlur();
}
setRequired() {
if (this.required !== null) {
this.control.setValidators(Validators.required);
}
}
setSettingsInputDate(propertyName, value) {
if (value) {
this.setPropertyElement(propertyName, this.formatDate(value));
}
}
onChangeDate(event) {
const [year, month, day] = event.split('-');
this._ngModelDate = new Date(Number(year), Number(month) - 1, Number(day), 0, 0, 0);
this.ngModelDateChange.emit(this._ngModelDate);
}
onBlur() {
this.control.setValue(this.formatDate(this._ngModelDate));
this.onTouched();
}
formatDate(date) {
if (this.isValidDate(date))
return this.datePipe.transform(date, 'yyyy-MM-dd');
return null;
}
setPropertyElement(propertyName, value) {
this.renderer.setProperty(this.elementRef.nativeElement, propertyName, value);
}
isValidDate(value) {
if (!value)
return false;
if (value instanceof Date)
return !isNaN(value.getTime());
return !isNaN(Date.parse(value));
}
}
NgModelDateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgModelDateDirective, deps: [{ token: i1.ControlContainer, host: true, optional: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.DatePipe }], target: i0.ɵɵFactoryTarget.Directive });
NgModelDateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NgModelDateDirective, selector: "[type=date][ngModelDate]:not([formControlName]):not([formControl])", inputs: { ngModelDate: "ngModelDate", min: "min", max: "max", required: "required" }, outputs: { ngModelDateChange: "ngModelDateChange" }, host: { listeners: { "change": "onChangeDate($event.target.value)", "blur": "onBlur()" } }, providers: [
DatePipe
], usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgModelDateDirective, decorators: [{
type: Directive,
args: [{
selector: '[type=date][ngModelDate]:not([formControlName]):not([formControl])',
providers: [
DatePipe
],
host: {
'(change)': 'onChangeDate($event.target.value)',
'(blur)': 'onBlur()',
}
}]
}], ctorParameters: function () {
return [{ type: i1.ControlContainer, decorators: [{
type: Optional
}, {
type: Host
}] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.DatePipe }];
}, propDecorators: { ngModelDate: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], required: [{
type: Input
}], ngModelDateChange: [{
type: Output
}] } });
class NgModelDatetimeLocalDirective extends NgModel {
constructor(parent, elementRef, renderer) {
super(parent, null, null, null);
this.elementRef = elementRef;
this.renderer = renderer;
this.required = null;
this.ngModelDateChange = new EventEmitter();
this.onChange = () => { };
this.onTouched = () => { };
super.valueAccessor = this;
super.options = { updateOn: 'blur' };
super.model = this.ngModelDate;
}
get ngModelDate() {
return this._ngModelDate;
}
set ngModelDate(value) {
if (this.isValidDate(value)) {
if (this._ngModelDate != value) {
this._ngModelDate = value;
this.control.setValue(this.formatDate(this._ngModelDate));
this.onTouched();
}
}
else {
this._ngModelDate = null;
}
}
get min() {
return this._min;
}
set min(value) {
if (this._min != value) {
this._min = value;
this.setSettingsInputDate('min', this._min);
}
}
get max() {
return this._max;
}
set max(value) {
if (this._max != value) {
this._max = value;
this.setSettingsInputDate('max', this._max);
}
}
writeValue(value) {
this.setPropertyElement('value', value);
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.setPropertyElement('disabled', isDisabled);
}
ngOnInit() {
this.setRequired();
this.setSettingsInputDate('min', this.min);
this.setSettingsInputDate('max', this.max);
}
setRequired() {
if (this.required !== null) {
this.control.setValidators(Validators.required);
}
}
setSettingsInputDate(propertyName, value) {
if (value) {
this.setPropertyElement(propertyName, this.formatDate(value));
}
}
onChangeDate(value) {
this._ngModelDate = this.parseDateString(value);
this.control.setValue(this.formatDate(this._ngModelDate));
this.ngModelDateChange.emit(this._ngModelDate);
}
parseDateString(date) {
if (!date)
return undefined;
date = date.replace('T', '-');
var parts = date.split('-');
var timeParts = parts[3].split(':');
return new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]), Number(timeParts[0]), Number(timeParts[1]));
}
formatDate(date) {
if (this.isValidDate(date))
return this.toDateString(new Date(date));
return null;
}
toDateString(date) {
return (date.getFullYear().toString() + '-' + ("0" + (date.getMonth() + 1)).slice(-2) + '-' + ("0" + (date.getDate())).slice(-2))
+ 'T' + date.toTimeString().slice(0, 5);
}
setPropertyElement(propertyName, value) {
this.renderer.setProperty(this.elementRef.nativeElement, propertyName, value);
}
isValidDate(value) {
if (!value)
return false;
if (value instanceof Date)
return !isNaN(value.getTime());
return !isNaN(Date.parse(value));
}
}
NgModelDatetimeLocalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgModelDatetimeLocalDirective, deps: [{ token: i1.ControlContainer, host: true, optional: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
NgModelDatetimeLocalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NgModelDatetimeLocalDirective, selector: "[type=datetime-local][ngModelDate]:not([formControlName]):not([formControl])", inputs: { ngModelDate: "ngModelDate", min: "min", max: "max", required: "required" }, outputs: { ngModelDateChange: "ngModelDateChange" }, host: { listeners: { "change": "onChangeDate($event.target.value)" } }, providers: [], usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgModelDatetimeLocalDirective, decorators: [{
type: Directive,
args: [{
selector: '[type=datetime-local][ngModelDate]:not([formControlName]):not([formControl])',
providers: [],
host: {
'(change)': 'onChangeDate($event.target.value)',
}
}]
}], ctorParameters: function () {
return [{ type: i1.ControlContainer, decorators: [{
type: Optional
}, {
type: Host
}] }, { type: i0.ElementRef }, { type: i0.Renderer2 }];
}, propDecorators: { ngModelDate: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], required: [{
type: Input
}], ngModelDateChange: [{
type: Output
}] } });
class NgTypedDateModule {
}
NgTypedDateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgTypedDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgTypedDateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgTypedDateModule, declarations: [NgModelDateDirective, NgModelDatetimeLocalDirective], imports: [FormsModule,
CommonModule,
ReactiveFormsModule], exports: [NgModelDateDirective, NgModelDatetimeLocalDirective] });
NgTypedDateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgTypedDateModule, imports: [FormsModule,
CommonModule,
ReactiveFormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgTypedDateModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgModelDateDirective, NgModelDatetimeLocalDirective],
imports: [
FormsModule,
CommonModule,
ReactiveFormsModule
],
exports: [NgModelDateDirective, NgModelDatetimeLocalDirective]
}]
}] });
/*
* Public API Surface of ng-typed-date
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgModelDateDirective, NgModelDatetimeLocalDirective, NgTypedDateModule };
//# sourceMappingURL=ng-not-found-ng-typed-date.mjs.map