@progress/kendo-angular-scheduler/esm2022/editing/date-time-picker.component.mjs

Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Injector, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule } from '@angular/forms';
import { Component, forwardRef, Input, Output, EventEmitter } from '@angular/core';
import { DatePickerComponent, DateTimePickerComponent, DateTimePickerCustomMessagesComponent, DatePickerCustomMessagesComponent } from '@progress/kendo-angular-dateinputs';
import { SchedulerLocalizationService } from '../localization/scheduler-localization.service';
import * as i0 from "@angular/core";
import * as i1 from "../localization/scheduler-localization.service";
import * as i2 from "@angular/forms";
/**
 * @hidden
 */
export const SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR = {
    multi: true,
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => SchedulerDateTimePickerComponent)
};
/**
 * @hidden
 */
export class SchedulerDateTimePickerComponent {
    injector;
    localization;
    datePicker;
    dateTimePicker;
    isAllDay;
    valueChange = new EventEmitter();
    constructor(injector, localization) {
        this.injector = injector;
        this.localization = localization;
    }
    /**
     * @hidden
     */
    get focusableId() {
        return this.isAllDay ? this.datePicker?.focusableId : this.dateTimePicker?.focusableId;
    }
    get formControl() {
        const ngControl = this.injector.get(NgControl, null);
        return ngControl?.control || null;
    }
    textFor(key) {
        return this.localization.get(key);
    }
    date;
    writeValue(newDate) {
        if (newDate instanceof Date) {
            this.date = newDate;
        }
    }
    onValueChange(newValue) {
        this.onChangeCallback(newValue);
        this.valueChange.emit(newValue);
    }
    /**
     * @hidden
     */
    focus() {
        this.datePicker ? this.datePicker.focus() : this.dateTimePicker.focus();
    }
    onTouchedCallback = (_) => { };
    onChangeCallback = (_) => { };
    /**
     * @hidden
     */
    registerOnChange(fn) {
        this.onChangeCallback = fn;
    }
    /**
     * @hidden
     */
    registerOnTouched(fn) {
        this.onTouchedCallback = fn;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SchedulerDateTimePickerComponent, deps: [{ token: i0.Injector }, { token: i1.SchedulerLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SchedulerDateTimePickerComponent, isStandalone: true, selector: "kendo-scheduler-datetime-picker", inputs: { isAllDay: "isAllDay" }, outputs: { valueChange: "valueChange" }, providers: [
            SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR
        ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "dateTimePicker", first: true, predicate: ["datetimepicker"], descendants: true }], ngImport: i0, template: `
    @if (isAllDay) {
      <kendo-datepicker
        #datepicker
        [(value)]='date'
        (valueChange)='onValueChange($event)'
        [formControl]="formControl"
        [clearButton]="true"
        >
        <kendo-datepicker-messages
          [today]="textFor('editorDateInputsToday')"
          [toggle]="textFor('editorDateInputsToggle')"
          [parentViewButtonTitle]="textFor('editorDateInputsParentViewButton')"
          >
        </kendo-datepicker-messages>
      </kendo-datepicker>
    }
    @if (!isAllDay) {
      <kendo-datetimepicker
        #datetimepicker
        [(value)]='date'
        (valueChange)='onValueChange($event)'
        [formControl]="formControl"
        [clearButton]="true"
        >
        <kendo-datetimepicker-messages
          [toggle]="textFor('editorDateInputsToggle')"
          [today]="textFor('editorDateInputsToday')"
          [accept]="textFor('editorDateInputsAccept')"
          [acceptLabel]="textFor('editorDateInputsAcceptLabel')"
          [cancelLabel]="textFor('editorDateInputsCancelLabel')"
          [cancel]="textFor('editorDateInputsCancel')"
          [now]="textFor('editorDateInputsNow')"
          [nowLabel]="textFor('editorDateInputsNowLabel')"
          [dateTab]="textFor('editorDateInputsDateTab')"
          [dateTabLabel]="textFor('editorDateInputsDateTabLabel')"
          [timeTab]="textFor('editorDateInputsTimeTab')"
          [timeTabLabel]="textFor('editorDateInputsTimeTabLabel')"
          [parentViewButtonTitle]="textFor('editorDateInputsParentViewButton')"
          >
        </kendo-datetimepicker-messages>
      </kendo-datetimepicker>
    }
    `, isInline: true, dependencies: [{ kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }, { kind: "component", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "adaptiveTitle", "adaptiveSubtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { kind: "component", type: DateTimePickerCustomMessagesComponent, selector: "kendo-datetimepicker-messages" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SchedulerDateTimePickerComponent, decorators: [{
            type: Component,
            args: [{
                    providers: [
                        SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR
                    ],
                    selector: 'kendo-scheduler-datetime-picker',
                    template: `
    @if (isAllDay) {
      <kendo-datepicker
        #datepicker
        [(value)]='date'
        (valueChange)='onValueChange($event)'
        [formControl]="formControl"
        [clearButton]="true"
        >
        <kendo-datepicker-messages
          [today]="textFor('editorDateInputsToday')"
          [toggle]="textFor('editorDateInputsToggle')"
          [parentViewButtonTitle]="textFor('editorDateInputsParentViewButton')"
          >
        </kendo-datepicker-messages>
      </kendo-datepicker>
    }
    @if (!isAllDay) {
      <kendo-datetimepicker
        #datetimepicker
        [(value)]='date'
        (valueChange)='onValueChange($event)'
        [formControl]="formControl"
        [clearButton]="true"
        >
        <kendo-datetimepicker-messages
          [toggle]="textFor('editorDateInputsToggle')"
          [today]="textFor('editorDateInputsToday')"
          [accept]="textFor('editorDateInputsAccept')"
          [acceptLabel]="textFor('editorDateInputsAcceptLabel')"
          [cancelLabel]="textFor('editorDateInputsCancelLabel')"
          [cancel]="textFor('editorDateInputsCancel')"
          [now]="textFor('editorDateInputsNow')"
          [nowLabel]="textFor('editorDateInputsNowLabel')"
          [dateTab]="textFor('editorDateInputsDateTab')"
          [dateTabLabel]="textFor('editorDateInputsDateTabLabel')"
          [timeTab]="textFor('editorDateInputsTimeTab')"
          [timeTabLabel]="textFor('editorDateInputsTimeTabLabel')"
          [parentViewButtonTitle]="textFor('editorDateInputsParentViewButton')"
          >
        </kendo-datetimepicker-messages>
      </kendo-datetimepicker>
    }
    `,
                    standalone: true,
                    imports: [DatePickerComponent, ReactiveFormsModule, DatePickerCustomMessagesComponent, DateTimePickerComponent, DateTimePickerCustomMessagesComponent]
                }]
        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.SchedulerLocalizationService }], propDecorators: { datePicker: [{
                type: ViewChild,
                args: ['datepicker']
            }], dateTimePicker: [{
                type: ViewChild,
                args: ['datetimepicker']
            }], isAllDay: [{
                type: Input
            }], valueChange: [{
                type: Output
            }] } });