devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
208 lines (206 loc) • 7.77 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/date_box/m_date_box.strategy.calendar_with_time.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 _date = _interopRequireDefault(require("../../../common/core/localization/date"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _date2 = _interopRequireDefault(require("../../../core/utils/date"));
var _extend = require("../../../core/utils/extend");
var _size = require("../../../core/utils/size");
var _window = require("../../../core/utils/window");
var _m_global_format_config = require("../../core/m_global_format_config");
var _box = _interopRequireDefault(require("../../ui/box"));
var _time_view = _interopRequireDefault(require("../../ui/date_box/time_view"));
var _date_utils = _interopRequireDefault(require("./date_utils"));
var _m_date_boxStrategy = _interopRequireDefault(require("./m_date_box.strategy.calendar"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const window = (0, _window.getWindow)();
const SHRINK_VIEW_SCREEN_WIDTH = 573;
const DATEBOX_ADAPTIVITY_MODE_CLASS = "dx-datebox-adaptivity-mode";
const DATEBOX_TIMEVIEW_SIDE_CLASS = "dx-datebox-datetime-time-side";
class CalendarWithTimeStrategy extends _m_date_boxStrategy.default {
constructor(dateBox) {
super(dateBox);
this.NAME = "CalendarWithTime"
}
getDefaultOptions() {
return Object.assign({}, super.getDefaultOptions(), {
applyValueMode: "useButtons",
buttonsLocation: "bottom after",
dropDownOptions: {
showTitle: false
}
})
}
_closeDropDownByEnter() {
return _date2.default.sameDate(this._getContouredValue(), this.widgetOption("value"))
}
getDisplayFormat(displayFormat) {
const globalDateTimeFormat = (0, _m_global_format_config.getGlobalFormatByDataType)("datetime");
return displayFormat || globalDateTimeFormat || "shortdateshorttime"
}
_is24HourFormat() {
const {
displayFormat: displayFormat
} = this.dateBox.option();
return _date.default.is24HourFormat(this.getDisplayFormat(displayFormat))
}
_getContouredValue() {
const viewDate = super._getContouredValue();
return this._updateDateTime(viewDate)
}
_renderWidget() {
super._renderWidget();
const {
stylingMode: stylingMode
} = this.dateBox.option();
this._timeView = this.dateBox._createComponent((0, _renderer.default)("<div>"), _time_view.default, {
value: this.dateBoxValue(),
_showClock: !this._isShrinkView(),
use24HourFormat: this._is24HourFormat(),
onValueChanged: this._valueChangedHandler.bind(this),
stylingMode: stylingMode
})
}
renderOpenedState() {
super.renderOpenedState();
const popup = this._getPopup();
if (popup) {
var _popup$$wrapper;
null === (_popup$$wrapper = popup.$wrapper()) || void 0 === _popup$$wrapper || _popup$$wrapper.toggleClass("dx-datebox-adaptivity-mode", this._isSmallScreen())
}
clearTimeout(this._repaintTimer);
this._repaintTimer = setTimeout(() => {
var _this$_getPopup;
null === (_this$_getPopup = this._getPopup()) || void 0 === _this$_getPopup || _this$_getPopup.repaint()
}, 0)
}
isAdaptivityChanged() {
const isAdaptiveMode = this._isShrinkView();
const currentAdaptiveMode = this._currentAdaptiveMode;
if (isAdaptiveMode !== currentAdaptiveMode) {
this._currentAdaptiveMode = isAdaptiveMode;
return void 0 !== currentAdaptiveMode
}
return super.isAdaptivityChanged()
}
_updateValue(preventDefaultValue) {
let date = this.dateBoxValue();
if (!date && !preventDefaultValue) {
date = new Date;
_date_utils.default.normalizeTime(date)
}
super._updateValue();
if (this._timeView) {
if (date) {
this._timeView.option("value", date)
}
this._timeView.option("use24HourFormat", this._is24HourFormat())
}
}
_isSmallScreen() {
return (0, _size.getWidth)(window) <= 573
}
_isShrinkView() {
const {
showAnalogClock: showAnalogClock = true,
adaptivityEnabled: adaptivityEnabled = false
} = this.dateBox.option();
return !showAnalogClock || adaptivityEnabled && this._isSmallScreen()
}
_getBoxItems() {
const items = [{
ratio: 0,
shrink: 0,
baseSize: "auto",
name: "calendar"
}];
if (!this._isShrinkView()) {
items.push({
ratio: 0,
shrink: 0,
baseSize: "auto",
name: "time"
})
}
return items
}
renderPopupContent() {
super.renderPopupContent();
this._currentAdaptiveMode = this._isShrinkView();
const $popupContent = this._getPopupContent();
this._box = this.dateBox._createComponent((0, _renderer.default)("<div>").appendTo($popupContent), _box.default, {
direction: "row",
crossAlign: "stretch",
items: this._getBoxItems(),
itemTemplate: (_ref, _, element) => {
let {
name: name
} = _ref;
const $container = (0, _renderer.default)("<div>");
switch (name) {
case "calendar":
$container.append(this.getWidget().$element());
if (this._isShrinkView()) {
this._timeView.$element().addClass(DATEBOX_TIMEVIEW_SIDE_CLASS);
$container.append(this._timeView.$element())
}
break;
case "time":
$container.append(this._timeView.$element());
(0, _renderer.default)(element).addClass(DATEBOX_TIMEVIEW_SIDE_CLASS)
}
return $container
}
})
}
popupConfig(popupConfig) {
const calendarPopupConfig = super.popupConfig(popupConfig);
return (0, _extend.extend)(calendarPopupConfig, {
width: "auto"
})
}
_preventFocusOnPopup(e) {
if (!(0, _renderer.default)(e.target).hasClass("dx-texteditor-input")) {
super._preventFocusOnPopup(e);
if (!this.dateBox._hasFocusClass()) {
this.dateBox.focus()
}
}
}
_updateDateTime(date) {
const {
value: time
} = this._timeView.option();
date.setHours(time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds());
return date
}
getValue() {
const calendar = this.getWidget();
const {
value: value
} = calendar.option();
let date = value ?? calendar.getContouredDate();
date = date ? new Date(date) : new Date;
return this._updateDateTime(date)
}
dispose() {
clearTimeout(this._removeMinWidthTimer);
clearTimeout(this._repaintTimer);
super.dispose()
}
}
var _default = exports.default = CalendarWithTimeStrategy;