devextreme/cjs/__internal/ui/date_box/date_view.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/ui/date_box/date_view.js)
 * Version: 25.2.7
 * Build date: Tue May 05 2026
 *
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = void 0;
var _date = _interopRequireDefault(require("../../../common/core/localization/date"));
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _date2 = _interopRequireDefault(require("../../../core/utils/date"));
var _editor = _interopRequireDefault(require("../../ui/editor/editor"));
var _date_utils = _interopRequireDefault(require("./date_utils"));
var _date_view_roller = _interopRequireDefault(require("./date_view_roller"));

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}
const DATEVIEW_CLASS = "dx-dateview";
const DATEVIEW_COMPACT_CLASS = "dx-dateview-compact";
const DATEVIEW_WRAPPER_CLASS = "dx-dateview-wrapper";
const DATEVIEW_ROLLER_CONTAINER_CLASS = "dx-dateview-rollers";
const DATEVIEW_ROLLER_CLASS = "dx-dateviewroller";
const TYPE = {
    date: "date",
    datetime: "datetime",
    time: "time"
};
const ROLLER_TYPE = {
    year: "year",
    month: "month",
    day: "day",
    hours: "hours"
};
class DateView extends _editor.default {
    _valueOption() {
        const {
            value: value
        } = this.option();
        const date = new Date(value);
        return !value || isNaN(date.getTime()) ? this._getDefaultDate() : date
    }
    _getDefaultDate() {
        const date = new Date;
        const {
            type: type
        } = this.option();
        if (type === TYPE.date) {
            return new Date(date.getFullYear(), date.getMonth(), date.getDate())
        }
        return date
    }
    _getDefaultOptions() {
        return Object.assign({}, super._getDefaultOptions(), {
            minDate: _date_utils.default.MIN_DATEVIEW_DEFAULT_DATE,
            maxDate: _date_utils.default.MAX_DATEVIEW_DEFAULT_DATE,
            type: TYPE.date,
            value: new Date,
            applyCompactClass: false
        })
    }
    _defaultOptionsRules() {
        return super._defaultOptionsRules().concat([{
            device: device => "desktop" !== device.deviceType,
            options: {
                applyCompactClass: true
            }
        }])
    }
    _render() {
        super._render();
        this.$element().addClass("dx-dateview");
        const {
            type: type
        } = this.option();
        this._toggleFormatClasses(type);
        this._toggleCompactClass()
    }
    _toggleFormatClasses(currentFormat, previousFormat) {
        this.$element().addClass(`dx-dateview-${currentFormat}`);
        if (previousFormat) {
            this.$element().removeClass(`dx-dateview-${previousFormat}`)
        }
    }
    _toggleCompactClass() {
        const {
            applyCompactClass: applyCompactClass
        } = this.option();
        this.$element().toggleClass("dx-dateview-compact", applyCompactClass)
    }
    _wrapper() {
        return this._$wrapper
    }
    _renderContentImpl() {
        this._$wrapper = (0, _renderer.default)("<div>").addClass("dx-dateview-wrapper");
        this._renderRollers();
        this._$wrapper.appendTo(this.$element())
    }
    _renderRollers() {
        this._$rollersContainer ?? (this._$rollersContainer = (0, _renderer.default)("<div>").addClass("dx-dateview-rollers"));
        this._$rollersContainer.empty();
        this._createRollerConfigs();
        this._rollers = {};
        Object.keys(this._rollerConfigs).forEach(name => {
            const rollerType = this._rollerConfigs[name].type;
            const $roller = (0, _renderer.default)("<div>").appendTo(this._$rollersContainer).addClass(`dx-dateviewroller-${rollerType}`);
            this._rollers[rollerType] = this._createComponent($roller, _date_view_roller.default, {
                items: this._rollerConfigs[name].displayItems,
                selectedIndex: this._rollerConfigs[name].selectedIndex,
                showScrollbar: "never",
                scrollByContent: true,
                onStart: e => {
                    const {
                        component: component
                    } = e;
                    const rollerConfig = this._rollerConfigs[name];
                    component._toggleActive(true);
                    this._setActiveRoller(rollerConfig)
                },
                onEnd: e => {
                    e.component._toggleActive(false)
                },
                onClick: e => {
                    const {
                        component: component
                    } = e;
                    const {
                        selectedIndex: selectedIndex = 0
                    } = component.option();
                    const rollerConfig = this._rollerConfigs[name];
                    component._toggleActive(true);
                    this._setActiveRoller(rollerConfig);
                    this._setRollerState(rollerConfig, selectedIndex);
                    component._toggleActive(false)
                },
                onSelectedIndexChanged: e => {
                    const {
                        component: component
                    } = e;
                    const {
                        selectedIndex: selectedIndex = 0
                    } = component.option();
                    const rollerConfig = this._rollerConfigs[name];
                    this._setRollerState(rollerConfig, selectedIndex)
                }
            })
        });
        const $wrapper = this._wrapper();
        if ($wrapper) {
            this._$rollersContainer.appendTo($wrapper)
        }
    }
    _createRollerConfigs(type) {
        const {
            type: defaultType
        } = this.option();
        const selectedType = type ?? defaultType;
        this._rollerConfigs = {};
        _date.default.getFormatParts(_date_utils.default.FORMATS_MAP[selectedType]).forEach(partName => {
            this._createRollerConfig(partName)
        })
    }
    _createRollerConfig(componentName) {
        const componentInfo = _date_utils.default.DATE_COMPONENTS_INFO[componentName];
        const valueRange = this._calculateRollerConfigValueRange(componentName);
        const {
            startValue: startValue
        } = valueRange;
        const {
            endValue: endValue
        } = valueRange;
        const {
            formatter: formatter
        } = componentInfo;
        const curDate = this._getCurrentDate();
        const config = {
            type: componentName,
            setValue: componentInfo.setter,
            valueItems: [],
            displayItems: [],
            getIndex: value => value[componentInfo.getter]() - startValue
        };
        for (let i = startValue; i <= endValue; i += 1) {
            config.valueItems.push(i);
            config.displayItems.push(formatter(i, curDate))
        }
        config.selectedIndex = config.getIndex(curDate);
        this._rollerConfigs[componentName] = config
    }
    _setActiveRoller(currentRoller) {
        const activeRoller = currentRoller && this._rollers[currentRoller.type];
        Object.values(this._rollers).forEach(roller => {
            roller.toggleActiveState(roller === activeRoller)
        })
    }
    _updateRollersPosition() {
        const currentDate = this._getCurrentDate();
        Object.keys(this._rollers).forEach(type => {
            const correctIndex = this._rollerConfigs[type].getIndex(currentDate);
            this._rollers[type].option("selectedIndex", correctIndex)
        })
    }
    _setRollerState(roller, selectedIndex) {
        if (selectedIndex !== roller.selectedIndex) {
            const rollerValue = roller.valueItems[selectedIndex];
            const {
                setValue: setValue
            } = roller;
            let currentValue = new Date(this._getCurrentDate());
            let currentDate = currentValue.getDate();
            const {
                minDate: minDate,
                maxDate: maxDate
            } = this.option();
            if (roller.type === ROLLER_TYPE.month) {
                currentDate = Math.min(currentDate, _date_utils.default.getMaxMonthDay(currentValue.getFullYear(), rollerValue))
            } else if (roller.type === ROLLER_TYPE.year) {
                currentDate = Math.min(currentDate, _date_utils.default.getMaxMonthDay(rollerValue, currentValue.getMonth()))
            }
            currentValue.setDate(currentDate);
            currentValue[setValue](rollerValue);
            const normalizedDate = _date2.default.normalizeDate(currentValue, minDate, maxDate);
            currentValue = _date_utils.default.mergeDates(normalizedDate, currentValue, "time");
            currentValue = _date2.default.normalizeDate(currentValue, minDate, maxDate);
            this.option("value", currentValue);
            roller.selectedIndex = selectedIndex
        }
        if (roller.type === ROLLER_TYPE.year) {
            this._refreshRollers()
        }
        if (roller.type === ROLLER_TYPE.month) {
            this._refreshRoller(ROLLER_TYPE.day);
            this._refreshRoller(ROLLER_TYPE.hours)
        }
    }
    _refreshRoller(rollerType) {
        const roller = this._rollers[rollerType];
        if (roller) {
            const {
                items: items = []
            } = roller.option();
            this._createRollerConfig(rollerType);
            const rollerConfig = this._rollerConfigs[rollerType];
            if (rollerType === ROLLER_TYPE.day || rollerConfig.displayItems.toString() !== items.toString()) {
                roller.option({
                    items: rollerConfig.displayItems,
                    selectedIndex: rollerConfig.selectedIndex
                })
            }
        }
    }
    _getCurrentDate() {
        const curDate = this._valueOption();
        const {
            minDate: minDate,
            maxDate: maxDate
        } = this.option();
        return _date2.default.normalizeDate(curDate, minDate, maxDate)
    }
    _calculateRollerConfigValueRange(componentName) {
        const curDate = this._getCurrentDate();
        const {
            minDate: minDate,
            maxDate: maxDate
        } = this.option();
        const minYear = _date2.default.sameYear(curDate, minDate);
        const minMonth = minYear && curDate.getMonth() === minDate.getMonth();
        const maxYear = _date2.default.sameYear(curDate, maxDate);
        const maxMonth = maxYear && curDate.getMonth() === maxDate.getMonth();
        const minHour = minMonth && curDate.getDate() === minDate.getDate();
        const maxHour = maxMonth && curDate.getDate() === maxDate.getDate();
        const componentInfo = _date_utils.default.DATE_COMPONENTS_INFO[componentName];
        let {
            startValue: startValue
        } = componentInfo;
        let {
            endValue: endValue
        } = componentInfo;
        if (componentName === ROLLER_TYPE.year) {
            startValue = minDate.getFullYear();
            endValue = maxDate.getFullYear()
        }
        if (componentName === ROLLER_TYPE.month) {
            if (minYear) {
                startValue = minDate.getMonth()
            }
            if (maxYear) {
                endValue = maxDate.getMonth()
            }
        }
        if (componentName === ROLLER_TYPE.day) {
            endValue = _date_utils.default.getMaxMonthDay(curDate.getFullYear(), curDate.getMonth());
            if (minYear && minMonth) {
                startValue = minDate.getDate()
            }
            if (maxYear && maxMonth) {
                endValue = maxDate.getDate()
            }
        }
        if (componentName === ROLLER_TYPE.hours) {
            startValue = minHour ? minDate.getHours() : startValue;
            endValue = maxHour ? maxDate.getHours() : endValue
        }
        return {
            startValue: startValue,
            endValue: endValue
        }
    }
    _refreshRollers() {
        this._refreshRoller(ROLLER_TYPE.month);
        this._refreshRoller(ROLLER_TYPE.day);
        this._refreshRoller(ROLLER_TYPE.hours)
    }
    _optionChanged(args) {
        switch (args.name) {
            case "minDate":
            case "maxDate":
            case "type":
                this._renderRollers();
                if (args.value) {
                    this._toggleFormatClasses(args.value, args.previousValue)
                }
                break;
            case "visible":
                super._optionChanged(args);
                if (args.value) {
                    this._renderRollers()
                }
                break;
            case "value":
                this.option("value", this._valueOption());
                this._refreshRollers();
                this._updateRollersPosition();
                break;
            default:
                super._optionChanged(args)
        }
    }
    _clean() {
        super._clean();
        delete this._$rollersContainer
    }
}(0, _component_registrator.default)("dxDateView", DateView);
var _default = exports.default = DateView;