@ngx-formly/ionic/esm2022/datetime/datetime.type.mjs

Formly is a dynamic (JSON powered) form library for Angular that bring unmatched maintainability to your application's forms.

import { Component, ChangeDetectionStrategy, ViewChild, ViewEncapsulation } from '@angular/core';
import { IonDatetime } from '@ionic/angular';
import { FieldType } from '@ngx-formly/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@ionic/angular";
import * as i3 from "@ngx-formly/ionic/form-field";
import * as i4 from "@angular/common";
export class FormlyFieldDatetime extends FieldType {
    constructor() {
        super(...arguments);
        this.isOpen = false;
        this.defaultOptions = {
            props: {
                presentation: 'month-year',
            },
        };
    }
    displayFormat() {
        if (this.props.displayFormat) {
            return this.props.displayFormat;
        }
        switch (this.props.presentation) {
            case 'date-time':
            case 'time-date':
                return 'short';
            case 'time':
                return 'shortTime';
            case 'month':
                return 'MMMM';
            case 'month-year':
                return 'MMMM, y';
            case 'year':
                return 'y';
            case 'date':
                return 'mediumDate';
        }
    }
    confirm() {
        this.datetime?.confirm();
        this.close();
    }
    reset() {
        this.datetime?.reset();
        this.close();
    }
    close() {
        this.isOpen = false;
        this.formControl.markAsTouched();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyFieldDatetime, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyFieldDatetime, selector: "formly-field-ion-datetime", viewQueries: [{ propertyName: "datetime", first: true, predicate: IonDatetime, descendants: true }], usesInheritance: true, ngImport: i0, template: `
    <ion-item [button]="true" [detail]="false" (click)="isOpen = true">
      <ion-label>
        {{ formControl.value ? (formControl.value | date: displayFormat()) : props.placeholder }}
      </ion-label>
    </ion-item>
    <ion-modal
      [isOpen]="isOpen"
      (didDismiss)="close()"
      [cssClass]="'ion-datetime-modal ion-datetime-modal-' + props.presentation"
    >
      <ng-template>
        <ion-datetime
          [locale]="props.locale"
          [presentation]="props.presentation"
          [cancelText]="props.cancelText"
          [dayValues]="props.dayValues"
          [doneText]="props.doneText"
          [hourValues]="props.hourValues"
          [minuteValues]="props.minuteValues"
          [monthValues]="props.monthValues"
          [yearValues]="props.yearValues"
          [min]="props.minDate ? props.minDate : props.min"
          [max]="props.maxDate ? props.maxDate : props.max"
          [formControl]="formControl"
          [ionFormlyAttributes]="field"
        >
          <ion-buttons slot="buttons">
            <ion-button (click)="reset()">{{ props.cancelText || 'Cancel' }}</ion-button>
            <ion-button (click)="confirm()">{{ props.doneText || 'Done' }}</ion-button>
          </ion-buttons>
        </ion-datetime>
      </ng-template>
    </ion-modal>
  `, isInline: true, styles: [".ion-datetime-modal{--width: 310px;--border-radius: 8px}.ion-datetime-modal.ion-datetime-modal-time-date{--height: 440px}.ion-datetime-modal.ion-datetime-modal-date{--height: 390px}.ion-datetime-modal.ion-datetime-modal-time{--height: 260px}formly-field-ion-datetime{display:inherit}formly-field-ion-datetime ion-item{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i3.ɵIonFormlyAttributes, selector: "[ionFormlyAttributes]", inputs: ["ionFormlyAttributes"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyFieldDatetime, decorators: [{
            type: Component,
            args: [{ selector: 'formly-field-ion-datetime', template: `
    <ion-item [button]="true" [detail]="false" (click)="isOpen = true">
      <ion-label>
        {{ formControl.value ? (formControl.value | date: displayFormat()) : props.placeholder }}
      </ion-label>
    </ion-item>
    <ion-modal
      [isOpen]="isOpen"
      (didDismiss)="close()"
      [cssClass]="'ion-datetime-modal ion-datetime-modal-' + props.presentation"
    >
      <ng-template>
        <ion-datetime
          [locale]="props.locale"
          [presentation]="props.presentation"
          [cancelText]="props.cancelText"
          [dayValues]="props.dayValues"
          [doneText]="props.doneText"
          [hourValues]="props.hourValues"
          [minuteValues]="props.minuteValues"
          [monthValues]="props.monthValues"
          [yearValues]="props.yearValues"
          [min]="props.minDate ? props.minDate : props.min"
          [max]="props.maxDate ? props.maxDate : props.max"
          [formControl]="formControl"
          [ionFormlyAttributes]="field"
        >
          <ion-buttons slot="buttons">
            <ion-button (click)="reset()">{{ props.cancelText || 'Cancel' }}</ion-button>
            <ion-button (click)="confirm()">{{ props.doneText || 'Done' }}</ion-button>
          </ion-buttons>
        </ion-datetime>
      </ng-template>
    </ion-modal>
  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".ion-datetime-modal{--width: 310px;--border-radius: 8px}.ion-datetime-modal.ion-datetime-modal-time-date{--height: 440px}.ion-datetime-modal.ion-datetime-modal-date{--height: 390px}.ion-datetime-modal.ion-datetime-modal-time{--height: 260px}formly-field-ion-datetime{display:inherit}formly-field-ion-datetime ion-item{flex:1}\n"] }]
        }], propDecorators: { datetime: [{
                type: ViewChild,
                args: [IonDatetime]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZXRpbWUudHlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy91aS9pb25pYy9kYXRldGltZS9zcmMvZGF0ZXRpbWUudHlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBUSxNQUFNLGVBQWUsQ0FBQztBQUN2RyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBc0MsTUFBTSxrQkFBa0IsQ0FBQzs7Ozs7O0FBK0RqRixNQUFNLE9BQU8sbUJBQW9CLFNBQVEsU0FBeUM7SUF6Q2xGOztRQTJDRSxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBRU4sbUJBQWMsR0FBRztZQUN4QixLQUFLLEVBQUU7Z0JBQ0wsWUFBWSxFQUFFLFlBQXFCO2FBQ3BDO1NBQ0YsQ0FBQztLQXNDSDtJQXBDQyxhQUFhO1FBQ1gsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBQzdCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUM7UUFDbEMsQ0FBQztRQUVELFFBQVEsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUNoQyxLQUFLLFdBQVcsQ0FBQztZQUNqQixLQUFLLFdBQVc7Z0JBQ2QsT0FBTyxPQUFPLENBQUM7WUFDakIsS0FBSyxNQUFNO2dCQUNULE9BQU8sV0FBVyxDQUFDO1lBQ3JCLEtBQUssT0FBTztnQkFDVixPQUFPLE1BQU0sQ0FBQztZQUNoQixLQUFLLFlBQVk7Z0JBQ2YsT0FBTyxTQUFTLENBQUM7WUFDbkIsS0FBSyxNQUFNO2dCQUNULE9BQU8sR0FBRyxDQUFDO1lBQ2IsS0FBSyxNQUFNO2dCQUNULE9BQU8sWUFBWSxDQUFDO1FBQ3hCLENBQUM7SUFDSCxDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLENBQUM7UUFDekIsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2YsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLENBQUMsUUFBUSxFQUFFLEtBQUssRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNmLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUNuQyxDQUFDOytHQTdDVSxtQkFBbUI7bUdBQW5CLG1CQUFtQiwyR0FDbkIsV0FBVyx1RUF4Q1o7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FrQ1Q7OzRGQUtVLG1CQUFtQjtrQkF6Qy9CLFNBQVM7K0JBQ0UsMkJBQTJCLFlBQzNCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBa0NULG1CQUNnQix1QkFBdUIsQ0FBQyxNQUFNLGlCQUVoQyxpQkFBaUIsQ0FBQyxJQUFJOzhCQUdiLFFBQVE7c0JBQS9CLFNBQVM7dUJBQUMsV0FBVyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIFZpZXdDaGlsZCwgVmlld0VuY2Fwc3VsYXRpb24sIFR5cGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElvbkRhdGV0aW1lIH0gZnJvbSAnQGlvbmljL2FuZ3VsYXInO1xuaW1wb3J0IHsgRmllbGRUeXBlLCBGaWVsZFR5cGVDb25maWcsIEZvcm1seUZpZWxkQ29uZmlnIH0gZnJvbSAnQG5neC1mb3JtbHkvY29yZSc7XG5pbXBvcnQgeyBGb3JtbHlGaWVsZFByb3BzIH0gZnJvbSAnQG5neC1mb3JtbHkvaW9uaWMvZm9ybS1maWVsZCc7XG5cbmludGVyZmFjZSBEYXRldGltZVByb3BzIGV4dGVuZHMgRm9ybWx5RmllbGRQcm9wcyB7XG4gIHByZXNlbnRhdGlvbj86ICdkYXRlJyB8ICdkYXRlLXRpbWUnIHwgJ21vbnRoJyB8ICdtb250aC15ZWFyJyB8ICd0aW1lJyB8ICd0aW1lLWRhdGUnIHwgJ3llYXInO1xuICBsb2NhbGU/OiBhbnk7XG4gIGNhbmNlbFRleHQ/OiBzdHJpbmc7XG4gIGRvbmVUZXh0Pzogc3RyaW5nO1xuICBkYXlWYWx1ZXM/OiBudW1iZXIgfCBudW1iZXJbXSB8IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgaG91clZhbHVlcz86IG51bWJlciB8IG51bWJlcltdIHwgc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBtaW51dGVWYWx1ZXM/OiBudW1iZXIgfCBudW1iZXJbXSB8IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgbW9udGhWYWx1ZXM/OiBudW1iZXIgfCBudW1iZXJbXSB8IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgeWVhclZhbHVlcz86IG51bWJlciB8IG51bWJlcltdIHwgc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBtaW5EYXRlPzogc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBtYXhEYXRlPzogc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBkaXNwbGF5Rm9ybWF0Pzogc3RyaW5nO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEZvcm1seURhdGV0aW1lRmllbGRDb25maWcgZXh0ZW5kcyBGb3JtbHlGaWVsZENvbmZpZzxEYXRldGltZVByb3BzPiB7XG4gIHR5cGU6ICdkYXRldGltZScgfCBUeXBlPEZvcm1seUZpZWxkRGF0ZXRpbWU+O1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmb3JtbHktZmllbGQtaW9uLWRhdGV0aW1lJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8aW9uLWl0ZW0gW2J1dHRvbl09XCJ0cnVlXCIgW2RldGFpbF09XCJmYWxzZVwiIChjbGljayk9XCJpc09wZW4gPSB0cnVlXCI+XG4gICAgICA8aW9uLWxhYmVsPlxuICAgICAgICB7eyBmb3JtQ29udHJvbC52YWx1ZSA/IChmb3JtQ29udHJvbC52YWx1ZSB8IGRhdGU6IGRpc3BsYXlGb3JtYXQoKSkgOiBwcm9wcy5wbGFjZWhvbGRlciB9fVxuICAgICAgPC9pb24tbGFiZWw+XG4gICAgPC9pb24taXRlbT5cbiAgICA8aW9uLW1vZGFsXG4gICAgICBbaXNPcGVuXT1cImlzT3BlblwiXG4gICAgICAoZGlkRGlzbWlzcyk9XCJjbG9zZSgpXCJcbiAgICAgIFtjc3NDbGFzc109XCInaW9uLWRhdGV0aW1lLW1vZGFsIGlvbi1kYXRldGltZS1tb2RhbC0nICsgcHJvcHMucHJlc2VudGF0aW9uXCJcbiAgICA+XG4gICAgICA8bmctdGVtcGxhdGU+XG4gICAgICAgIDxpb24tZGF0ZXRpbWVcbiAgICAgICAgICBbbG9jYWxlXT1cInByb3BzLmxvY2FsZVwiXG4gICAgICAgICAgW3ByZXNlbnRhdGlvbl09XCJwcm9wcy5wcmVzZW50YXRpb25cIlxuICAgICAgICAgIFtjYW5jZWxUZXh0XT1cInByb3BzLmNhbmNlbFRleHRcIlxuICAgICAgICAgIFtkYXlWYWx1ZXNdPVwicHJvcHMuZGF5VmFsdWVzXCJcbiAgICAgICAgICBbZG9uZVRleHRdPVwicHJvcHMuZG9uZVRleHRcIlxuICAgICAgICAgIFtob3VyVmFsdWVzXT1cInByb3BzLmhvdXJWYWx1ZXNcIlxuICAgICAgICAgIFttaW51dGVWYWx1ZXNdPVwicHJvcHMubWludXRlVmFsdWVzXCJcbiAgICAgICAgICBbbW9udGhWYWx1ZXNdPVwicHJvcHMubW9udGhWYWx1ZXNcIlxuICAgICAgICAgIFt5ZWFyVmFsdWVzXT1cInByb3BzLnllYXJWYWx1ZXNcIlxuICAgICAgICAgIFttaW5dPVwicHJvcHMubWluRGF0ZSA/IHByb3BzLm1pbkRhdGUgOiBwcm9wcy5taW5cIlxuICAgICAgICAgIFttYXhdPVwicHJvcHMubWF4RGF0ZSA/IHByb3BzLm1heERhdGUgOiBwcm9wcy5tYXhcIlxuICAgICAgICAgIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFwiXG4gICAgICAgICAgW2lvbkZvcm1seUF0dHJpYnV0ZXNdPVwiZmllbGRcIlxuICAgICAgICA+XG4gICAgICAgICAgPGlvbi1idXR0b25zIHNsb3Q9XCJidXR0b25zXCI+XG4gICAgICAgICAgICA8aW9uLWJ1dHRvbiAoY2xpY2spPVwicmVzZXQoKVwiPnt7IHByb3BzLmNhbmNlbFRleHQgfHwgJ0NhbmNlbCcgfX08L2lvbi1idXR0b24+XG4gICAgICAgICAgICA8aW9uLWJ1dHRvbiAoY2xpY2spPVwiY29uZmlybSgpXCI+e3sgcHJvcHMuZG9uZVRleHQgfHwgJ0RvbmUnIH19PC9pb24tYnV0dG9uPlxuICAgICAgICAgIDwvaW9uLWJ1dHRvbnM+XG4gICAgICAgIDwvaW9uLWRhdGV0aW1lPlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L2lvbi1tb2RhbD5cbiAgYCxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHN0eWxlVXJsczogWycuL2RhdHRpbWUudHlwZS5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIEZvcm1seUZpZWxkRGF0ZXRpbWUgZXh0ZW5kcyBGaWVsZFR5cGU8RmllbGRUeXBlQ29uZmlnPERhdGV0aW1lUHJvcHM+PiB7XG4gIEBWaWV3Q2hpbGQoSW9uRGF0ZXRpbWUpIGRhdGV0aW1lITogSW9uRGF0ZXRpbWU7XG4gIGlzT3BlbiA9IGZhbHNlO1xuXG4gIG92ZXJyaWRlIGRlZmF1bHRPcHRpb25zID0ge1xuICAgIHByb3BzOiB7XG4gICAgICBwcmVzZW50YXRpb246ICdtb250aC15ZWFyJyBhcyBjb25zdCxcbiAgICB9LFxuICB9O1xuXG4gIGRpc3BsYXlGb3JtYXQoKSB7XG4gICAgaWYgKHRoaXMucHJvcHMuZGlzcGxheUZvcm1hdCkge1xuICAgICAgcmV0dXJuIHRoaXMucHJvcHMuZGlzcGxheUZvcm1hdDtcbiAgICB9XG5cbiAgICBzd2l0Y2ggKHRoaXMucHJvcHMucHJlc2VudGF0aW9uKSB7XG4gICAgICBjYXNlICdkYXRlLXRpbWUnOlxuICAgICAgY2FzZSAndGltZS1kYXRlJzpcbiAgICAgICAgcmV0dXJuICdzaG9ydCc7XG4gICAgICBjYXNlICd0aW1lJzpcbiAgICAgICAgcmV0dXJuICdzaG9ydFRpbWUnO1xuICAgICAgY2FzZSAnbW9udGgnOlxuICAgICAgICByZXR1cm4gJ01NTU0nO1xuICAgICAgY2FzZSAnbW9udGgteWVhcic6XG4gICAgICAgIHJldHVybiAnTU1NTSwgeSc7XG4gICAgICBjYXNlICd5ZWFyJzpcbiAgICAgICAgcmV0dXJuICd5JztcbiAgICAgIGNhc2UgJ2RhdGUnOlxuICAgICAgICByZXR1cm4gJ21lZGl1bURhdGUnO1xuICAgIH1cbiAgfVxuXG4gIGNvbmZpcm0oKSB7XG4gICAgdGhpcy5kYXRldGltZT8uY29uZmlybSgpO1xuICAgIHRoaXMuY2xvc2UoKTtcbiAgfVxuXG4gIHJlc2V0KCkge1xuICAgIHRoaXMuZGF0ZXRpbWU/LnJlc2V0KCk7XG4gICAgdGhpcy5jbG9zZSgpO1xuICB9XG5cbiAgY2xvc2UoKSB7XG4gICAgdGhpcy5pc09wZW4gPSBmYWxzZTtcbiAgICB0aGlzLmZvcm1Db250cm9sLm1hcmtBc1RvdWNoZWQoKTtcbiAgfVxufVxuIl19