Ghost/ghost/admin/app/components/gh-date-picker.js

import Component from '@glimmer/component';
import moment from 'moment';
import {action} from '@ember/object';
import {isBlank} from '@ember/utils';
import {tracked} from '@glimmer/tracking';

export class DateError extends Error {
    constructor(msgOrObj) {
        if (typeof msgOrObj === 'string') {
            super(msgOrObj);
        } else {
            super(msgOrObj.message);
            Object.keys(msgOrObj).forEach((key) => {
                if (key !== 'message') {
                    this[key] = msgOrObj[key];
                }
            });
        }
    }
}

export default class GhDatePicker extends Component {
    @tracked error = null;

    get dateFormat() {
        return 'YYYY-MM-DD';
    }

    get minDate() {
        return this._minMaxMoment(this.args.minDate);
    }

    get maxDate() {
        return this._minMaxMoment(this.args.maxDate);
    }

    @action
    setDate(dateStr) {
        this.error = null;

        if (!dateStr.match(/^\d\d\d\d-\d\d-\d\d$/)) {
            this.error = `Invalid date format, must be ${this.dateFormat}`;
            this.args.onError?.(new DateError({
                message: this.error,
                date: dateStr
            }));
            return false;
        }

        const mDate = moment(dateStr);

        if (!mDate.isValid()) {
            this.error = 'Invalid date';
            this.args.onError?.(new DateError({
                message: this.error,
                date: dateStr
            }));
            return false;
        }

        if (this.args.minDate && mDate.isBefore(moment(this.args.minDate))) {
            this.error = `Must be on or after ${moment(this.args.minDate).format(this.dateFormat)}`;
            this.args.onError?.(new DateError({
                message: this.error,
                date: dateStr
            }));
            return false;
        }

        if (this.args.maxDate && mDate.isAfter(moment(this.args.maxDate))) {
            this.error = `Must be on or before ${moment(this.args.maxDate).format(this.dateFormat)}`;
            this.args.onError?.(new DateError({
                message: this.error,
                date: dateStr
            }));
            return false;
        }

        this.args.onChange?.(mDate.toDate());
    }

    @action
    onDateSelected(datepickerEvent) {
        this.setDate(datepickerEvent.id);
    }

    @action
    onDateInput(datepicker, event) {
        const skipFocus = true;
        datepicker.actions.close(event, skipFocus);

        this.args.onInput?.(event);
    }

    @action
    onDateBlur(event) {
        const value = event.target.value;

        if (!value) {
            this.resetInputValue(event.target);
        } else {
            this.setDate(value);
        }

        this.args.onBlur?.(event);
    }

    @action
    onDateKeydown(datepicker, event) {
        if (event.key === 'Escape') {
            event.preventDefault();
            event.stopImmediatePropagation();
            this.resetInputValue(event.target);
        }

        if (event.key === 'Enter') {
            event.preventDefault();
            event.stopImmediatePropagation();
            this.setDate(event.target.value);
            datepicker.actions.close();
        }

        this.args.onKeydown?.(event);
    }

    @action
    resetInputValue(input) {
        input.value = moment(this.args.value).format(this.dateFormat);
        this.error = null;
    }

    _minMaxMoment(date) {
        if (date === 'now') {
            return moment(moment().format(this.dateFormat));
        } else if (!isBlank(date)) {
            return moment(moment(date).format(this.dateFormat));
        } else {
            return null;
        }
    }
}