feat(TimePicker): recreate without library

Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>

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>

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)
 		},
 		/**