devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
205 lines (204 loc) • 7.17 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/date_box/m_date_box.strategy.calendar_with_time.js)
* Version: 26.1.4
* Build date: Fri Jul 24 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import dateLocalization from "../../../common/core/localization/date";
import $ from "../../../core/renderer";
import dateUtils from "../../../core/utils/date";
import {
extend
} from "../../../core/utils/extend";
import {
getWidth
} from "../../../core/utils/size";
import {
getWindow
} from "../../../core/utils/window";
import {
getGlobalFormatByDataType
} from "../../core/m_global_format_config";
import Box from "../../ui/box";
import TimeView from "../../ui/date_box/time_view";
import uiDateUtils from "./date_utils";
import CalendarStrategy from "./m_date_box.strategy.calendar";
const 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 CalendarStrategy {
constructor(dateBox) {
super(dateBox);
this.NAME = "CalendarWithTime"
}
getDefaultOptions() {
return Object.assign({}, super.getDefaultOptions(), {
applyValueMode: "useButtons",
buttonsLocation: "bottom after",
dropDownOptions: {
showTitle: false
}
})
}
_closeDropDownByEnter() {
return dateUtils.sameDate(this._getContouredValue(), this.widgetOption("value"))
}
getDisplayFormat(displayFormat) {
const globalDateTimeFormat = getGlobalFormatByDataType("datetime");
return displayFormat || globalDateTimeFormat || "shortdateshorttime"
}
_is24HourFormat() {
const {
displayFormat: displayFormat
} = this.dateBox.option();
return dateLocalization.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($("<div>"), TimeView, {
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;
uiDateUtils.normalizeTime(date)
}
super._updateValue();
if (this._timeView) {
if (date) {
this._timeView.option("value", date)
}
this._timeView.option("use24HourFormat", this._is24HourFormat())
}
}
_isSmallScreen() {
return 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($("<div>").appendTo($popupContent), Box, {
direction: "row",
crossAlign: "stretch",
items: this._getBoxItems(),
itemTemplate: (_ref, _, element) => {
let {
name: name
} = _ref;
const $container = $("<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());
$(element).addClass(DATEBOX_TIMEVIEW_SIDE_CLASS)
}
return $container
}
})
}
popupConfig(popupConfig) {
const calendarPopupConfig = super.popupConfig(popupConfig);
return extend(calendarPopupConfig, {
width: "auto"
})
}
_preventFocusOnPopup(e) {
if (!$(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()
}
}
export default CalendarWithTimeStrategy;