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

import Component from '@ember/component';
import classic from 'ember-classic-decorator';
import moment from 'moment-timezone';
import {action, computed} from '@ember/object';
import {isBlank, isEmpty} from '@ember/utils';
import {or, reads} from '@ember/object/computed';
import {inject as service} from '@ember/service';
import {tagName} from '@ember-decorators/component';

const DATE_FORMAT = 'YYYY-MM-DD';

@classic
@tagName('')
export default class GhDateTimePicker extends Component {
    @service settings;

    date = '';
    dateFormat = DATE_FORMAT;
    time = '';
    errors = null;
    dateErrorProperty = null;
    timeErrorProperty = null;
    isActive = true;
    _time = '';
    // _date is always a moment object in the blog's timezone
    _previousTime = '';
    _minDate = null; // Always set to a Date object
    _maxDate = null; // Always set to a Date object
    _scratchDate = null;
    _scratchDateError = null;

    // actions
    setTypedDateError() {}

    get renderInPlaceWithFallback() {
        return this.renderInPlace === undefined ? true : this.renderInPlace;
    }

    @reads('settings.timezone')
        blogTimezone;

    @or('dateError', 'timeError')
        hasError;

    @computed('_date', '_scratchDate')
    get dateValue() {
        if (this._scratchDate !== null) {
            return this._scratchDate;
        } else {
            return this._date?.format(DATE_FORMAT);
        }
    }
    
    @computed('_date')
    get localDateValue() {
        // Convert the selected date to a new date in the local timezone, purely to please PowerDatepicker
        return new Date(this._date.format(DATE_FORMAT));
    }

    @computed('blogTimezone')
    get timezone() {
        let blogTimezone = this.blogTimezone;
        return moment.utc().tz(blogTimezone).format('z');
    }

    @computed('errors.[]', 'dateErrorProperty', '_scratchDateError')
    get dateError() {
        if (this._scratchDateError) {
            return this._scratchDateError;
        }

        let errors = this.errors;
        let property = this.dateErrorProperty;

        if (errors && !isEmpty(errors.errorsFor(property))) {
            return errors.errorsFor(property).get('firstObject').message;
        }

        return '';
    }

    @computed('errors.[]', 'timeErrorProperty')
    get timeError() {
        let errors = this.errors;
        let property = this.timeErrorProperty;

        if (errors && !isEmpty(errors.errorsFor(property))) {
            return errors.errorsFor(property).get('firstObject').message;
        }

        return '';
    }

    didReceiveAttrs() {
        super.didReceiveAttrs(...arguments);

        let date = this.date;
        let time = this.time;
        let minDate = this.minDate;
        let maxDate = this.maxDate;
        let blogTimezone = this.blogTimezone;

        if (!isBlank(date)) {
            // Note: input date as a string is expected to be in the blog's timezone
            this.set('_date', moment.tz(date, blogTimezone));
        } else {
            this.set('_date', moment().tz(blogTimezone));
        }

        // reset scratch date if the component becomes inactive
        // (eg, PSM is closed, or save type is changed away from scheduled)
        if (!this.isActive && this._lastIsActive) {
            this._resetScratchDate();
        }
        this._lastIsActive = this.isActive;

        // reset scratch date if date is changed externally
        if ((date && date.valueOf()) !== (this._lastDate && this._lastDate.valueOf())) {
            this._resetScratchDate();
        }
        this._lastDate = this.date;

        if (isBlank(time)) {
            this.set('_time', this._date.format('HH:mm'));
        } else {
            this.set('_time', this.time);
        }
        this.set('_previousTime', this._time);

        // unless min/max date is at midnight moment will disable that day
        if (minDate === 'now') {
            this.set('_minDate', moment(moment().tz(blogTimezone).format(DATE_FORMAT)).toDate());
        } else if (!isBlank(minDate)) {
            this.set('_minDate', moment(moment.tz(minDate, blogTimezone).format(DATE_FORMAT)).toDate());
        } else {
            this.set('_minDate', null);
        }

        if (maxDate === 'now') {
            this.set('_maxDate', moment(moment().tz(blogTimezone).format(DATE_FORMAT)).toDate());
        } else if (!isBlank(maxDate)) {
            this.set('_maxDate', moment(moment.tz(maxDate, blogTimezone).format(DATE_FORMAT)).toDate());
        } else {
            this.set('_maxDate', null);
        }
    }

