diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue
index 9bae258b01..c6d870144a 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue
@@ -23,13 +23,9 @@
           <f7-list-input v-if="supports('refresh')" label="Refresh interval" type="number" :value="widget.config.refresh" @input="updateParameter('refresh', $event)" clear-button />
           <f7-list-input v-if="supports('encoding')" label="Encoding" type="text" :value="widget.config.encoding" @input="updateParameter('encoding', $event)" clear-button />
           <f7-list-input v-if="supports('service')" label="Service" type="text" :value="widget.config.service" @input="updateParameter('service', $event)" clear-button />
-          <f7-list-item v-if="supports('period')" title="Period" smart-select :smart-select-params="{openIn: 'popover', closeOnSelect: true}">
-            <select name="periods" required :value="widget.config.period" @change="updateParameter('period', $event)">
-              <option v-for="def in periodDefs" :key="def.key" :value="def.key">
-                {{ def.value }}
-              </option>
-            </select>
-          </f7-list-item>
+          <f7-list-input v-if="supports('period')" label="Period" type="text"
+                         placeholder="PnYnMnDTnHnMnS" validate pattern="^P(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?$|^\d*[YMWDh]$"
+                         :value="widget.config.period" @input="updateParameter('period', $event)" clear-button />
           <f7-list-input v-if="supports('height')" label="Height" type="number" :value="widget.config.height" @input="updateParameter('height', $event)" clear-button />
           <f7-list-input v-if="supports('sendFrequency')" label="Frequency" type="number" :value="widget.config.sendFrequency" @input="updateParameter('sendFrequency', $event)" clear-button />
           <f7-list-input v-if="supports('minValue')" label="Minimum" type="number" :value="widget.config.minValue" @input="updateParameter('minValue', $event)" clear-button />
@@ -97,21 +93,6 @@ export default {
         Input: ['inputHint'],
         Default: ['height']
       },
-      periodDefs: [
-        { key: 'h', value: 'Hour' },
-        { key: '4h', value: '4 Hours' },
-        { key: '8h', value: '8 Hours' },
-        { key: '12h', value: '12 Hours' },
-        { key: 'D', value: 'Day' },
-        { key: '2D', value: '2 Days' },
-        { key: '3D', value: '3 Days' },
-        { key: 'W', value: 'Week' },
-        { key: '2W', value: '2 Weeks' },
-        { key: 'M', value: 'Month' },
-        { key: '2M', value: '2 Months' },
-        { key: '4M', value: '4 Months' },
-        { key: 'Y', value: 'Year' }
-      ],
       inputHintDefs: [
         { key: 'text', value: 'Text' },
         { key: 'number', value: 'Number' },
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js
index 9fcf0eee99..543ac6fcd9 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js
@@ -187,10 +187,10 @@ describe('SitemapEdit', () => {
     lastDialogConfig = null
     wrapper.vm.selectWidget([wrapper.vm.sitemap.slots.widgets[0], wrapper.vm.sitemap])
     await wrapper.vm.$nextTick()
-    localVue.set(wrapper.vm.selectedWidget.config, 'period', '5h')
+    localVue.set(wrapper.vm.selectedWidget.config, 'period', '5d')
     wrapper.vm.validateWidgets()
     expect(lastDialogConfig).toBeTruthy()
-    expect(lastDialogConfig.content).toMatch(/Chart widget Chart Test, invalid period configured: 5h/)
+    expect(lastDialogConfig.content).toMatch(/Chart widget Chart Test, invalid period configured: 5d/)
 
     // configure a period for the Chart and check that there are no validation errors anymore
     lastDialogConfig = null
@@ -199,6 +199,14 @@ describe('SitemapEdit', () => {
     localVue.set(wrapper.vm.selectedWidget.config, 'period', '4h')
     wrapper.vm.validateWidgets()
     expect(lastDialogConfig).toBeFalsy()
+
+    // configure an ISO-8601 period for the Chart and check that there are no validation errors
+    lastDialogConfig = null
+    wrapper.vm.selectWidget([wrapper.vm.sitemap.slots.widgets[0], wrapper.vm.sitemap])
+    await wrapper.vm.$nextTick()
+    localVue.set(wrapper.vm.selectedWidget.config, 'period', 'P10M2W1DT12H30M')
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeFalsy()
   })
 
   it('validates step is positive', async () => {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
index bd691eda49..4c22765e80 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
@@ -427,7 +427,7 @@ export default {
           }
         })
         widgetList.filter(widget => widget.component === 'Chart').forEach(widget => {
-          if (!(widget.config && widget.config.period && ['h', '4h', '8h', '12h', 'D', '2D', '3D', 'W', '2W', 'M', '2M', '4M', 'Y'].includes(widget.config.period))) {
+          if (!(widget.config && widget.config.period && /^P(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?$|^\d*[YMWDh]$/.test(widget.config.period))) {
             let label = widget.config && widget.config.label ? widget.config.label : 'without label'
             validationWarnings.push(widget.component + ' widget ' + label + ', invalid period configured: ' + widget.config.period)
           }