diff --git a/src/components/Editor/Properties/PropertyTitleTimePicker.vue b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
index 3a04fc010..36139190f 100644
--- a/src/components/Editor/Properties/PropertyTitleTimePicker.vue
+++ b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
@@ -12,24 +12,23 @@
 
 		<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"
 			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,9 +67,10 @@
 <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'
+import { NcCheckboxRadioSwitch, NcTimezonePicker } from '@nextcloud/vue'
 import { mapState } from 'pinia'
 import useSettingsStore from '../../../store/settings.js'
 
@@ -78,9 +78,11 @@ export default {
 	name: 'PropertyTitleTimePicker',
 	components: {
 		DatePicker,
+		TimePicker,
 		IconTimezone,
 		CalendarIcon,
 		NcCheckboxRadioSwitch,
+		NcTimezonePicker,
 	},
 	props: {
 		/**
@@ -280,3 +282,36 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+: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>
diff --git a/src/components/Shared/DatePicker.vue b/src/components/Shared/DatePicker.vue
index 1c9726d04..ce0dc6867 100644
--- a/src/components/Shared/DatePicker.vue
+++ b/src/components/Shared/DatePicker.vue
@@ -4,122 +4,38 @@
 -->
 
 <template>
-	<DateTimePicker :lang="lang"
-		:first-day-of-week="firstDay"
-		:format="'YYYY-MM-DD HH:mm'"
-		:formatter="formatter"
+	<DateTimePicker id="date-time-picker-input"
+		:min="minimumDate"
+		:max="maximumDate"
 		: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
+		label=""
+		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" />
 </template>
 
 <script>
 import {
-	NcButton,
-	NcDateTimePicker as DateTimePicker,
-	NcPopover,
-	NcTimezonePicker as TimezonePicker,
+	NcDateTimePickerNative as DateTimePicker,
 } 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,
@@ -128,66 +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
-		},
-		/**
-		 * 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
 		 *
@@ -204,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: {
 		/**
@@ -223,170 +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
+			if (this.disabledDate(date)) {
+				return
 			}
-		},
-		/**
-		 * Emits a change event for the Timezone
-		 *
-		 * @param {string} timezoneId The new timezoneId
-		 */
-		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
-		 */
-		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 })
-				}
-			}
-		},
-		/**
-		 * 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
@@ -400,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>
diff --git a/src/components/Shared/TimePicker.vue b/src/components/Shared/TimePicker.vue
index b8a1672dc..92afebbdd 100644
--- a/src/components/Shared/TimePicker.vue
+++ b/src/components/Shared/TimePicker.vue
@@ -4,62 +4,53 @@
 -->
 
 <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 :manual-open="true"
+		:open="isListOpen"
+		@click="isListOpen = !isListOpen">
+		<template #icon>
+			<NcTextField :value.sync="date" :error="isInvalidTime">
+				<ClockOutline/>
+			</NcTextField>
+		</template>
+		<NcActionButton v-for="time in timeList" :key="time" @click="changeFromList(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: '',
+			isInvalidTime: false,
+			isListOpen: false,
 		}
 	},
 	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 +62,39 @@ 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
+		},
+	},
+	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: {
 		/**
@@ -78,7 +102,11 @@ export default {
 		 *
 		 * @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)
 		},
 		/**
@@ -97,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>