From f74c992bbd5f694dd8497902b12cfb3cae6e8966 Mon Sep 17 00:00:00 2001
From: Antoniafriedrich <antonia.friedrich@uni-jena.de>
Date: Mon, 13 Nov 2023 14:35:13 +0100
Subject: [PATCH] MIR-1256 Support time in mods:dateIssued

Implements a Timepicker
---
 mir-module/GruntFile.js                       |   5 +-
 .../editor/editor-derivate-includes.xed       |   2 +
 .../resources/editor/editor-includes.xed      |   5 +-
 .../bootstrap-datepicker-timepicker.de.js     |   8 +
 .../bootstrap-datepicker-timepicker.js        | 305 ++++++++++++++++++
 .../META-INF/resources/js/mir/xeditor-form.js |  97 ++++--
 .../config/mir/messages_de.properties         |   3 +-
 .../config/mir/messages_en.properties         |   3 +-
 .../main/resources/xsl/editor/mir2xeditor.xsl |   5 +
 .../resources/xsl/editor/xeditor2mods.xsl     |  12 +
 .../resources/xsl/metadata/mir-abstract.xsl   |   3 +-
 11 files changed, 420 insertions(+), 28 deletions(-)
 create mode 100644 mir-module/src/main/resources/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.de.js
 create mode 100644 mir-module/src/main/resources/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.js

diff --git a/mir-module/GruntFile.js b/mir-module/GruntFile.js
index 061f8be738..9d580f29d9 100644
--- a/mir-module/GruntFile.js
+++ b/mir-module/GruntFile.js
@@ -74,10 +74,11 @@ module.exports = function(grunt) {
           '<%= globalConfig.moduleDirectory %>/target/classes/META-INF/resources/js/mir/geo-coords.min.js': '<%= globalConfig.moduleDirectory %>/src/main/resources/META-INF/resources/js/mir/geo-coords.js',
           '<%= globalConfig.moduleDirectory %>/target/classes/META-INF/resources/js/mir/select-doctype.min.js': '<%= globalConfig.moduleDirectory %>/src/main/resources/META-INF/resources/js/mir/select-doctype.js',
           '<%= globalConfig.moduleDirectory %>/target/classes/META-INF/resources/js/mir/citation.min.js': '<%= globalConfig.moduleDirectory %>/src/main/resources/META-INF/resources/js/mir/citation.js',
-
           '<%= globalConfig.moduleDirectory %>/target/classes/META-INF/resources/js/jquery.search-entity.min.js': '<%= globalConfig.moduleDirectory %>/src/main/resources/META-INF/resources/js/jquery.search-entity.js',
           '<%= globalConfig.moduleDirectory %>/target/classes/META-INF/resources/js/epusta.min.js': '<%= globalConfig.moduleDirectory %>/src/main/resources/META-INF/resources/js/epusta.js',
-          '<%= globalConfig.moduleDirectory %>/target/classes/META-INF/assets/ckeditor4/config.min.js': '<%= globalConfig.moduleDirectory %>/src/main/resources/META-INF/resources/js/ckeditor-config.js'
+          '<%= globalConfig.moduleDirectory %>/target/classes/META-INF/assets/ckeditor4/config.min.js': '<%= globalConfig.moduleDirectory %>/src/main/resources/META-INF/resources/js/ckeditor-config.js',
+          '<%= globalConfig.moduleDirectory %>/target/classes/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.js': '<%= globalConfig.moduleDirectory %>/src/main/resources/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.js',
+          '<%= globalConfig.moduleDirectory %>/target/classes/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.de.js': '<%= globalConfig.moduleDirectory %>/src/main/resources/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.de.js',
         }
       }
     },
diff --git a/mir-module/src/main/resources/META-INF/resources/editor/editor-derivate-includes.xed b/mir-module/src/main/resources/META-INF/resources/editor/editor-derivate-includes.xed
index 15dde68bf9..14f246b5bc 100644
--- a/mir-module/src/main/resources/META-INF/resources/editor/editor-derivate-includes.xed
+++ b/mir-module/src/main/resources/META-INF/resources/editor/editor-derivate-includes.xed
@@ -144,6 +144,8 @@
     <script type="text/javascript" src="{$WebApplicationBaseURL}assets/bootstrap-datepicker/locales/bootstrap-datepicker.de.min.js"></script>
     <script type="text/javascript" src="{$WebApplicationBaseURL}assets/moment/min/moment.min.js"></script>
     <script type="text/javascript" src="{$WebApplicationBaseURL}js/mir/xeditor-form.min.js"></script>
+    <script type="text/javascript" src="{$WebApplicationBaseURL}js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.js"></script>
+    <script type="text/javascript" src="{$WebApplicationBaseURL}js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.de.js"></script>
     <link rel="stylesheet" type="text/css" href="{$WebApplicationBaseURL}assets/select2/css/select2.min.css" />
     <script type="text/javascript" src="{$WebApplicationBaseURL}assets/select2/js/select2.min.js" />
     <script type="text/javascript" src="{$WebApplicationBaseURL}assets/select2/js/i18n/{$MCR.Metadata.DefaultLang}.js" />
