devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
239 lines (237 loc) • 8.3 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/date_box/m_date_box.strategy.calendar.js)
* Version: 26.1.3
* Build date: Wed Jun 10 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 _message = _interopRequireDefault(require("../../../common/core/localization/message"));
var _date = _interopRequireDefault(require("../../../core/utils/date"));
var _extend = require("../../../core/utils/extend");
var _type = require("../../../core/utils/type");
var _themes = require("../../../ui/themes");
var _m_global_format_config = require("../../core/m_global_format_config");
var _m_common = require("../../core/utils/m_common");
var _calendar = _interopRequireDefault(require("../../ui/calendar/calendar"));
var _m_date_box = _interopRequireDefault(require("./m_date_box.strategy"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const TODAY_BUTTON_CLASS = "dx-button-today";
class CalendarStrategy extends _m_date_box.default {
constructor(dateBox) {
super(dateBox);
this.NAME = "Calendar"
}
getWidget() {
return this._widget
}
getDefaultOptions() {
const {
todayButtonText: todayButtonText
} = this.dateBox.option();
return Object.assign({}, super.getDefaultOptions(), {
todayButtonText: todayButtonText ?? _message.default.format("dxCalendar-todayButtonText")
})
}
supportedKeys() {
const homeEndHandler = e => {
if (this.dateBox.option("opened")) {
e.preventDefault();
return true
}
return false
};
return {
rightArrow() {
if (this.option("opened")) {
return true
}
return
},
leftArrow() {
if (this.option("opened")) {
return true
}
return
},
enter: e => {
if (this.dateBox.option("opened")) {
e.preventDefault();
const {
zoomLevel: zoomLevel,
maxZoomLevel: maxZoomLevel
} = this.getWidget().option();
if (zoomLevel === maxZoomLevel) {
const viewValue = this._getContouredValue();
const lastActionElement = this._lastActionElement;
const shouldCloseDropDown = this._closeDropDownByEnter();
if (shouldCloseDropDown && viewValue && "calendar" === lastActionElement) {
this.dateBoxValue(viewValue, e)
}
if (shouldCloseDropDown) {
this.dateBox.close()
}
this.dateBox._valueChangeEventHandler(e);
return !shouldCloseDropDown
}
return true
}
this.dateBox._valueChangeEventHandler(e);
return
},
home: homeEndHandler,
end: homeEndHandler
}
}
getDisplayFormat(displayFormat) {
const globalDateFormat = (0, _m_global_format_config.getGlobalFormatByDataType)("date");
return displayFormat || globalDateFormat || "shortdate"
}
_closeDropDownByEnter() {
return true
}
_getWidgetName() {
return _calendar.default
}
_getContouredValue() {
const {
contouredDate: contouredDate
} = this.getWidget()._view.option();
return contouredDate
}
getKeyboardListener() {
return this.getWidget()
}
_getWidgetOptions() {
const {
disabledDates: disabledDates,
min: min,
max: max,
todayButtonText: todayButtonText,
calendarOptions: calendarOptions = {}
} = this.dateBox.option();
return (0, _extend.extend)(calendarOptions, {
value: this.dateBoxValue() ?? null,
selectionMode: "single",
dateSerializationFormat: null,
min: min,
max: max,
onValueChanged: this._valueChangedHandler.bind(this),
onCellClick: this._cellClickHandler.bind(this),
disabledDates: (0, _type.isFunction)(disabledDates) ? this._injectComponent(disabledDates.bind(this.dateBox)) : disabledDates,
onContouredChanged: this._refreshActiveDescendant.bind(this),
skipFocusCheck: true,
todayButtonText: todayButtonText
})
}
_injectComponent(func) {
return params => func(Object.assign({}, params, {
component: this.dateBox
}))
}
_refreshActiveDescendant(e) {
this._lastActionElement = "calendar";
this.dateBox.setAria("activedescendant", e.actionValue)
}
_getTodayButtonConfig() {
const {
buttonsLocation: buttonsLocation
} = this.dateBox.option();
const isButtonsLocationDefault = "default" === buttonsLocation;
const position = isButtonsLocationDefault ? ["bottom", "center"] : (0, _m_common.splitPair)(buttonsLocation);
const stylingMode = (0, _themes.isMaterial)((0, _themes.current)()) ? "text" : "outlined";
return {
widget: "dxButton",
toolbar: position[0],
location: "after" === position[1] ? "before" : position[1],
options: {
onClick: args => {
this.getWidget()._toTodayView(args)
},
text: this.dateBox.option("todayButtonText"),
elementAttr: {
class: "dx-button-today"
},
stylingMode: stylingMode
}
}
}
_isCalendarVisible() {
const {
calendarOptions: calendarOptions = {}
} = this.dateBox.option();
return (0, _type.isEmptyObject)(calendarOptions) || false !== calendarOptions.visible
}
_getPopupToolbarItems(toolbarItems) {
const {
applyValueMode: applyValueMode
} = this.dateBox.option();
const useButtons = "useButtons" === applyValueMode;
const shouldRenderTodayButton = useButtons && this._isCalendarVisible();
if (shouldRenderTodayButton) {
const todayButton = this._getTodayButtonConfig();
return [todayButton, ...toolbarItems]
}
return toolbarItems
}
popupConfig(popupConfig) {
return (0, _extend.extend)(true, popupConfig, {
position: {
collision: "flipfit flip"
},
width: "auto"
})
}
_valueChangedHandler(e) {
const {
value: value
} = e;
const prevValue = e.previousValue;
if (_date.default.sameDate(value, prevValue) && _date.default.sameHoursAndMinutes(value, prevValue)) {
return
}
const {
applyValueMode: applyValueMode
} = this.dateBox.option();
if ("instantly" === applyValueMode) {
this.dateBoxValue(this.getValue(), e.event)
}
}
_updateValue() {
if (!this._widget) {
return
}
const value = this.dateBoxValue();
this._widget.option({
value: value
})
}
textChangedHandler() {
this._lastActionElement = "input";
if (this.dateBox.option("opened") && this._widget) {
this._updateValue()
}
}
_cellClickHandler(e) {
const {
dateBox: dateBox
} = this;
const {
applyValueMode: applyValueMode
} = dateBox.option();
if ("instantly" === applyValueMode) {
dateBox.option("opened", false);
this.dateBoxValue(this.getValue(), e.event)
}
}
}
var _default = exports.default = CalendarStrategy;