    willDestroyElement() {
        super.willDestroyElement(...arguments);
        this.setTypedDateError(null);
    }

    // if date or time is set and the other property is blank set that too
    // so that we don't get "can't be blank" errors
    @action
    setDateInternal(date) {
        if (date !== this._date) {
            this.setDate(date);

            if (isBlank(this.time)) {
                this.setTime(this._time);
            }
        }
    }

    /** 
     * This method is called by `PowerDatepicker` when a user selected a date. It is constructed like
     * The difference here is that the Date object that is passed contains the date, but only when viewed in the local timezone.
     * This timezone can differ between the timezone of the blog. We need to convert the date to a new date in the blog's timezone on the same day that was selected.
     * Example: new Date('2000-01-01') -> a user selected 2000-01-01. In the blog timezone, this could be 1999-12-31 23:00, which is wrong.
    */
    @action
    setLocalDate(date) {
        // Convert to a date string in the local timezone (moment is in local timezone by default)
        const dateString = moment(date).format(DATE_FORMAT);
        this._setDate(dateString);
    }

    @action
    setTimeInternal(time, event) {
        if (time.match(/^\d:\d\d$/)) {
            time = `0${time}`;
        }

        if (time !== this._previousTime) {
            this.setTime(time, event);
            this.set('_previousTime', time);

            if (isBlank(this.date)) {
                this.setDate(this._date.toDate());
            }
        }
    }

    @action
    updateTimeValue(event) {
        this.set('_time', event.target.value);
    }

    @action
    registerTimeInput(elem) {
        this._timeInputElem = elem;
    }

    @action
    onDateInput(datepicker, event) {
        let skipFocus = true;
        datepicker.actions.close(event, skipFocus);
        this.set('_scratchDate', event.target.value);
    }

    @action
    onDateBlur(event) {
        // make sure we're not doing anything just because the calendar dropdown
        // is opened and clicked
        if (event.target.value === this._date.format('YYYY-MM-DD')) {
            this._resetScratchDate();
            return;
        }

        if (!event.target.value) {
            this._resetScratchDate();
        } else {
            this._setDate(event.target.value);
        }
    }

    @action
    onDateKeydown(datepicker, event) {
        if (event.key === 'Escape') {
            this._resetScratchDate();
        }

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

        // close the dropdown and manually focus the time input if necessary
        // so that keyboard focus behaves as expected
        if (event.key === 'Tab' && datepicker.isOpen) {
            datepicker.actions.close();

            // manual focus is required because the dropdown is rendered in place
            // and the default browser behaviour will move focus to the dropdown
            // which is then removed from the DOM making it look like focus has
            // disappeared. Shift+Tab is fine because the DOM is not changing in
            // that direction
            if (!event.shiftKey && this._timeInputElem) {
                event.preventDefault();
                this._timeInputElem.focus();
                this._timeInputElem.select();
            }
        }

        // capture a Ctrl/Cmd+S combo to make sure that the model value is updated
        // before the save occurs or we abort the save if the value is invalid
        if (event.key === 's' && (event.ctrlKey || event.metaKey)) {
            let wasValid = this._setDate(event.target.value);
            if (!wasValid) {
                event.stopImmediatePropagation();
                event.preventDefault();
            }
        }
    }

    // internal methods

    _resetScratchDate() {
        this.set('_scratchDate', null);
        this._setScratchDateError(null);
    }

    _setDate(dateStr) {
        if (!dateStr.match(/^\d\d\d\d-\d\d-\d\d$/)) {
            this._setScratchDateError('Invalid date format, must be YYYY-MM-DD');
            return false;
        }

        let date = moment.tz(dateStr, DATE_FORMAT, this.blogTimezone);
        if (!date.isValid()) {
            this._setScratchDateError('Invalid date');
            return false;
        }

        this.setDateInternal(date.toDate());
        this._resetScratchDate();
        return true;
    }

    _setScratchDateError(error) {
        this.set('_scratchDateError', error);
        this.setTypedDateError(error);
    }
}