diff --git a/mir-module/src/main/resources/META-INF/resources/editor/editor-includes.xed b/mir-module/src/main/resources/META-INF/resources/editor/editor-includes.xed
index da86176023..b9006c62e6 100644
--- a/mir-module/src/main/resources/META-INF/resources/editor/editor-includes.xed
+++ b/mir-module/src/main/resources/META-INF/resources/editor/editor-includes.xed
@@ -2293,8 +2293,7 @@
     <xed:validate xpath="//mods:mods/mods:identifier[@type='urn']" matches="urn:nbn:[a-z]{2}:\S*" i18n="mir.validation.urn" display="global" />
     <xed:validate xpath="//mods:mods/mods:identifier[@type='ppn']" class="org.mycore.mir.validation.MIRValidationHelper" method="validatePPN" display="global" i18n="mir.validation.ppn" />
     <xed:validate xpath="//mods:url|//mods:abstract/@xlink:href" matches="(ftp|http|https)://[\w\d.]+\S*" i18n="mir.validation.url" display="global" />
-    <xed:validate xpath="//mods:*[@encoding='w3cdtf'][not(ancestor::mods:recordInfo)]|//mods:mods/mods:accessCondition[@type='embargo']" matches="\d{4}(\-\d{2}(\-\d{2})?)?" type="datetime" format="yyyy;yyyy-MM;yyyy-MM-dd" i18n="mir.validation.date"
-      display="global" />
+    <xed:validate xpath="//mods:*[@encoding='w3cdtf'][not(ancestor::mods:recordInfo)]|//mods:mods/mods:accessCondition[@type='embargo']" matches="\d{4}(\-\d{2}(\-\d{2})(T\d{2}:\d{2}:\d{2}\+\d{2}:\d{2})?)?" type="datetime" format="yyyy;yyyy-MM;yyyy-MM-dd;yyyy-MM-dd'T'HH:mm:ssZ" i18n="mir.validation.date" display="global" />
     <xed:validate xpath="//mods:*[@encoding='iso8601']" matches="\d{4}(\-\d{2}(\-\d{2})?)?(\/\d{4}(\-\d{2}(\-\d{2})?)?)?" display="global"  i18n="mir.validation.date.iso8601"/>
     <xed:validate xpath="//mods:part/@order" type="integer" display="global" i18n="mir.validation.order" />
   </xed:template>
@@ -2339,6 +2338,8 @@
             src="{$WebApplicationBaseURL}assets/bootstrap-datepicker/locales/bootstrap-datepicker.de.min.js"></script>
     <script type="text/javascript" src="{$WebApplicationBaseURL}assets/moment/min/moment.min.js"></script>
     <script type="text/javascript" src="{$WebApplicationBaseURL}js/mir/xeditor-form.min.js"></script>
+    <script type="text/javascript" src="{$WebApplicationBaseURL}js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.js"></script>
+    <script type="text/javascript" src="{$WebApplicationBaseURL}js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.de.js"></script>
     <script type="text/javascript" src="{$WebApplicationBaseURL}assets/ckeditor4/ckeditor.js"></script>
     <link rel="stylesheet" type="text/css" href="{$WebApplicationBaseURL}assets/select2/css/select2.min.css"/>
     <script type="text/javascript" src="{$WebApplicationBaseURL}assets/select2/js/select2.min.js"/>
