feat/Separate date and time picker

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/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'
@@ -92,12 +39,12 @@
 export default {
 	name: 'DatePicker',
 	components: {
 		NcButton,
 		DateTimePicker,
 		NcPopover,
 		TimezonePicker,
 	  IconTimezone,
 	  IconNewCalendar,
 	},
 	props: {
 		date: {
@@ -175,19 +122,6 @@
 
 			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 @@
 		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
 		 */

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,14 +62,51 @@
 
 			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: {
 		/**
 		 * 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)
 		},
 		/**
@@ -97,8 +125,26 @@
 		 * @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>