lite-datetime-picker
Version:
Spliced Angular Material date and time picker
153 lines (147 loc) • 10.3 kB
JavaScript
import * as i0 from '@angular/core';
import { forwardRef, Component, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i2 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import * as i3 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import { CommonModule } from '@angular/common';
class LiteDatetimePickerComponent {
constructor() {
this.isDisabled = false;
this.max = null;
this.min = null;
this.placeholder = 'Date';
this.step = null;
this.required = false;
this.onChange = () => { };
this.onTouched = () => { };
this._value = null;
}
get value() { return this._value; }
set value(val) {
this._value = val ? new Date(val) : null;
this.onChange(this._value);
this.onTouched();
}
get datePart() {
return this.value;
}
set datePart(val) {
const value = new Date(this.value || new Date().toDateString());
if (!!val && this.isValidDate(val)) {
value.setDate(val.getDate());
value.setMonth(val.getMonth());
value.setFullYear(val.getFullYear());
this.value = value;
}
else {
this.value = null;
}
}
get timePart() {
return this.value
? this.value.toTimeString().substr(0, 5)
: null;
}
set timePart(val) {
const value = new Date(this.value || new Date());
if (!!val && val.includes(':')) {
const subParts = val.split(':');
value.setHours(Number(subParts[0]));
value.setMinutes(Number(subParts[1]));
}
else {
value.setHours(0);
value.setMinutes(0);
}
this.value = value;
}
isValidDate(d) {
return d instanceof Date
&& !isNaN(d.getTime());
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.isDisabled = isDisabled;
}
writeValue(value) {
if (value) {
this.value = value;
}
}
}
LiteDatetimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: LiteDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
LiteDatetimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: LiteDatetimePickerComponent, selector: "lft-lite-datetime-picker", inputs: { max: "max", min: "min", placeholder: "placeholder", step: "step", required: "required", _value: ["value", "_value"] }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => LiteDatetimePickerComponent),
multi: true
}
], ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col\">\r\n <mat-form-field>\r\n <mat-label>{{placeholder}}</mat-label>\r\n <input matInput\r\n [(ngModel)]=\"datePart\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"isDisabled\"\r\n [matDatepicker]=\"datePicker\"\r\n [max]=\"max\"\r\n [min]=\"min\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\">\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #datePicker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field>\r\n <input type=\"time\" matInput\r\n (blur)=\"onTouched()\"\r\n [(ngModel)]=\"timePart\"\r\n [disabled]=\"isDisabled || !datePart\"\r\n [step]=\"step\">\r\n </mat-form-field>\r\n </div>\r\n</div>\r\n", styles: ["input[type=time]{height:18px}.row{display:flex}.row .col{flex:1;margin-right:20px;min-width:50px}.row .col:last-child{margin-right:0}.row .col>mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: LiteDatetimePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'lft-lite-datetime-picker', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => LiteDatetimePickerComponent),
multi: true
}
], template: "<div class=\"row\">\r\n <div class=\"col\">\r\n <mat-form-field>\r\n <mat-label>{{placeholder}}</mat-label>\r\n <input matInput\r\n [(ngModel)]=\"datePart\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"isDisabled\"\r\n [matDatepicker]=\"datePicker\"\r\n [max]=\"max\"\r\n [min]=\"min\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\">\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #datePicker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field>\r\n <input type=\"time\" matInput\r\n (blur)=\"onTouched()\"\r\n [(ngModel)]=\"timePart\"\r\n [disabled]=\"isDisabled || !datePart\"\r\n [step]=\"step\">\r\n </mat-form-field>\r\n </div>\r\n</div>\r\n", styles: ["input[type=time]{height:18px}.row{display:flex}.row .col{flex:1;margin-right:20px;min-width:50px}.row .col:last-child{margin-right:0}.row .col>mat-form-field{width:100%}\n"] }]
}], propDecorators: { max: [{
type: Input
}], min: [{
type: Input
}], placeholder: [{
type: Input
}], step: [{
type: Input
}], required: [{
type: Input
}], _value: [{
type: Input,
args: ['value']
}] } });
class LiteDatetimePickerModule {
}
LiteDatetimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: LiteDatetimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
LiteDatetimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.5", ngImport: i0, type: LiteDatetimePickerModule, declarations: [LiteDatetimePickerComponent], imports: [CommonModule,
FormsModule,
MatDatepickerModule,
MatFormFieldModule,
MatInputModule], exports: [LiteDatetimePickerComponent] });
LiteDatetimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: LiteDatetimePickerModule, imports: [CommonModule,
FormsModule,
MatDatepickerModule,
MatFormFieldModule,
MatInputModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: LiteDatetimePickerModule, decorators: [{
type: NgModule,
args: [{
declarations: [LiteDatetimePickerComponent],
imports: [
CommonModule,
FormsModule,
MatDatepickerModule,
MatFormFieldModule,
MatInputModule
],
exports: [LiteDatetimePickerComponent]
}]
}] });
/*
* Public API Surface of lite-datetime-picker
*/
/**
* Generated bundle index. Do not edit.
*/
export { LiteDatetimePickerComponent, LiteDatetimePickerModule };
//# sourceMappingURL=lite-datetime-picker.mjs.map