diff --git a/api/js/etemplate/et2_widget_date.js b/api/js/etemplate/et2_widget_date.js
index 7eda1e0c5a..f60caf6528 100644
--- a/api/js/etemplate/et2_widget_date.js
+++ b/api/js/etemplate/et2_widget_date.js
@@ -588,6 +588,7 @@ var et2_date_duration = /** @class */ (function (_super) {
// Call the inherited constructor
_super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_date_duration._attributes, _child || {})) || this;
_this.legacyOptions = ["data_format", "display_format", "hours_per_day", "empty_not_0", "short_labels"];
+ _this.format = null;
// Legacy option put percent in with display format
if (_this.options.display_format.indexOf("%") != -1) {
_this.options.percent_allowed = true;
@@ -696,24 +697,35 @@ var et2_date_duration = /** @class */ (function (_super) {
et2_date_duration.prototype.set_display_format = function (format) {
if (format.length <= 1) {
this.node.remove('select.et2_date_duration');
+ this.format = null;
}
this.options.display_format = format;
- if (this.format) {
- this.format.remove();
+ if ((this.format == null || this.format.is('select')) && (this.options.display_format.length <= 1 || this.options.readonly)) {
+ if (this.format) {
+ this.format.remove();
+ }
+ this.format = jQuery(document.createElement('span')).appendTo(this.node);
}
if (this.options.display_format.length > 1 && !this.options.readonly) {
- this.format = jQuery(document.createElement("select"))
- .addClass('et2_date_duration');
- this.node.append(this.format);
+ if (this.format && !this.format.is('select')) {
+ this.format.remove();
+ this.format = null;
+ }
+ if (!this.format) {
+ this.format = jQuery(document.createElement("select"))
+ .addClass('et2_date_duration');
+ this.node.append(this.format);
+ }
+ this.format.empty();
for (var i = 0; i < this.options.display_format.length; i++) {
this.format.append("");
}
}
else if (this.time_formats[this.options.display_format]) {
- this.format = jQuery("" + this.time_formats[this.options.display_format] + "").appendTo(this.node);
+ this.format.text(this.time_formats[this.options.display_format]);
}
else {
- this.format = jQuery("" + this.time_formats["m"] + "").appendTo(this.node);
+ this.format.text(this.time_formats["m"]);
}
};
/**
diff --git a/api/js/etemplate/et2_widget_date.ts b/api/js/etemplate/et2_widget_date.ts
index 36d15f0c20..85d93ae0bc 100644
--- a/api/js/etemplate/et2_widget_date.ts
+++ b/api/js/etemplate/et2_widget_date.ts
@@ -18,11 +18,11 @@
*/
import './et2_core_common';
-import { ClassWithAttributes } from "./et2_core_inheritance";
-import { et2_widget, et2_createWidget, et2_register_widget, WidgetConfig } from "./et2_core_widget";
-import { et2_valueWidget } from './et2_core_valueWidget'
-import { et2_inputWidget } from './et2_core_inputWidget'
-import { et2_selectbox } from './et2_widget_selectbox'
+import {ClassWithAttributes} from "./et2_core_inheritance";
+import {et2_createWidget, et2_register_widget, et2_widget, WidgetConfig} from "./et2_core_widget";
+import {et2_valueWidget} from './et2_core_valueWidget'
+import {et2_inputWidget} from './et2_core_inputWidget'
+import {et2_selectbox} from './et2_widget_selectbox'
import './et2_types';
import {et2_DOMWidget} from "./et2_core_DOMWidget";
@@ -710,7 +710,7 @@ export class et2_date_duration extends et2_date
// @ts-ignore baseWidget defines node as HTMLElement
node: JQuery;
duration: JQuery;
- format: JQuery;
+ format: JQuery = null;
/**
* Constructor
@@ -862,29 +862,42 @@ export class et2_date_duration extends et2_date
if (format.length <= 1)
{
this.node.remove('select.et2_date_duration');
+ this.format = null;
}
this.options.display_format = format;
- if(this.format)
+ if((this.format == null || this.format.is('select')) && (this.options.display_format.length <= 1 || this.options.readonly))
{
- this.format.remove();
+ if (this.format)
+ {
+ this.format.remove();
+ }
+ this.format = jQuery(document.createElement('span')).appendTo(this.node);
}
if(this.options.display_format.length > 1 && !this.options.readonly)
{
- this.format = jQuery(document.createElement("select"))
+ if(this.format && !this.format.is('select')) {
+ this.format.remove();
+ this.format = null;
+ }
+ if(!this.format)
+ {
+ this.format = jQuery(document.createElement("select"))
.addClass('et2_date_duration');
- this.node.append(this.format);
+ this.node.append(this.format);
+ }
+ this.format.empty();
for(var i = 0; i < this.options.display_format.length; i++) {
this.format.append("");
}
}
else if (this.time_formats[this.options.display_format])
{
- this.format = jQuery(""+this.time_formats[this.options.display_format]+"").appendTo(this.node);
+ this.format.text(this.time_formats[this.options.display_format]);
}
else
{
- this.format = jQuery(""+this.time_formats["m"]+"").appendTo(this.node);
+ this.format.text(this.time_formats["m"]);
}
}