Replace moment.js date with Date Object.

Replace vue2-datepicker with native date picker for expiration date.

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

apps/files_sharing/src/components/SharingEntry.vue

@@ -88,27 +88,22 @@
 				<!-- expiration date -->
 				<NcActionCheckbox :checked.sync="hasExpirationDate"
 					:disabled="config.isDefaultInternalExpireDateEnforced || saving"
-					@uncheck="onExpirationDisable">
+					@uncheck="uncheckExpirationDate">
 					{{ config.isDefaultInternalExpireDateEnforced
 						? t('files_sharing', 'Expiration date enforced')
 						: t('files_sharing', 'Set expiration date') }}
 				</NcActionCheckbox>
 				<NcActionInput v-if="hasExpirationDate"
 					ref="expireDate"
-					v-tooltip.auto="{
-						content: errors.expireDate,
-						show: errors.expireDate,
-						trigger: 'manual'
-					}"
+					:is-native-picker="true"
+					:hide-label="true"
 					:class="{ error: errors.expireDate}"
 					:disabled="saving"
-					:lang="lang"
-					:value="share.expireDate"
-					value-type="format"
-					icon="icon-calendar-dark"
+					:value="expireDate"
 					type="date"
-					:disabled-date="disabledDate"
-					@update:value="onExpirationChange">
+					:min="dateTomorrow"
+					:max="dateMaxEnforced"
+					@input="onExpirationChange">
 					{{ t('files_sharing', 'Enter a date') }}
 				</NcActionInput>
 
@@ -181,6 +176,7 @@ export default {
 			permissionsDelete: OC.PERMISSION_DELETE,
 			permissionsRead: OC.PERMISSION_READ,
 			permissionsShare: OC.PERMISSION_SHARE,
+			isFirstInitOfExpireDate: true,
 		}
 	},
 
@@ -380,20 +376,20 @@ export default {
 			},
 			set(enabled) {
 				this.share.expireDate = enabled
-					? this.config.defaultInternalExpirationDateString !== ''
-						? this.config.defaultInternalExpirationDateString
-						: moment().format('YYYY-MM-DD')
+					? this.config.defaultInternalExpirationDate !== ''
+						? this.config.defaultInternalExpirationDate
+						: new Date()
 					: ''
 			},
 		},
 
 		dateMaxEnforced() {
 			if (!this.isRemote) {
 				return this.config.isDefaultInternalExpireDateEnforced
-					&& moment().add(1 + this.config.defaultInternalExpireDate, 'days')
+					&& new Date(new Date().setDate(new Date().getDate() + 1 + this.config.defaultInternalExpireDate))
 			} else {
 				return this.config.isDefaultRemoteExpireDateEnforced
-					&& moment().add(1 + this.config.defaultRemoteExpireDate, 'days')
+					&& new Date(new Date().setDate(new Date().getDate() + 1 + this.config.defaultRemoteExpireDate))
 			}
 		},
 
@@ -434,6 +430,20 @@ export default {
 
 			return this.isFolder || allowedMimetypes.includes(this.fileInfo.mimetype)
 		},
+
+		/**
+		 * Compute value for expiration input field
+		 * @return {Date}
+		 */
+		expireDate() {
+			if (this.isFirstInitOfExpireDate) {
+				// initial value needs to be set to one day after share.expireDate because the min value of input is dateTomorrow
+				// eslint-disable-next-line vue/no-side-effects-in-computed-properties
+				this.isFirstInitOfExpireDate = false
+				return new Date(new Date().setDate(this.share.expireDate.getDate() + 1))
+			}
+			return this.share.expireDate
+		},
 	},
 
 	methods: {
@@ -465,6 +475,14 @@ export default {
 		onMenuClose() {
 			this.onNoteSubmit()
 		},
+
+		/**
+		 * Process unchecking of checkbox for expiration date
+		 */
+		uncheckExpirationDate() {
+			this.isFirstInitOfExpireDate = true
+			return this.onExpirationDisable()
+		},
 	},
 }
 </script>

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -98,20 +98,13 @@
 			</NcActionText>
 			<NcActionInput v-if="pendingExpirationDate"
 				v-model="share.expireDate"
-				v-tooltip.auto="{
-					content: errors.expireDate,
-					show: errors.expireDate,
-					trigger: 'manual',
-					defaultContainer: '#app-sidebar'
-				}"
 				class="share-link-expire-date"
 				:disabled="saving"
-
-				:lang="lang"
-				icon=""
+			    :is-native-picker="true"
+				:hide-label="true"
 				type="date"
-				value-type="format"
-				:disabled-date="disabledDate">
+				:min="dateTomorrow"
+				:max="dateMaxEnforced">
 				<!-- let's not submit when picked, the user
 					might want to still edit or copy the password -->
 				{{ t('files_sharing', 'Enter a date') }}
@@ -213,29 +206,23 @@
 					<NcActionCheckbox :checked.sync="hasExpirationDate"
 						:disabled="config.isDefaultExpireDateEnforced || saving"
 						class="share-link-expire-date-checkbox"
-						@uncheck="onExpirationDisable">
+						@uncheck="uncheckExpirationDate">
 						{{ config.isDefaultExpireDateEnforced
 							? t('files_sharing', 'Expiration date (enforced)')
 							: t('files_sharing', 'Set expiration date') }}
 					</NcActionCheckbox>
 					<NcActionInput v-if="hasExpirationDate"
 						ref="expireDate"
-						v-tooltip.auto="{
-							content: errors.expireDate,
-							show: errors.expireDate,
-							trigger: 'manual',
-							defaultContainer: '#app-sidebar'
-						}"
+						:is-native-picker="true"
+						:hide-label="true"
 						class="share-link-expire-date"
 						:class="{ error: errors.expireDate}"
 						:disabled="saving"
