From 36c58c1da4cf378adbe428e03be4c66a6c0fb33d Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Mon, 14 Oct 2024 22:18:34 +0200
Subject: [PATCH 1/5] feat(TimePicker): recreate without library

Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 .../Properties/PropertyTitleTimePicker.vue    |  9 +++
 src/components/Shared/TimePicker.vue          | 69 ++++++++++---------
 2 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/components/Editor/Properties/PropertyTitleTimePicker.vue b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
index 3a04fc010..df645366c 100644
--- a/src/components/Editor/Properties/PropertyTitleTimePicker.vue
+++ b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
@@ -30,6 +30,7 @@
 				@change="changeEnd"
 				@change-timezone="changeEndTimezone" />
 		</div>
+		<TimePicker :initial-date="startDate" />
 		<div v-if="isReadOnly"
 			class="property-title-time-picker__time-pickers property-title-time-picker__time-pickers--readonly">
 			<div class="property-title-time-picker-read-only-wrapper property-title-time-picker-read-only-wrapper--start-date">
@@ -68,6 +69,7 @@
 <script>
 import moment from '@nextcloud/moment'
 import DatePicker from '../../Shared/DatePicker.vue'
+import TimePicker from '../../Shared/TimePicker.vue'
 import IconTimezone from 'vue-material-design-icons/Web.vue'
 import CalendarIcon from 'vue-material-design-icons/Calendar.vue'
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
@@ -78,6 +80,7 @@ export default {
 	name: 'PropertyTitleTimePicker',
 	components: {
 		DatePicker,
+		TimePicker,
 		IconTimezone,
 		CalendarIcon,
 		NcCheckboxRadioSwitch,
@@ -280,3 +283,9 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+:deep(.button-vue--icon-only), :deep(.button-vue__icon) {
+	width: 7rem !important;
+}
+</style>
diff --git a/src/components/Shared/TimePicker.vue b/src/components/Shared/TimePicker.vue
index b8a1672dc..184a8a3a5 100644
--- a/src/components/Shared/TimePicker.vue
+++ b/src/components/Shared/TimePicker.vue
@@ -4,62 +4,54 @@
 -->
 
 <template>
-	<DateTimePicker ::clearable="false"
-		:first-day-of-week="firstDay"
-		:format="format"
-		:lang="lang"
-		:minute-step="5"
-		:show-second="false"
-		type="time"
-		:use12h="showAmPm"
-		:value="date"
-		v-bind="$attrs"
-		v-on="$listeners"
-		@change="change" />
+	<NcActions>
+		<template #icon>
+			<NcTextField :value.sync="date">
+				<template #trailing-button-icon>
+					<ClockOutline/>
+				</template>
+			</NcTextField>
+		</template>
+		<NcActionButton v-for="time in timeList" :key="time" @click="change(parse(time))">
+			<template #icon></template>
+			{{ time }}
+		</NcActionButton>
+	</NcActions>
 </template>
 
 <script>
-import { NcDateTimePicker as DateTimePicker } from '@nextcloud/vue'
+import { NcActions, NcTextField, NcActionButton } from '@nextcloud/vue'
+import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
 import moment from '@nextcloud/moment'
 import { mapState } from 'pinia'
-import {
-	getFirstDay,
-} from '@nextcloud/l10n'
-import { getLangConfigForVue2DatePicker } from '../../utils/localization.js'
 import useSettingsStore from '../../store/settings.js'
 
 export default {
 	name: 'TimePicker',
 	components: {
-		DateTimePicker,
+		NcActions,
+		NcTextField,
+		NcActionButton,
+		ClockOutline,
 	},
 	props: {
-		date: {
+		initialDate: {
 			type: Date,
 			required: true,
 		},
 	},
 	data() {
 		return {
-			firstDay: getFirstDay() === 0 ? 7 : getFirstDay(),
-			format: {
-				stringify: this.stringify,
-				parse: this.parse,
-			},
+			date: '',
 		}
 	},
+	mounted() {
+		this.date = this.stringify(this.initialDate)
+	},
 	computed: {
 		...mapState(useSettingsStore, {
 			locale: 'momentLocale',
 		}),
-		/**
-		 * Returns the lang config for vue2-datepicker
-		 *
-		 * @return {object}
-		 */
-		lang() {
-			return getLangConfigForVue2DatePicker(this.locale)
-		},
 		/**
 		 * Whether or not to offer am/pm in the timepicker
 		 *
@@ -71,6 +63,18 @@ export default {
 
 			return timeFormat.indexOf('a') !== -1
 		},
+
+		timeList() {
+			const times = []
+			let currentTime = moment(this.initialDate)
+
+			for (let i = 0; i < 10; i++) {
+				times.push(currentTime.format('LT'))
+				currentTime = currentTime.add(15, 'minutes')
+			}
+
+			return times
+		},
 	},
 	methods: {
 		/**
@@ -79,6 +83,7 @@ export default {
 		 * @param {Date} date The new Date object
 		 */
 		change(date) {
+			this.date = this.stringify(date)
 			this.$emit('change', date)
 		},
 		/**

From 5c9ffd0c7776a88cdc0765d71a0d1e98535484c5 Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Tue, 15 Oct 2024 21:26:43 +0200
Subject: [PATCH 2/5] fixup! feat(TimePicker): recreate without library

Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 src/components/Shared/TimePicker.vue | 63 +++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 11 deletions(-)

diff --git a/src/components/Shared/TimePicker.vue b/src/components/Shared/TimePicker.vue
index 184a8a3a5..92afebbdd 100644
--- a/src/components/Shared/TimePicker.vue
+++ b/src/components/Shared/TimePicker.vue
@@ -4,15 +4,15 @@
 -->
 
 <template>
-	<NcActions>
+	<NcActions :manual-open="true"
+		:open="isListOpen"
+		@click="isListOpen = !isListOpen">
 		<template #icon>
-			<NcTextField :value.sync="date">
-				<template #trailing-button-icon>
-					<ClockOutline/>
-				</template>
+			<NcTextField :value.sync="date" :error="isInvalidTime">
+				<ClockOutline/>
 			</NcTextField>
 		</template>
-		<NcActionButton v-for="time in timeList" :key="time" @click="change(parse(time))">
+		<NcActionButton v-for="time in timeList" :key="time" @click="changeFromList(parse(time))">
 			<template #icon></template>
 			{{ time }}
 		</NcActionButton>
@@ -43,11 +43,10 @@ export default {
 	data() {
 		return {
 			date: '',
+			isInvalidTime: false,
+			isListOpen: false,
 		}
 	},
-	mounted() {
-		this.date = this.stringify(this.initialDate)
-	},
 	computed: {
 		...mapState(useSettingsStore, {
 			locale: 'momentLocale',
@@ -76,13 +75,37 @@ export default {
 			return times
 		},
 	},
+	watch: {
+		date(value) {
+			let isValidTime = false
+			isValidTime = !isValidTime ? moment(value, 'LT', true).isValid() : isValidTime
+			isValidTime = !isValidTime ? moment(value, 'HH:mm', true).isValid() : isValidTime
+			isValidTime = !isValidTime ? moment(value, 'H:mm', true).isValid() : isValidTime
+
+			// Meaning it was changed through textfield
+			if (!(value instanceof Date) && isValidTime) {
+				this.isInvalidTime = false
+
+				const parsedDate = this.parse(value)
+				this.$emit('change', parsedDate)
+			} else if (!(value instanceof Date)) {
+				this.isInvalidTime = true
+			}
+		},
+	},
+	mounted() {
+		this.date = this.stringify(this.initialDate)
+	},
 	methods: {
 		/**
 		 * Emits a change event for the Date
 		 *
 		 * @param {Date} date The new Date object
 		 */
-		change(date) {
+		changeFromList(date) {
+			this.isInvalidTime = false
+			this.isListOpen = false
+
 			this.date = this.stringify(date)
 			this.$emit('change', date)
 		},
@@ -102,8 +125,26 @@ export default {
 		 * @return {Date}
 		 */
 		parse(value) {
-			return moment(value, 'LT', this.locale).toDate()
+			try {
+				return moment(value, 'LT', this.locale).toDate()
+			} catch (e) {
+				console.error(e)
+			}
 		},
 	},
 }
 </script>
+
+<style scoped>
+:deep(.action-button__icon) {
+	display: none;
+}
+
+:deep(.action-button__text) {
+	margin: 0 8px;
+}
+
+:deep(.input-field__icon--trailing) {
+	display: none;
+}
+</style>

From d68c91304d0dc109eaca8b456fd2c6f9416bca88 Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Sun, 20 Oct 2024 22:17:45 +0200
Subject: [PATCH 3/5] feat(DatePicker): start moving to native

Signed-off-by: Grigory V <scratchx@gmx.com>
---
 src/components/Shared/DatePicker.vue | 87 +++-------------------------
 1 file changed, 7 insertions(+), 80 deletions(-)

diff --git a/src/components/Shared/DatePicker.vue b/src/components/Shared/DatePicker.vue
index 1c9726d04..0c36edd76 100644
--- a/src/components/Shared/DatePicker.vue
+++ b/src/components/Shared/DatePicker.vue
@@ -4,73 +4,20 @@
 -->
 
 <template>
-	<DateTimePicker :lang="lang"
-		:first-day-of-week="firstDay"
-		:format="'YYYY-MM-DD HH:mm'"
-		:formatter="formatter"
+	<DateTimePicker id="date-time-picker-input"
+		:min="min"
+		:max="max"
 		:value="date"
-		:type="actualType"
-		:clearable="false"
-		:minute-step="5"
-		:disabled-date="disabledDate"
-		:show-second="false"
-		:show-time-panel="showTimePanel"
-		:show-week-number="showWeekNumbers"
-		:use12h="showAmPm"
-		:append-to-body="appendToBody"
-		v-bind="$attrs"
-		confirm
+		type="date"
 		class="date-time-picker"
-		v-on="$listeners"
-		@close="close"
-		@change="change"
-		@pick="pickDate">
-		<template #icon-calendar>
-			<IconNewCalendar v-if="isAllDay" :size="20" class="date-time-picker__icon" />
-			<NcPopover v-else open-class="timezone-popover-wrapper">
-				<template #trigger>
-					<NcButton type="tertiary-no-background"
-						:aria-label="t('calendar', 'Select a time zone')"
-						@mousedown="(e) => e.stopPropagation()">
-						<template #icon>
-							<IconTimezone :size="20"
-								class="date-time-picker__icon"
-								:class="{ 'date-time-picker__icon--highlight': highlightTimezone }" />
-						</template>
-					</NcButton>
-				</template>
-				<template>
-					<div class="timezone-popover-wrapper__title">
-						<strong>
-							{{ $t('calendar', 'Please select a time zone:') }}
-						</strong>
-					</div>
-					<TimezonePicker class="timezone-popover-wrapper__timezone-select"
-						:value="timezoneId"
-						@input="changeTimezone" />
-				</template>
-			</NcPopover>
-		</template>
-		<template v-if="!isAllDay"
-			#footer>
-			<NcButton v-if="!showTimePanel"
-				class="mx-btn mx-btn-text"
-				@click="toggleTimePanel">
-				{{ $t('calendar', 'Pick a time') }}
-			</NcButton>
-			<NcButton v-else
-				class="mx-btn mx-btn-text"
-				@click="toggleTimePanel">
-				{{ $t('calendar', 'Pick a date') }}
-			</NcButton>
-		</template>
-	</DateTimePicker>
+		@input="change"
+		@pick="pickDate" />
 </template>
 
 <script>
 import {
 	NcButton,
-	NcDateTimePicker as DateTimePicker,
+	NcDateTimePickerNative as DateTimePicker,
 	NcPopover,
 	NcTimezonePicker as TimezonePicker,
 } from '@nextcloud/vue'
@@ -175,19 +122,6 @@ export default {
 
 			return this.timezoneId !== this.userTimezoneId
 		},
-		/**
-		 * Type of the DatePicker.
-		 * Ether date if allDay or datetime
-		 *
-		 * @return {string}
-		 */
-		actualType() {
-			if (this.type === 'datetime' && this.isAllDay) {
-				return 'date'
-			}
-
-			return this.type
-		},
 		/**
 		 * The earliest date a user is allowed to pick in the timezone
 		 *
@@ -245,13 +179,6 @@ export default {
 		changeTimezone(timezoneId) {
 			this.$emit('change-timezone', timezoneId)
 		},
-		/**
-		 * Reset to time-panel on close of datepicker
-		 */
-		close() {
-			this.showTimePanel = true
-			this.$emit('close')
-		},
 		/**
 		 * Toggles the time-picker
 		 */

From 5483e79c2c8529b6aa9743102b998ba42a92cc71 Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Mon, 21 Oct 2024 18:40:53 +0200
Subject: [PATCH 4/5] feat(DatePicker): remove all useless props/methods now
 that native picker is used

Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 src/components/Shared/DatePicker.vue | 271 +--------------------------
 1 file changed, 8 insertions(+), 263 deletions(-)

diff --git a/src/components/Shared/DatePicker.vue b/src/components/Shared/DatePicker.vue
index 0c36edd76..ce0dc6867 100644
--- a/src/components/Shared/DatePicker.vue
+++ b/src/components/Shared/DatePicker.vue
@@ -5,68 +5,37 @@
 
 <template>
 	<DateTimePicker id="date-time-picker-input"
-		:min="min"
-		:max="max"
+		:min="minimumDate"
+		:max="maximumDate"
 		:value="date"
+		label=""
 		type="date"
 		class="date-time-picker"
-		@input="change"
-		@pick="pickDate" />
+		@input="change" />
 </template>
 
 <script>
 import {
-	NcButton,
 	NcDateTimePickerNative as DateTimePicker,
-	NcPopover,
-	NcTimezonePicker as TimezonePicker,
 } from '@nextcloud/vue'
-import IconTimezone from 'vue-material-design-icons/Web.vue'
-import IconNewCalendar from 'vue-material-design-icons/CalendarBlankOutline.vue'
-import {
-	getFirstDay,
-} from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
-import { mapStores, mapState } from 'pinia'
-import {
-	showError,
-} from '@nextcloud/dialogs'
+import { mapStores } from 'pinia'
 
-import { getLangConfigForVue2DatePicker } from '../../utils/localization.js'
-import useSettingsStore from '../../store/settings.js'
 import useDavRestrictionsStore from '../../store/davRestrictions.js'
 
 export default {
 	name: 'DatePicker',
 	components: {
-		NcButton,
 		DateTimePicker,
-		NcPopover,
-		TimezonePicker,
-	  IconTimezone,
-	  IconNewCalendar,
 	},
 	props: {
 		date: {
 			type: Date,
 			required: true,
 		},
-		timezoneId: {
-			type: String,
-			default: 'floating',
-		},
 		prefix: {
 			type: String,
 			default: null,
 		},
-		isAllDay: {
-			type: Boolean,
-			required: true,
-		},
-		userTimezoneId: {
-			type: String,
-			default: null,
-		},
 		min: {
 			type: Date,
 			default: null,
@@ -75,53 +44,9 @@ export default {
 			type: Date,
 			default: null,
 		},
-		appendToBody: {
-			type: Boolean,
-			default: false,
-		},
-		type: {
-			type: String,
-			default: 'datetime',
-		},
-	},
-	data() {
-		return {
-			firstDay: getFirstDay() === 0 ? 7 : getFirstDay(),
-			formatter: {
-				stringify: this.stringify,
-				parse: this.parse,
-			},
-			showTimePanel: true,
-		}
 	},
 	computed: {
 		...mapStores(useDavRestrictionsStore),
-		...mapState(useSettingsStore, {
-			locale: 'momentLocale',
-			showWeekNumbers: 'showWeekNumbers',
-		}),
-		/**
-		 * Returns the lang config for vue2-datepicker
-		 *
-		 * @return {object}
-		 */
-		lang() {
-			return getLangConfigForVue2DatePicker(this.locale)
-		},
-		/**
-		 * Whether or not to highlight the timezone-icon.
-		 * The icon is highlighted when the selected timezone
-		 * does not equal the current user's timezone
-		 *
-		 * @return {boolean}
-		 */
-		highlightTimezone() {
-			if (this.isAllDay) {
-				return true
-			}
-
-			return this.timezoneId !== this.userTimezoneId
-		},
 		/**
 		 * The earliest date a user is allowed to pick in the timezone
 		 *
@@ -138,17 +63,6 @@ export default {
 		maximumDate() {
 			return this.max || new Date(this.davRestrictionsStore.maximumDate)
 		},
-		/**
-		 * Whether or not to offer am/pm in the timepicker
-		 *
-		 * @return {boolean}
-		 */
-		showAmPm() {
-			const localeData = moment().locale(this.locale).localeData()
-			const timeFormat = localeData.longDateFormat('LT').toLowerCase()
-
-			return timeFormat.indexOf('a') !== -1
-		},
 	},
 	methods: {
 		/**
@@ -157,163 +71,11 @@ export default {
 		 * @param {Date} date The new Date object
 		 */
 		change(date) {
-			this.$emit('change', date)
-		},
-		/**
-		 * Changes the view to time-picker,
-		 * when user picked a date and date-time-picker is not all-day
-		 *
-		 * @param {Date} date The selected Date object
-		 * @param {string} type The type of selected date (Date, Time, ...)
-		 */
-		pickDate(date, type) {
-			if (!this.isAllDay && type === 'date') {
-				this.showTimePanel = true
-			}
-		},
-		/**
-		 * Emits a change event for the Timezone
-		 *
-		 * @param {string} timezoneId The new timezoneId
-		 */
-		changeTimezone(timezoneId) {
-			this.$emit('change-timezone', timezoneId)
-		},
-		/**
-		 * Toggles the time-picker
-		 */
-		toggleTimePanel() {
-			this.showTimePanel = !this.showTimePanel
-		},
-		/**
-		 * Formats the date string
-		 *
-		 * @param {Date} date The date for format
-		 * @return {string}
-		 */
-		stringify(date) {
-			const formattedDate = moment(date).locale(this.locale).format('L')
-			const formattedTime = moment(date).locale(this.locale).format('LT')
-
-			if (this.isAllDay) {
-				switch (this.prefix) {
-				case 'from':
-					return this.$t('calendar', 'from {formattedDate}', { formattedDate })
-
-				case 'to':
-					return this.$t('calendar', 'to {formattedDate}', { formattedDate })
-
-				case 'on':
-					return this.$t('calendar', 'on {formattedDate}', { formattedDate })
-
-				default:
-					return formattedDate
-				}
-			} else {
-				switch (this.prefix) {
-				case 'from':
-					return this.$t('calendar', 'from {formattedDate} at {formattedTime}', { formattedDate, formattedTime })
-
-				case 'to':
-					return this.$t('calendar', 'to {formattedDate} at {formattedTime}', { formattedDate, formattedTime })
-
-				case 'on':
-					return this.$t('calendar', 'on {formattedDate} at {formattedTime}', { formattedDate, formattedTime })
-
-				default:
-					return this.$t('calendar', '{formattedDate} at {formattedTime}', { formattedDate, formattedTime })
-				}
+			if (this.disabledDate(date)) {
+				return
 			}
-		},
-		/**
-		 * Parses the user input from the input field
-		 *
-		 * @param {string} value The user-input to be parsed
-		 * @return {Date}
-		 */
-		parse(value) {
-			if (this.isAllDay) {
-				let format
 
-				switch (this.prefix) {
-				case 'from':
-					format = this.$t('calendar', 'from {formattedDate}')
-					break
-
-				case 'to':
-					format = this.$t('calendar', 'to {formattedDate}')
-					break
-
-				case 'on':
-					format = this.$t('calendar', 'on {formattedDate}')
-					break
-
-				default:
-					format = '{formattedDate}'
-					break
-				}
-
-				const regexString = format
-					.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')
-					.replace(/(?:^|\\})([^{}]+)(?:$|\\{)/g, (fullMatch, groupMatch) => {
-						return fullMatch.replace(groupMatch, '(?:' + groupMatch + ')?')
-					})
-					.replace('\\{formattedDate\\}', '(.*)')
-				const regex = new RegExp(regexString)
-				const matches = value.match(regex)
-
-				if (!matches) {
-					showError(this.$t('calendar', 'Please enter a valid date'))
-					// Just return the previous date
-					return this.date
-				}
-
-				return moment(matches[1], 'L', this.locale).toDate()
-			} else {
-				let format
-
-				switch (this.prefix) {
-				case 'from':
-					format = this.$t('calendar', 'from {formattedDate} at {formattedTime}')
-					break
-
-				case 'to':
-					format = this.$t('calendar', 'to {formattedDate} at {formattedTime}')
-					break
-
-				case 'on':
-					format = this.$t('calendar', 'on {formattedDate} at {formattedTime}')
-					break
-
-				default:
-					format = this.$t('calendar', '{formattedDate} at {formattedTime}')
-					break
-				}
-
-				const escapedFormat = format
-					.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')
-					.replace(/(?:^|\\})([^{}]+)(?:$|\\{)/g, (fullMatch, groupMatch) => {
-						return fullMatch.replace(groupMatch, '(?:' + groupMatch + ')?')
-					})
-				const dateRegexString = escapedFormat
-					.replace('\\{formattedDate\\}', '(.*)')
-					.replace('\\{formattedTime\\}', '.*')
-				const dateRegex = new RegExp(dateRegexString)
-				const timeRegexString = escapedFormat
-					.replace('\\{formattedDate\\}', '.*')
-					.replace('\\{formattedTime\\}', '(.*)')
-				const timeRegex = new RegExp(timeRegexString)
-				const dateMatches = value.match(dateRegex)
-				const timeMatches = value.match(timeRegex)
-
-				if (!dateMatches || !timeMatches) {
-					showError(this.$t('calendar', 'Please enter a valid date and time'))
-					// Just return the previous date
-					return this.date
-				}
-
-				return moment(dateMatches[1] + ' ' + timeMatches[1], 'L LT', this.locale).toDate()
-			}
+			this.$emit('change', date)
 		},
 		/**
 		 * Whether or not the date is acceptable
@@ -327,20 +89,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-.date-time-picker {
-	&__icon {
-		opacity: 0.7;
-
-		&--highlight {
-			opacity: 1;
-		}
-	}
-
-	:deep(.multiselect__content-wrapper) {
-		border: none !important;
-		position: relative !important;
-	}
-}
-</style>

From 55fd3e173c7505c55c3a7fa684505854e30f318d Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Mon, 21 Oct 2024 18:41:25 +0200
Subject: [PATCH 5/5] style(PropertyTitleTimePicker): redo styling of date,
 time, timezone, picker menu

Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 .../Properties/PropertyTitleTimePicker.vue    | 60 +++++++++++++------
 1 file changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/components/Editor/Properties/PropertyTitleTimePicker.vue b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
index df645366c..36139190f 100644
--- a/src/components/Editor/Properties/PropertyTitleTimePicker.vue
+++ b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
@@ -12,23 +12,21 @@
 
 		<div v-if="!isReadOnly"
 			class="property-title-time-picker__time-pickers">
-			<DatePicker :date="startDate"
-				:timezone-id="startTimezone"
-				prefix="from"
-				:is-all-day="isAllDay"
-				:append-to-body="appendToBody"
-				:user-timezone-id="userTimezone"
-				@change="changeStart"
-				@change-timezone="changeStartTimezone" />
+			<div class="property-title-time-picker__time-pickers-from">
+				<DatePicker :date="startDate"
+					prefix="from"
+					@change="changeStart" />
+				<TimePicker :initial-date="startDate" />
+				<NcTimezonePicker :value="startTimezone" @input="changeStartTimezone" />
+			</div>
 
-			<DatePicker :date="endDate"
-				:timezone-id="endTimezone"
-				prefix="to"
-				:is-all-day="isAllDay"
-				:append-to-body="appendToBody"
-				:user-timezone-id="userTimezone"
-				@change="changeEnd"
-				@change-timezone="changeEndTimezone" />
+			<div class="property-title-time-picker__time-pickers-to">
+				<DatePicker :date="endDate"
+					prefix="from"
+					@change="changeEnd" />
+				<TimePicker :initial-date="endDate" />
+				<NcTimezonePicker :value="endTimezone" @input="changeEndTimezone" />
+			</div>
 		</div>
 		<TimePicker :initial-date="startDate" />
 		<div v-if="isReadOnly"
@@ -72,7 +70,7 @@ import DatePicker from '../../Shared/DatePicker.vue'
 import TimePicker from '../../Shared/TimePicker.vue'
 import IconTimezone from 'vue-material-design-icons/Web.vue'
 import CalendarIcon from 'vue-material-design-icons/Calendar.vue'
-import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcTimezonePicker } from '@nextcloud/vue'
 import { mapState } from 'pinia'
 import useSettingsStore from '../../../store/settings.js'
 
@@ -84,6 +82,7 @@ export default {
 		IconTimezone,
 		CalendarIcon,
 		NcCheckboxRadioSwitch,
+		NcTimezonePicker,
 	},
 	props: {
 		/**
@@ -288,4 +287,31 @@ export default {
 :deep(.button-vue--icon-only), :deep(.button-vue__icon) {
 	width: 7rem !important;
 }
+
+.property-title-time-picker__time-pickers-from, .property-title-time-picker__time-pickers-to {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--default-grid-baseline);
+
+	:deep(input) {
+		max-width: 10rem;
+	}
+
+	.native-datetime-picker {
+		display: inline-block;
+	}
+
+}
+
+/* Needed because the timezone picker has old styling */
+:deep(.vs__dropdown-toggle), :deep(.v-select) {
+	height: var(--default-clickable-area);
+	overflow-y: clip !important;
+	max-width: 200px;
+	min-width: 200px !important;
+}
+
+:deep(button.vs__open-indicator-button) {
+	padding: 0 !important;
+}
 </style>