From 05d58f63c7f34558226fa248377693d8c3f09cbf Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Mon, 18 Sep 2023 20:18:08 +0200
Subject: [PATCH] fix: handling of empty values in NcDateTimePickerNative

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 .../NcDateTimePickerNative.vue                | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
index 4a383f49ba..95ff0fcc53 100644
--- a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
+++ b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
@@ -2,6 +2,7 @@
   - @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>
   -
   - @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -33,13 +34,14 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 #### Usage: type='datetime-local'
 ```vue
 <template>
-	<span>
+	<div>
+		<span>Picked date: {{ value || 'null' }}</span>
 		<NcDateTimePickerNative
 			v-model="value"
 			:id="id"
 			:label="label"
 			type="datetime-local" />
-	</span>
+	</div>
 </template>
 <script>
 	export default {
@@ -57,7 +59,8 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 #### Usage: type='datetime-local' with min date and max date
 ```vue
 <template>
-	<span>
+	<div>
+		<span>Picked date: {{ value || 'null' }}</span>
 		<NcDateTimePickerNative
 			v-model="value"
 			:id="id"
@@ -65,7 +68,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 			:max="someDate"
 			:label="label"
 			type="datetime-local" />
-	</span>
+	</div>
 </template>
 
 <script>
@@ -86,13 +89,14 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 #### Usage: type='week'
 ```vue
 <template>
-	<span>
+	<div>
+		<span>Picked date: {{ value || 'null' }}</span>
 		<NcDateTimePickerNative
 			v-model="value"
 			:id="id"
 			:label="label"
 			type="week" />
-	</span>
+	</div>
 </template>
 
 <script>
@@ -111,13 +115,14 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 #### Usage: type='month'
 ```vue
 <template>
-	<span>
+	<div>
+		<span>Picked date: {{ value || 'null' }}</span>
 		<NcDateTimePickerNative
 			v-model="value"
 			:id="id"
 			:label="label"
 			type="month" />
-	</span>
+	</div>
 </template>
 
 <script>
@@ -163,10 +168,11 @@ export default {
 		 * The date is – like the `Date` object in JavaScript – tied to UTC.
 		 * The selected time zone does not have an influence of the selected time and date value.
 		 * You have to translate the time yourself when you want to factor in time zones.
+		 * Pass null to clear the input field.
 		 */
 		value: {
 			type: Date,
-			required: true,
+			default: null,
 		},
 
 		/**
@@ -265,7 +271,7 @@ export default {
 						 *
 						 * @return {string} empty string
 						 */
-						return this.$emit('input', '')
+						return this.$emit('input', null)
 					}
 					if (this.type === 'time') {
 						const time = $event.target.value