-						:lang="lang"
-						:value="share.expireDate"
-						value-type="format"
-						icon="icon-calendar-dark"
+						:value="expireDate"
 						type="date"
-						:disabled-date="disabledDate"
-						@update:value="onExpirationChange">
+						:min="dateTomorrow"
+						:max="dateMaxEnforced"
+						@input="onExpirationChange">
 						{{ t('files_sharing', 'Enter a date') }}
 					</NcActionInput>
 
@@ -371,6 +358,7 @@ export default {
 
 			ExternalLegacyLinkActions: OCA.Sharing.ExternalLinkActions.state,
 			ExternalShareActions: OCA.Sharing.ExternalShareActions.state,
+			isFirstInitOfExpireDate: true,
 		}
 	},
 
@@ -435,20 +423,20 @@ export default {
 					|| !!this.share.expireDate
 			},
 			set(enabled) {
-				let dateString = moment(this.config.defaultExpirationDateString)
-				if (!dateString.isValid()) {
-					dateString = moment()
+				let defaultExpirationDate = this.config.defaultExpirationDate
+				if (!defaultExpirationDate) {
+					defaultExpirationDate = new Date()
 				}
 				this.share.state.expiration = enabled
-					? dateString.format('YYYY-MM-DD')
+					? defaultExpirationDate
 					: ''
 				console.debug('Expiration date status', enabled, this.share.expireDate)
 			},
 		},
 
 		dateMaxEnforced() {
 			return this.config.isDefaultExpireDateEnforced
-				&& moment().add(1 + this.config.defaultExpireDate, 'days')
+				&& new Date(new Date().setDate(new Date().getDate() + 1 + this.config.defaultExpireDate))
 		},
 
 		/**
@@ -613,6 +601,20 @@ export default {
 
 			return this.fileInfo.shareAttributes.some(hasDisabledDownload)
 		},
+
+		/**
+		 * Compute value for expiration input field
+		 * @return {Date}
+		 */
+		expireDate() {
+			if (this.isFirstInitOfExpireDate) {
+				// initial value needs to be set to one day after share.expireDate because the min value of input is dateTomorrow
+				// eslint-disable-next-line vue/no-side-effects-in-computed-properties
+				this.isFirstInitOfExpireDate = false
+				return new Date(new Date().setDate(this.share.expireDate.getDate() + 1))
+			}
+			return this.share.expireDate
+		},
 	},
 
 	methods: {
@@ -631,7 +633,7 @@ export default {
 			if (this.config.isDefaultExpireDateEnforced) {
 				// default is empty string if not set
 				// expiration is the share object key, not expireDate
-				shareDefaults.expiration = this.config.defaultExpirationDateString
+				shareDefaults.expiration = this.config.defaultExpirationDate
 			}
 			if (this.config.enableLinkPasswordByDefault) {
 				shareDefaults.password = await GeneratePassword()
@@ -873,6 +875,14 @@ export default {
 			// YET. We can safely delete the share :)
 			this.$emit('remove:share', this.share)
 		},
+
+		/**
+		 * Process unchecking of checkbox for expiration date
+		 */
+		uncheckExpirationDate() {
+			this.isFirstInitOfExpireDate = true
+			return this.onExpirationDisable()
+		},
 	},
 }
 </script>

apps/files_sharing/src/mixins/SharesMixin.js

@@ -97,7 +97,7 @@ export default {
 		},
 
 		dateTomorrow() {
-			return moment().add(1, 'days')
+			return new Date(new Date().setDate(new Date().getDate() + 1))
 		},
 
 		// Datepicker language
@@ -142,7 +142,7 @@ export default {
 				}
 			}
 			if (share.expirationDate) {
-				const date = moment(share.expirationDate)
+				const date = share.expirationDate
 				if (!date.isValid()) {
 					return false
 				}
@@ -151,16 +151,12 @@ export default {
 		},
 
 		/**
-		 * ActionInput can be a little tricky to work with.
-		 * Since we expect a string and not a Date,
-		 * we need to process the value here
+		 * Save given value to expireDate and trigger queueUpdate
 		 *
-		 * @param {Date} date js date to be parsed by moment.js
+		 * @param {Date} date
 		 */
 		onExpirationChange(date) {
-			// format to YYYY-MM-DD
-			const value = moment(date).format('YYYY-MM-DD')
-			this.share.expireDate = value
+			this.share.expireDate = date
 			this.queueUpdate('expireDate')
 		},
 
@@ -318,17 +314,5 @@ export default {
 		debounceQueueUpdate: debounce(function(property) {
 			this.queueUpdate(property)
 		}, 500),
-
-		/**
-		 * Returns which dates are disabled for the datepicker
-		 *
-		 * @param {Date} date date to check
-		 * @return {boolean}
-		 */
-		disabledDate(date) {
-			const dateMoment = moment(date)
-			return (this.dateTomorrow && dateMoment.isBefore(this.dateTomorrow, 'day'))
-				|| (this.dateMaxEnforced && dateMoment.isSameOrAfter(this.dateMaxEnforced, 'day'))
-		},
 	},
 }

apps/files_sharing/src/models/Share.js

@@ -248,7 +248,7 @@ export default class Share {
 	}
 
 	/**
-	 * Get the expiration date as a string format
+	 * Get the expiration date
 	 *
 	 * @return {string}
 	 * @readonly
@@ -259,10 +259,9 @@ export default class Share {
 	}
 
 	/**
-	 * Set the expiration date as a string format
-	 * e.g. YYYY-MM-DD
+	 * Set the expiration date
 	 *
-	 * @param {string} date the share expiration date
+	 * @param {Date||string} date the share expiration date
 	 * @memberof Share
 	 */
 	set expireDate(date) {