diff --git a/mir-module/src/main/resources/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.de.js b/mir-module/src/main/resources/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.de.js
new file mode 100644
index 0000000000..8049baca7b
--- /dev/null
+++ b/mir-module/src/main/resources/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.de.js
@@ -0,0 +1,8 @@
+document.addEventListener("DOMContentLoaded", function () {
+    if ( typeof $.fn.timepicker !== 'undefined') {
+        $.fn.timepicker.localisation.de = {
+            timeTxt: "Zeit einstellen",
+            calenderTxt: "Kalender"
+        }
+    };
+});
\ No newline at end of file
diff --git a/mir-module/src/main/resources/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.js b/mir-module/src/main/resources/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.js
new file mode 100644
index 0000000000..9bae9fe7ad
--- /dev/null
+++ b/mir-module/src/main/resources/META-INF/resources/js/mir/bootstrap-datepicker-timepicker/bootstrap-datepicker-timepicker.js
@@ -0,0 +1,305 @@
+document.addEventListener("DOMContentLoaded", function () {
+    (function (factory) {
+        const dependencies = {
+            jQuery: typeof jQuery !== 'undefined' ? jQuery : null,
+            moment: typeof moment !== 'undefined' ? moment : null,
+            bootstrap: typeof bootstrap !== 'undefined' ? bootstrap : null,
+            bootstrapDatepicker: typeof $.fn.datepicker !== 'undefined' ? $.fn.datepicker : null
+
+        };
+        const missingDependencies = Object.keys(dependencies)
+            .filter((key) => dependencies[key] === null)
+            .map((key) => key);
+
+        if (missingDependencies.length > 0) {
+            console.error(
+                "The plugin cannot load because the following dependencies are missing:\n" +
+                missingDependencies.join("\n")
+            );
+            return;
+        }
+        if (typeof define === 'function' && define.amd) {
+            define(['jquery'], factory);
+        } else if (typeof exports === 'object') {
+            factory(require('jquery'));
+        } else {
+            factory(jQuery);
+        }
+
+    }(function ($) {
+            $.fn.timepicker = function (options) {
+                return this.each(function () {
+                    const timepicker = new TimePicker(this, options);
+                    $(this).data('timepicker', timepicker);
+                });
+            };
+            $.fn.timepicker.localisation = {
+                en: {
+                    timeTxt: "Select Time",
+                    calenderTxt: "Calender"
+                }
+            }
+
+            function TimePicker(element, options) {
+                this.$element = $(element);
+                TimePicker.DEFAULTS.language = this.$element.datepicker().data().datepicker.o.language;
+                TimePicker.DEFAULTS.bootstrapDatepicker = this.$element.datepicker();
+                TimePicker.dateTimeDate = this.$element.datepicker().data().datepicker.viewDate;
+                this.options = $.extend({}, TimePicker.DEFAULTS, options);
+                this.date = $.extend({}, TimePicker.date);
+                this.init();
+            }
+
+            TimePicker.DEFAULTS = {
+                pattern: 'YYYY-MM-DDTHH:mm:ss'
+            };
+
+            TimePicker.prototype.init = function () {
+                this.options.timeformat = setTimeFormat(this.options.pattern);
+                this.modifyDatepicker();
+                this.createTimePickerUI();
+                this.bindEvents();
+            };
+            TimePicker.prototype.createTimePickerUI = function () {
+                let $timepickerContainer = $('<span class="timepicker-clock" style="display: contents">');
+                let $incrementRow = $('<tr>');
+                $('<td><button class="btn btn-sm btn-timepicker" data-action="incrementHours">' +
+                    '<i class="fas fa-arrow-up"></i></button></td>').appendTo($incrementRow);
+                $('<td class="separator"></td>').appendTo($incrementRow);
+                $('<td><button class="btn btn-sm btn-timepicker" data-action="incrementMinutes">' +
+                    '<i class="fas fa-arrow-up"></i></button></td>').appendTo($incrementRow);
+                $('<td class="separator"></td>').appendTo($incrementRow);
+                $('<td><button class="btn btn-sm btn-timepicker" data-action="incrementSeconds">' +
+                    '<i class="fas fa-arrow-up"></i></button></td>').appendTo($incrementRow);
+
+                let $timeRow = $('<tr>');
+                $('<td class="timepickertext timepicker-hour" data-action="showHours">00</td>').appendTo($timeRow);
+                $('<td class="separator timepickertext">:</td>').appendTo($timeRow);
+                $('<td class="timepickertext timepicker-minute" data-action="showMinutes">00</td>').appendTo($timeRow);
+                $('<td class="separator timepickertext">:</td>').appendTo($timeRow);
+                $('<td class="timepickertext timepicker-second" data-action="showSeconds">00</td>').appendTo($timeRow);
+
+                let $decrementRow = $('<tr>');
+                $('<td><button class="btn btn-sm btn-timepicker" data-action="decrementHours">' +
+                    '<i class="fas fa-arrow-down"></i></button></td>').appendTo($decrementRow);
+                $('<td class="separator"></td>').appendTo($decrementRow);
+                $('<td><button class="btn btn-sm btn-timepicker" data-action="decrementMinutes">' +
+                    '<i class="fas fa-arrow-down"></i></button></td>').appendTo($decrementRow);
+                $('<td class="separator"></td>').appendTo($decrementRow);
+                $('<td><button class="btn btn-sm btn-timepicker" data-action="decrementSeconds">' +
+                    '<i class="fas fa-arrow-down"></i></button></td>').appendTo($decrementRow);
+
+                $incrementRow.appendTo($timepickerContainer);
+                $timeRow.appendTo($timepickerContainer);
+                $decrementRow.appendTo($timepickerContainer);
+                this.$timepickerContainer = $timepickerContainer;
+                this.options.bootstrapDatepicker
+                    .data().datepicker.picker
+                    .find('.datepicker-time tbody')
+                    .html($timepickerContainer[0]);
+            };
+
+            TimePicker.prototype.bindEvents = function () {
+                let that = this;
+                let datepicker = that.options.bootstrapDatepicker;
+                let minViewMode = datepicker.data().datepicker.o.minViewMode;
+                let picker = datepicker.data().datepicker.picker;
+                this.$element.on('input', function () {
+                    that.handleInput();
+                });
+                this.$timepickerContainer.on('click', '.btn[data-action]', function (e) {
+                    that.handleButtonClick(e);
+                });
+                picker.on('click', '.time', function () {
+                    datepicker.datepicker('setViewMode', 5);
+                });
+                picker.on('click', '.calender', function () {
+                    datepicker.datepicker('setViewMode', minViewMode);
+                });
+                picker.on('click', '.today-tp', function () {
+                    $(that.$element[0]).val(moment().format(that.options.pattern));
+                    that.date.dateTimeDate = new Date();
+                    datepicker.data().datepicker.viewDate.setTime(that.date.dateTimeDate.getTime());
+                    that.setTimeComponents(that.date.dateTimeDate);
+                });
+
+                picker.on('click', '.clear', function () {
+                    that.setTimeComponents(new Date(new Date().setHours(0, 0, 0, 0)));
+                });
+            };
+
+            TimePicker.prototype.handleInput = function () {
+                let dateTimeInput = new Date(this.$element.val());
+                if (!isNaN(dateTimeInput.getDate())) {
+                    this.setTimeComponents(dateTimeInput);
+                    this.date = {
+                        dateTimeDate: new Date(dateTimeInput),
+                    };
+                }
+            }
+            TimePicker.prototype.setTimeComponents = function (date) {
+                this.$timepickerContainer.find('.timepicker-hour')
+                    .text(date.getHours().toString().padStart(2, '0'));
+                this.$timepickerContainer.find('.timepicker-minute')
+                    .text(date.getMinutes().toString().padStart(2, '0'));
+                this.$timepickerContainer.find('.timepicker-second')
+                    .text(date.getSeconds().toString().padStart(2, '0'));
+            };
+
+
+            TimePicker.prototype.modifyDatepicker = function () {
+                const datepicker = this.options.bootstrapDatepicker;
+                const viewModes = datepicker.datepicker.DPGlobal.viewModes;
+                const language = this.options.language;
+                let timeTxt, calenderTxt;
+                if ($.fn.timepicker.localisation[language]) {
+                    const localisation = $.fn.timepicker.localisation[language];
+                    timeTxt = localisation.timeTxt;
+                    calenderTxt = localisation.calenderTxt;
+                } else {
+                    const defaultLocalisation = $.fn.timepicker.localisation["en"];
+                    timeTxt = defaultLocalisation.timeTxt;
+                    calenderTxt = defaultLocalisation.calenderTxt;
+                    console.warn("No language configuration was found. Setting back to default language");
+                }
+                if (viewModes.length <= 5) {
+                    viewModes.push({
+                        names: ['time', 'time'],
+                        clsName: 'time'
+                    });
+                }
+                const dPicker = datepicker.data().datepicker.picker;
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = dPicker.html();
+                tempDiv.querySelectorAll('.today').forEach(element => {
+                    element.classList.remove('today');
+                    element.classList.add('today-tp');
+                });
+                const tfootElement = tempDiv.querySelector('tfoot');
+                const tfootElementCalender =
+                    tfootElement.innerHTML
+                    + '<th colSpan="7" class="calender" style="display: table-cell;">'
+                    + calenderTxt + '</th>';
+                const tfootElementClock =
+                    '<th colSpan="7" class="time" style="display: table-cell;">'
+                    + timeTxt
+                    + '</th>';
+                tempDiv.querySelectorAll('tfoot').forEach
+                (footerElement => footerElement.innerHTML += tfootElementClock);
+                addTimepickerWindow(tempDiv, tfootElementCalender);
+                datepicker.data().datepicker.picker.html(tempDiv.innerHTML);
+
+                function addTimepickerWindow(tempDiv, tfootElementCalender) {
+                    const newEl = document.createElement('div');
+                    newEl.style.display = 'none';
+                    newEl.classList.add('datepicker-time');
+                    newEl.innerHTML =
+                        '<table>' +
+                        '<thead>' +
+                        '<tr>' +
+                        '<th style="width:20%"></th>' +
+                        '<th style="width:20%"></th>' +
+                        '<th style="width:20%"></th>' +
+                        '<th style="width:20%"></th>' +
+                        '<th style="width:20%"></th>' +
+                        '</tr>' +
+                        '</thead>' +
+                        '<tbody></tbody>' +
+                        '<tfoot>' + tfootElementCalender + '</tfoot>' +
+                        '</table>';
+
+                    tempDiv.appendChild(newEl);
+                }
+            }
+
+            TimePicker.prototype.handleButtonClick = function (e) {
+                if (this.date.dateTimeDate !== undefined) {
+                    $(this.options.bootstrapDatepicker).data().datepicker.viewDate.setHours(this.date.dateTimeDate.getHours());
+                    $(this.options.bootstrapDatepicker).data().datepicker.viewDate.setMinutes(this.date.dateTimeDate.getMinutes());
+                    $(this.options.bootstrapDatepicker).data().datepicker.viewDate.setSeconds(this.date.dateTimeDate.getSeconds());
+
+                }
+                let datePickerDateTime = $(this.options.bootstrapDatepicker).data().datepicker.viewDate;
+                const $target = $(e.currentTarget);
+                const $hourElement = this.$timepickerContainer.find('.timepicker-hour');
+                const $minuteElement = this.$timepickerContainer.find('.timepicker-minute');
+                const $secondElement = this.$timepickerContainer.find('.timepicker-second');
+                let currentMinute = parseInt($minuteElement.text(), 10);
+                let currentSecond = parseInt($secondElement.text(), 10);
+                let currentHour = parseInt($hourElement.text(), 10);
+                const action = $target.data('action');
+
+                switch (action) {
+                    case 'incrementHours':
+                        currentHour = (currentHour + 1) % 24;
+                        datePickerDateTime.setHours(currentHour);
+
+                        break;
+                    case 'decrementHours':
+                        currentHour = (currentHour - 1 + 24) % 24;
+                        datePickerDateTime.setHours(currentHour);
+
+                        break;
+                    case 'incrementMinutes':
+                        currentMinute = (currentMinute + 1) % 60;
+                        if (currentMinute === 0) {
+                            currentHour = (currentHour + 1) % 24;
+                            datePickerDateTime.setHours(currentHour);
+                        }
+                        datePickerDateTime.setMinutes(currentMinute);
+                        break;
+                    case 'decrementMinutes':
+                        currentMinute = (currentMinute - 1 + 60) % 60;
+                        if (currentMinute === 59) {
+                            currentHour = (currentHour - 1 + 24) % 24;
+                            datePickerDateTime.setHours(currentHour);
+                        }
+                        datePickerDateTime.setMinutes(currentMinute);
+                        break;
+                    case 'incrementSeconds':
+                        currentSecond = (currentSecond + 1) % 60;
+                        if (currentSecond === 0 && currentMinute === 59) {
+                            currentHour = (currentHour + 1) % 24;
+                            datePickerDateTime.setHours(currentHour);
+                        }
+                        if (currentSecond === 0) {
+                            currentMinute = (currentMinute + 1) % 60;
+                            datePickerDateTime.setMinutes(currentMinute);
+                        }
+                        datePickerDateTime.setSeconds(currentSecond);
+                        break;
+                    case 'decrementSeconds':
+                        currentSecond = (currentSecond - 1 + 60) % 60;
+                        if (currentSecond === 59 && currentMinute === 0) {
+                            currentHour = (currentHour - 1 + 24) % 24;
+                            datePickerDateTime.setHours(currentHour);
+                        }
+                        if (currentSecond === 59) {
+                            currentMinute = (currentMinute - 1 + 60) % 60;
+                            datePickerDateTime.setMinutes(currentMinute);
+                        }
+                        datePickerDateTime.setSeconds(currentSecond);
+                        break;
+                }
+                if (this.options.timeformat === 12) {
+                    $hourElement.text((datePickerDateTime.getHours() % 12 || 12).toString().padStart(2, '0'));
+                } else {
+                    $hourElement.text(datePickerDateTime.getHours().toString().padStart(2, '0'));
+                }
+                $minuteElement.text(datePickerDateTime.getMinutes().toString().padStart(2, '0'));
+                $secondElement.text(datePickerDateTime.getSeconds().toString().padStart(2, '0'));
+                this.$element[0].value = moment(datePickerDateTime).format(this.options.pattern);
+                this.date.dateTimeDate= datePickerDateTime;
+            };
+
+            function setTimeFormat(pattern) {
+                let isTwentyFourHours = pattern.includes("h") ||
+                (
+                    moment("24", pattern)._locale._longDateFormat[pattern] &&
+                    moment("24", pattern)._locale._longDateFormat[pattern].includes('h')) ?
+                    12 : 24;
+                return isTwentyFourHours;
+            }
+        }
+    ));
+});
\ No newline at end of file
diff --git a/mir-module/src/main/resources/META-INF/resources/js/mir/xeditor-form.js b/mir-module/src/main/resources/META-INF/resources/js/mir/xeditor-form.js
index 7c59430ff7..e27d799373 100644
--- a/mir-module/src/main/resources/META-INF/resources/js/mir/xeditor-form.js
+++ b/mir-module/src/main/resources/META-INF/resources/js/mir/xeditor-form.js
@@ -1,20 +1,20 @@
 $(document).ready(function() {
 
-    function pickDatePickerFormatAndAdd(elm) {
+    function pickDatePickerFormatAndAdd(elm, clockBtn) {
         if (moment($(elm).val(), "YYYY-MM-DD", true).isValid()){
-            addDatePicker(elm, 0);
+            addDatePicker(elm, 0, clockBtn);
         }
         else {
             if (moment($(elm).val(), "YYYY-MM", true).isValid()){
-                addDatePicker(elm, 1);
+                addDatePicker(elm, 1, clockBtn);
             }
             else {
-                addDatePicker(elm, 2);
+                addDatePicker(elm, 2, clockBtn);
             }
         }
     }
 
-    function addDatePicker(elm, startView, format) {
+    function addDatePicker(elm, startView, clockIsActivated, format) {
         $(elm).datepicker({
             format: {
                 toDisplay: function (date, format, language) {
@@ -30,26 +30,32 @@ $(document).ready(function() {
             clearBtn: true,
             todayBtn: "linked",
             language: $("html").attr("lang"),
-            forceParse: false,
+            timeBtn: clockIsActivated,
+            forceParse: !clockIsActivated,
             autoclose: true,
             todayHighlight: true,
+            maxViewMode: 4,
             daysOfWeekHighlighted: "0"
         }).on("changeYear", function(e) {
             $(this).val(moment(e.date).format("YYYY"))
         }).on("changeMonth", function(e) {
             $(this).val(moment(e.date).format("YYYY-MM"));
-        }).on("hide", function(e) {
-            updateDatePicker($(this));
         });
+        if (clockIsActivated) {
+            $(elm).timepicker({
+                pattern: "YYYY-MM-DDTHH:mm:ssZ"
+            });
+        }
     }
 
-    function updateDatePicker(elm) {
-        $(elm).datepicker("remove");
+    function updateDatePicker(elm, clockBtn) {
+        $(elm).datepicker("destroy");
         $(elm).off("hide");
-        pickDatePickerFormatAndAdd($(elm));
+        pickDatePickerFormatAndAdd($(elm), clockBtn);
     }
 
     function getDate(parent, point) {
+
         if (point == "simple") {
             return $(parent).find(".date-changeable:not('.d-none') .date-simple input").val();
         }
@@ -61,13 +67,14 @@ $(document).ready(function() {
     function setDate(parent, point, date) {
         if (point == "simple") {
             $(parent).find(".date-changeable:not('.d-none') .date-simple input").val(date);
-            updateDatePicker($(parent).find(".date-changeable:not('.d-none') .date-simple input"));
+            updateDatePicker($(parent).find(".date-changeable:not('.d-none') .date-simple input"), true);
         }
+
         var elm = $(parent).find(".date-changeable:not('.d-none') .date-range input").filter(function () {
             return $(this).attr("data-point") == point;
         });
         $(elm).val(date);
-        updateDatePicker(elm);
+        updateDatePicker(elm, true);
 
     }
 
@@ -80,13 +87,13 @@ $(document).ready(function() {
         if (simpleVal != "") {
             $(elm).find("div.date-range > input.startDate").val(simpleVal);
             $(input).val("");
-            updateDatePicker($(elm).find("div.date-range > input.startDate"));
+            updateDatePicker($(elm).find("div.date-range > input.startDate"), false);
             updateDatePicker($(input));
         }
         var endDate = $(input).attr("data-end");
         if(endDate != "" && endDate != undefined){
             $(elm).find("div.date-range > input.endDate").val(endDate);
-            updateDatePicker($(elm).find("div.date-range > input.endDate"));
+            updateDatePicker($(elm).find("div.date-range > input.endDate"), false);
         }
     }
 
@@ -101,13 +108,36 @@ $(document).ready(function() {
         if (startVal != "") {
             $(elm).find("div.date-simple > input").val(startVal);
             $(inputStart).val("");
-            updateDatePicker($(elm).find("div.date-simple > input"));
-            updateDatePicker($(inputStart));
         }
-        if(endVal != ""){
+        updateDatePicker($(elm).find("div.date-simple > input"), false);
+        updateDatePicker($(inputStart), false);
+
+        if (endVal != "") {
             $(elm).find("div.date-simple > input").attr("data-end", endVal);
             $(inputEnd).val("");
-            updateDatePicker($(inputEnd));
+            updateDatePicker($(inputEnd), false);
+        }
+    }
+
+    function setDateToDateTime(elm) {
+        $(elm).find("div.date-simple").removeClass("d-none");
+        $(elm).find("div.date-range").addClass("d-none");
+        $(elm).attr("data-format", "simple");
+        var inputStart = $(elm).find("div.date-range > input.startDate");
+        var inputEnd = $(elm).find("div.date-range > input.endDate");
+        var startVal = $(inputStart).val();
+        var endVal = $(inputEnd).val();
+        if (startVal != "") {
+            $(elm).find("div.date-simple > input").val(startVal);
+            $(inputStart).val("");
+        }
+        updateDatePicker($(elm).find("div.date-simple > input"), true);
+        updateDatePicker($(inputStart), true);
+
+        if (endVal != "") {
+            $(elm).find("div.date-simple > input").attr("data-end", endVal);
+            $(inputEnd).val("");
+            updateDatePicker($(inputEnd), true);
         }
     }
 
@@ -144,6 +174,8 @@ $(document).ready(function() {
         });
     }
 
+
+
     if ($("div.date-format").length > 0) {
         $("div.date-format").each(function() {
             notEmpty = false;
@@ -158,6 +190,7 @@ $(document).ready(function() {
         });
     }
 
+
     function setLabelForClassification(parent) {
         $.ajax({
             url: webApplicationBaseURL + 'servlets/solr/select',
@@ -284,11 +317,16 @@ $(document).ready(function() {
      // Enables the datetimepicker
      if (jQuery.fn.datepicker) {
          $('.datetimepicker').find('input').each( function(index, elm){
-             pickDatePickerFormatAndAdd(elm);
+             if ($(elm).val().includes("T")) {
+                 pickDatePickerFormatAndAdd(elm, true);
+                 initTime(elm);
+             } else {
+                 pickDatePickerFormatAndAdd(elm, false);
+             }
          });
      }
 
-     $("body").on("click", ".expand-item", function () {
+    $("body").on("click", ".expand-item", function () {
          if($(this).attr("data-target")){
              $(this).closest(".form-group").next($(this).attr("data-target")).toggleClass("d-none");
          }
@@ -305,6 +343,7 @@ $(document).ready(function() {
          }
      });
 
+
      $("body").on("click", "div.date-selectFormat a.date-rangeOption", function (event) {
          event.preventDefault();
          setDateToRange($(this).closest("div.date-format"));
@@ -314,6 +353,10 @@ $(document).ready(function() {
          event.preventDefault();
          setDateToSimple($(this).closest("div.date-format"));
      });
+    $("body").on("click", "div.date-selectFormat a.date-timeOption", function (event) {
+        event.preventDefault();
+        setDateToDateTime($(this).closest("div.date-format"));
+    });
 
      $("body").on("change", ".date-select", function () {
          var type = $(this).val();
@@ -345,4 +388,16 @@ $(document).ready(function() {
              $(this).parents(".personExtended_box").find(".search-person .input-group > a").remove();
          }
      });
+
+    function initTime(elm) {
+        const tp = $(elm).datepicker().data().timepicker;
+        const currentDateTime = new Date($(elm).val());
+        $(elm).datepicker().data().datepicker.viewDate.setTime(currentDateTime.getTime());
+        const $timepickerContainer = tp.$timepickerContainer;
+        const padZero = (value) => String(value).padStart(2, '0');
+        $timepickerContainer.find('.timepicker-hour').text(padZero(currentDateTime.getHours()));
+        $timepickerContainer.find('.timepicker-minute').text(padZero(currentDateTime.getMinutes()));
+        $timepickerContainer.find('.timepicker-second').text(padZero(currentDateTime.getSeconds()));
+        elm.value = moment(elm.value).format("YYYY-MM-DDTHH:mm:ssZ");
+    }
  });
diff --git a/mir-module/src/main/resources/config/mir/messages_de.properties b/mir-module/src/main/resources/config/mir/messages_de.properties
index ee18c3c0dc..bcde30bb94 100644
--- a/mir-module/src/main/resources/config/mir/messages_de.properties
+++ b/mir-module/src/main/resources/config/mir/messages_de.properties
@@ -198,6 +198,7 @@ mir.date.issued.4                               = Erscheinungsjahr:
 mir.date.issued.onlyRange                       = Erscheinungsverlauf:
 mir.date.issued.range                           = Ver\u00F6ffentlichung:
 mir.date.period                                 = Zeitraum
+mir.date.datetime                               = Datum und Zeit
 mir.date.recorded                               = Datum der Aufnahme:
 mir.date.reviewed                               = Datum der \u00DCberpr\u00FCfung:
 mir.date.reviewed.range                         = \u00DCberpr\u00FCfung:
@@ -664,7 +665,7 @@ mir.validation.author                           = Bitte geben Sie mindestens ein
 mir.validation.blog.title                       = Bitte geben Sie den Titel des Blogs an.
 mir.validation.college                          = Bitte geben sie eine Hochschule an.
 mir.validation.collegeplace                     = Bitte geben sie einen Hochschulort an.
-mir.validation.date                             = Bitte geben Sie ein Jahr (JJJJ), Jahr und Monat (JJJJ-MM) oder ein Datum (JJJJ-MM-TT) ein.
+mir.validation.date                             = Bitte geben Sie ein Jahr (JJJJ), Jahr und Monat (JJJJ-MM), ein Datum (JJJJ-MM-TT) oder ein Datum mit Uhrzeit (JJJJ-MM-TT'T'SS:mm:ss +ZZ) ein.
 mir.validation.dateCreated                      = Bitte geben Sie das Erstellungsdatum an.
 mir.validation.dateIssued                       = Bitte geben Sie das Ver\u00F6ffentlichungsdatum an.
 mir.validation.date.iso8601                     = Bitte geben Sie ein Jahr (JJJJ), Jahr und Monat (JJJJ-MM) oder ein Datum (JJJJ-MM-TT) ein. Zeitr\u00E4ume trennen Sie mit einem Schr\u00E4gstrich. Zum Beispiel 2022/2023.
diff --git a/mir-module/src/main/resources/config/mir/messages_en.properties b/mir-module/src/main/resources/config/mir/messages_en.properties
index 5893e73ab7..29a1199ccc 100644
--- a/mir-module/src/main/resources/config/mir/messages_en.properties
+++ b/mir-module/src/main/resources/config/mir/messages_en.properties
@@ -192,6 +192,7 @@ mir.date.issued.4                              = Year of publication:
 mir.date.issued.onlyRange                      = Publication history:
 mir.date.issued.range                          = Publication:
 mir.date.period                                = time period
+mir.date.datetime                              = Date and Time
 mir.date.recorded                              = Date of recording:
 mir.date.reviewed                              = Date of review:
 mir.date.reviewed.range                        = review:
@@ -649,7 +650,7 @@ mir.validation.author                          = Author must be entered.
 mir.validation.blog.title                      = Please enter the title of the blog.
 mir.validation.college                         = Please enter college.
 mir.validation.collegeplace                    = Please enter college place.
-mir.validation.date                            = Please enter a year (YYYY), year and month (YYYY-MM), or a complete date (YYYY-MM-DD).
+mir.validation.date                            = Please enter a year (YYYY), year and month (YYYY-MM) a complete date (YYYY-MM-DD) or a datetime (YYYY-MM-DDTHH:mm:ssZ).
 mir.validation.dateCreated                     = Date created must be entered.
 mir.validation.dateIssued                      = Date issued must be entered.
 mir.validation.date.iso8601                    = Please enter a year (YYYY), year and month (YYYY-MM), or a complete date (YYYY-MM-DD). Separate periods with '/' e.g. 2022/2023.
diff --git a/mir-module/src/main/resources/xsl/editor/mir2xeditor.xsl b/mir-module/src/main/resources/xsl/editor/mir2xeditor.xsl
index a9d3a7f758..8add8beccb 100644
--- a/mir-module/src/main/resources/xsl/editor/mir2xeditor.xsl
+++ b/mir-module/src/main/resources/xsl/editor/mir2xeditor.xsl
@@ -204,6 +204,11 @@
             <xsl:value-of select="i18n:translate('mir.date.period')" />
           </a>
         </li>
+        <li>
+          <a href="#" class="date-timeOption dropdown-item">
+            <xsl:value-of select="i18n:translate('mir.date.datetime')" />
+          </a>
+        </li>
       </ul>
     </div>
   </xsl:template>
diff --git a/mir-module/src/main/resources/xsl/editor/xeditor2mods.xsl b/mir-module/src/main/resources/xsl/editor/xeditor2mods.xsl
index f1aeec434f..1405c7db00 100644
--- a/mir-module/src/main/resources/xsl/editor/xeditor2mods.xsl
+++ b/mir-module/src/main/resources/xsl/editor/xeditor2mods.xsl
@@ -96,6 +96,18 @@
   </xsl:template>
   -->
 
+  <!-- convert date-time with timezone to UTC -->
+  <xsl:template match="mods:*[@encoding='w3cdtf' and contains(text(), 'T') and substring(text(), string-length(text())) != 'Z']">
+    <xsl:copy>
+      <xsl:copy-of select="@*" />
+      <xsl:variable name="apos">'</xsl:variable>
+      <xsl:variable name="w3ctf-date-time" select="text()" />
+      <xsl:variable name="simple-date-format" select="concat('yyyy-MM-dd',$apos,'T',$apos,'HH:mm:ssX')" />
+      <xsl:variable name="iso-8601-format" select="'UUUU-MM-DDThh:mm:ssTZD'" />
+      <xsl:value-of select="mcrxml:getISODate($w3ctf-date-time, $simple-date-format, $iso-8601-format)" />
+    </xsl:copy>
+  </xsl:template>
+
   <!-- create value URI using valueURIxEditor and authorityURI -->
   <xsl:template match="@valueURIxEditor">
     <xsl:choose>
diff --git a/mir-module/src/main/resources/xsl/metadata/mir-abstract.xsl b/mir-module/src/main/resources/xsl/metadata/mir-abstract.xsl
index 42f8f3b8e1..81e230a00c 100644
--- a/mir-module/src/main/resources/xsl/metadata/mir-abstract.xsl
+++ b/mir-module/src/main/resources/xsl/metadata/mir-abstract.xsl
@@ -103,7 +103,8 @@
                 <xsl:call-template name="searchLink">
                   <xsl:with-param name="class" select="'date_published badge badge-primary'" />
                   <xsl:with-param name="linkText" select="$dateText" />
-                  <xsl:with-param name="query" select="concat('*&amp;fq=mods.dateIssued:',$firstDate, '&amp;owner=createdby:', $owner)" />
+                  <xsl:with-param name="query"
+                                  select="concat('*&amp;fq=mods.dateIssued:',concat(substring($firstDate,1,10),'*'), '&amp;owner=createdby:', $owner)"/>
                 </xsl:call-template>
               </xsl:when>
               <xsl:otherwise>