Show relative date in ocDatePicker

packages/design-system/src/components/OcDatepicker/OcDatepicker.vue

@@ -4,19 +4,21 @@
     v-bind="$attrs"
     :label="label"
     type="date"
+    class="oc-date-picker"
     :min="minDate?.toISODate()"
     :fix-message-line="true"
-    :error-message="errorMessage"
     :clear-button-enabled="isClearable"
     :clear-button-accessible-label="$gettext('Clear date')"
-    class="oc-date-picker"
+    :error-message="inputErrorMessage"
+    :description-message="inputDescriptionMessage"
   />
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { DateTime } from 'luxon'
+
 export default defineComponent({
   name: 'OcDatepicker',
   status: 'ready',
@@ -25,7 +27,8 @@ export default defineComponent({
     label: { type: String, required: true },
     isClearable: { type: Boolean, default: true },
     currentDate: { type: Object as PropType<DateTime>, required: false, default: null },
-    minDate: { type: Object as PropType<DateTime>, required: false, default: null }
+    minDate: { type: Object as PropType<DateTime>, required: false, default: null },
+    errorMessage: { type: String, required: false, default: '' }
   },
   emits: ['dateChanged'],
   setup(props, { emit }) {
@@ -37,14 +40,28 @@ export default defineComponent({
       return date.isValid ? date : null
     })
 
+    const inputDescriptionMessage = computed(() => {
+      if (!unref(date) || unref(inputErrorMessage)) {
+        return ''
+      }
+
+      return unref(date)
+        .setLocale((current || '').split('_')[0])
+        .toRelative()
+    })
+
     const isMinDateUndercut = computed(() => {
       if (!props.minDate || !unref(date)) {
         return false
       }
       return unref(date) < props.minDate
     })
 
-    const errorMessage = computed(() => {
+    const inputErrorMessage = computed(() => {
+      if (props.errorMessage) {
+        return props.errorMessage
+      }
+
       if (unref(isMinDateUndercut)) {
         return $gettext('The date must be after %{date}', {
           date: props.minDate
@@ -74,7 +91,8 @@ export default defineComponent({
 
     return {
       dateInputString,
-      errorMessage
+      inputDescriptionMessage,
+      inputErrorMessage
     }
   }
 })

packages/web-pkg/src/components/CreateLinkModal.vue

@@ -32,8 +32,7 @@
       type="password"
       :password-policy="!selectedLinkTypeIsInternal ? passwordPolicy : null"
       :generate-password-method="generatePasswordMethod"
-      :error-message="password.error"
-      :description-message="
+      :error-message="
         selectedLinkTypeIsInternal
           ? $gettext('Password cannot be set for internal links')
           : undefined
@@ -53,7 +52,7 @@
       :min-date="DateTime.now()"
       :label="$gettext('Expiry date')"
       :disabled="selectedLinkTypeIsInternal"
-      :description-message="
+      :error-message="
         selectedLinkTypeIsInternal
           ? $gettext('Expiry date cannot be set for internal links')
           : undefined