From 6cb9068cd709b904e19a7ae06bd616ae1bce1993 Mon Sep 17 00:00:00 2001
From: Alex <jan.alexander.ackermann@outlook.com>
Date: Thu, 22 Aug 2024 12:51:48 +0200
Subject: [PATCH] Remove v-calender replace with native browser input date
 field for expiryDates (#11377)

---
 ...lace-custom-datepicker-with-native-element |   7 +
 packages/design-system/package.json           |   5 +-
 .../OcDatepicker/OcDatepicker.spec.ts         |  52 ++--
 .../components/OcDatepicker/OcDatepicker.vue  | 186 ++++++--------
 .../__snapshots__/OcDatepicker.spec.ts.snap   |  14 ++
 .../components/OcTextInput/OcTextInput.vue    |   1 +
 .../src/styles/theme/helper.scss              |   2 +-
 .../src/components/Modals/DatePickerModal.vue |  59 +++++
 .../Shares/Collaborators/EditDropdown.vue     | 185 +++++---------
 .../ExpirationDatepicker.vue                  | 160 ++++--------
 .../components/SideBar/Shares/FileLinks.vue   |  13 +-
 .../SideBar/Shares/Links/DetailsAndEdit.vue   | 102 ++++----
 .../Shares/Collaborators/EditDropdown.spec.ts |   6 +-
 .../ExpirationDatepicker.spec.ts              | 228 +-----------------
 .../RecipientContainer.spec.ts                |   3 +-
 .../SideBar/Shares/FileLinks.spec.ts          |   1 -
 .../Shares/Links/DetailsAndEdit.spec.ts       |   6 -
 packages/web-client/src/ocs/capabilities.ts   |  19 --
 .../src/components/CreateLinkModal.vue        | 161 ++++---------
 .../web-pkg/src/composables/links/index.ts    |   1 -
 .../composables/links/useExpirationRules.ts   |  15 --
 .../composables/piniaStores/capabilities.ts   |  10 -
 .../src/composables/piniaStores/modals.ts     |   2 +-
 packages/web-pkg/src/helpers/share/index.ts   |   1 -
 packages/web-pkg/src/helpers/share/link.ts    |  42 ----
 .../unit/components/CreateLinkModal.spec.ts   |  88 +++----
 .../tests/unit/helpers/share/link.spec.ts     |  25 --
 pnpm-lock.yaml                                |  40 ---
 .../support/objects/app-files/link/actions.ts |  28 +--
 .../objects/app-files/share/actions.ts        |   2 +-
 .../objects/app-files/share/collaborator.ts   |  23 +-
 31 files changed, 469 insertions(+), 1018 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-replace-custom-datepicker-with-native-element
 create mode 100644 packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
 create mode 100644 packages/web-app-files/src/components/Modals/DatePickerModal.vue
 delete mode 100644 packages/web-pkg/src/composables/links/useExpirationRules.ts
 delete mode 100644 packages/web-pkg/src/helpers/share/link.ts
 delete mode 100644 packages/web-pkg/tests/unit/helpers/share/link.spec.ts

diff --git a/changelog/unreleased/enhancement-replace-custom-datepicker-with-native-element b/changelog/unreleased/enhancement-replace-custom-datepicker-with-native-element
new file mode 100644
index 00000000000..97ed508bdd0
--- /dev/null
+++ b/changelog/unreleased/enhancement-replace-custom-datepicker-with-native-element
@@ -0,0 +1,7 @@
+Enhancement: Replace custom datepicker with native html element
+
+We've replaced the custom datepicker with a native html date input element.
+This change will improve the user experience and accessibility of the datepicker.
+
+https://github.com/owncloud/web/pull/11377
+https://github.com/owncloud/web/issues/11374
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 6cf9a8b165c..ce63c7b3f31 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -103,7 +103,6 @@
     "typescript": "5.5.3",
     "url": "^0.11.3",
     "url-loader": "^4.1.1",
-    "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
     "vue": "3.4.21",
     "vue-inline-svg": "3.1.2",
     "vue-loader": "^17.4.2",
@@ -129,11 +128,11 @@
     "focus-trap-vue": "^4.0.1",
     "postcss-import": "^16.0.0",
     "tippy.js": "^6.3.7",
-    "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
     "vue": "3.4.21",
     "vue-inline-svg": "3.1.2",
     "vue-select": "^3.12.0",
-    "webfontloader": "^1.6.28"
+    "webfontloader": "^1.6.28",
+    "luxon": "3.2.1"
   },
   "engines": {
     "node": ">= 14.0.0",
diff --git a/packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts b/packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts
index 639187f1e3f..ae6e9549235 100644
--- a/packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts
+++ b/packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts
@@ -1,23 +1,41 @@
-import { defineComponent } from 'vue'
 import Datepicker from './OcDatepicker.vue'
-import { mount } from 'web-test-helpers'
+import { ComponentProps, defaultPlugins, shallowMount } from 'web-test-helpers'
+import { DateTime } from 'luxon'
+import { nextTick } from 'vue'
 
-const DatePickerComponent = defineComponent({
-  template: '<div id="foo"><slot></slot></div>'
+describe('OcDatePicker', () => {
+  it('renders', () => {
+    const wrapper = getWrapper({ label: 'Datepicker label' })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  it('sets the initial date correctly', async () => {
+    const wrapper = getWrapper({ label: 'Datepicker label', currentDate: DateTime.now() })
+    await nextTick()
+    const inputEl = wrapper.find('.oc-text-input').element as HTMLInputElement
+    expect(inputEl.value).toEqual(DateTime.now().toISODate())
+  })
+  it('sets the minimum date correctly', async () => {
+    const wrapper = getWrapper({ label: 'Datepicker label', minDate: DateTime.now() })
+    await nextTick()
+    const inputEl = wrapper.find('.oc-text-input')
+    expect(inputEl.attributes('min')).toEqual(DateTime.now().toISODate())
+  })
+  it('emits event on date change', async () => {
+    const wrapper = getWrapper({ label: 'Datepicker label' })
+    const inputEl = wrapper.find('.oc-text-input')
+    await inputEl.setValue(DateTime.now().toISODate())
+    expect(wrapper.emitted('dateChanged')).toBeTruthy()
+  })
 })
 
-describe('OcDatePicker', () => {
-  it('renders default scoped slot', () => {
-    const slotDefault = "<button id='default-slot'>Open datepicker</button>"
-    const wrapper = mount(Datepicker, {
-      slots: { default: slotDefault },
-      props: { value: null },
-      global: {
-        renderStubDefaultSlot: true,
-        stubs: { DatePicker: DatePickerComponent }
+function getWrapper(props: ComponentProps<typeof Datepicker>) {
+  return shallowMount(Datepicker, {
+    props,
+    global: {
+      plugins: [...defaultPlugins()],
+      stubs: {
+        OcTextInput: false
       }
-    })
-
-    expect(wrapper.find('#default-slot').exists()).toBeTruthy()
+    }
   })
-})
+}
diff --git a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue
index e6bd8a3b239..e7cecc22afc 100644
--- a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue
+++ b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue
@@ -1,145 +1,113 @@
 <template>
-  <date-picker ref="datePicker" class="oc-datepicker" v-bind="$attrs" :popover="popperOpts">
-    <template #default="args">
-      <!-- @slot Default slot to use as the popover anchor for datepicker -->
-      <!-- args is undefined during initial render, hence we check it here -->
-      <slot
-        v-if="args"
-        :input-value="args.inputValue"
-        :toggle-popover="args.togglePopover"
-        :hide-popover="args.hidePopover"
-      />
-    </template>
-  </date-picker>
+  <oc-text-input
+    v-model="dateInputString"
+    v-bind="$attrs"
+    :label="label"
+    type="date"
+    :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"
+  />
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  ComponentPublicInstance,
-  defineComponent,
-  defineAsyncComponent,
-  ref,
-  unref,
-  watch
-} from 'vue'
-import { Modifier } from '@popperjs/core'
-import 'v-calendar/dist/style.css'
-import OcSpinner from '../OcSpinner/OcSpinner.vue'
-
-/**
- * Datepicker component based on [v-calendar](https://vcalendar.io/). For detailed documentation, please visit https://vcalendar.io/vue-3.html
- */
+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',
   release: '1.0.0',
+  props: {
+    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 }
+  },
+  emits: ['dateChanged'],
+  setup(props, { emit }) {
+    const { $gettext, current } = useGettext()
+    const dateInputString = ref<string>('')
 
-  components: {
-    DatePicker: defineAsyncComponent({
-      loader: async () => {
-        const { DatePicker } = await import('v-calendar')
-        return DatePicker
-      },
-      loadingComponent: OcSpinner
+    const date = computed(() => {
+      const date = DateTime.fromISO(unref(dateInputString)).endOf('day')
+      return date.isValid ? date : null
     })
-  },
 
-  inheritAttrs: true,
-  setup() {
-    const datePicker = ref<ComponentPublicInstance>()
+    const isMinDateUndercut = computed(() => {
+      if (!props.minDate || !unref(date)) {
+        return false
+      }
+      return unref(date) < props.minDate
+    })
 
-    const popperOpts = computed(() => {
-      return {
-        modifiers: [
-          {
-            name: 'fixVerticalPosition',
-            enabled: true,
-            phase: 'beforeWrite',
-            requiresIfExists: ['offset', 'flip'],
-            fn({ state }) {
-              const dropHeight =
-                state.modifiersData.fullHeight || state.elements.popper.offsetHeight
-              const rect = state.elements.popper.getBoundingClientRect()
-              const neededScreenSpace =
-                (state.elements.reference as HTMLElement).offsetHeight + rect.top + dropHeight
+    const errorMessage = computed(() => {
+      if (unref(isMinDateUndercut)) {
+        return $gettext('The date must be after %{date}', {
+          date: props.minDate
+            .minus({ day: 1 })
+            .setLocale(current)
+            .toLocaleString(DateTime.DATE_SHORT)
+        })
+      }
+      return ''
+    })
 
-              if (state.placement !== 'top-start' && neededScreenSpace > window.innerHeight) {
-                state.styles.popper.top = `-${150}px`
-              }
-            }
-          } as Modifier<'fixVerticalPosition', unknown>
-        ]
+    onMounted(() => {
+      if (props.currentDate) {
+        dateInputString.value = props.currentDate.toISODate()
       }
     })
 
     watch(
-      datePicker,
+      date,
       () => {
-        if (unref(datePicker)) {
-          // for e2e tests
-          unref(datePicker).$el.__datePicker = unref(datePicker)
-        }
+        emit('dateChanged', { date: unref(date), error: unref(isMinDateUndercut) })
       },
-      { immediate: true }
+      {
+        deep: true
+      }
     )
 
-    return { popperOpts, datePicker }
+    return {
+      dateInputString,
+      errorMessage
+    }
   }
 })
 </script>
-
 <style lang="scss">
-.vc-pane-layout {
-  color: var(--oc-color-text-default) !important;
-  background-color: var(--oc-color-background-default) !important;
-}
-.vc-arrow svg path {
-  fill: var(--oc-color-text-default) !important;
-}
-.vc-title {
-  color: var(--oc-color-text-default) !important;
-}
-.vc-weekday {
-  color: var(--oc-color-text-muted) !important;
-}
-.vc-day {
-  color: var(--oc-color-text-default) !important;
-  font-weight: var(--oc-font-weight-bold);
-}
-
-.vc-highlights {
-  .vc-highlight {
-    background-color: var(--oc-color-swatch-primary-default) !important;
-  }
-  + span {
-    color: var(--oc-color-text-inverse) !important;
+.oc-date-picker {
+  input::-webkit-calendar-picker-indicator {
+    cursor: pointer;
   }
 }
-
-.vc-day-content.is-disabled {
-  color: var(--oc-color-text-muted) !important;
-  background: none;
-  cursor: not-allowed;
-  font-weight: var(--oc-font-weight-extralight);
-}
 </style>
 <docs>
 ```js
 <template>
-<div>
-  <oc-datepicker v-model="date">
-    <template #default="{ togglePopover }">
-      <oc-button @click="togglePopover">Open datepicker</oc-button>
-    </template>
-  </oc-datepicker>
-  <p v-if="date" v-text="date" />
-</div>
+  <div>
+    <oc-datepicker :current-date="currentDate" :min-date="minDate" label="Enter or pick a date"
+                   @date-changed="onDateChanged"/>
+    <p v-if="selectedDate" v-text="selectedDate"/>
+  </div>
 </template>
 <script>
-export default {
-  data: () => ({ date: null })
-}
+  import {DateTime} from "luxon";
+
+  export default {
+    data: () => ({
+      minDate: DateTime.now(), currentDate: DateTime.now(), selectedDate: ''
+    }),
+    methods: {
+      onDateChanged({date}) {
+        this.selectedDate = date ? date.toLocaleString(DateTime.DATE_FULL) : ''
+      }
+    }
+  }
 </script>
 ```
 </docs>
diff --git a/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap b/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
new file mode 100644
index 00000000000..606ae88f560
--- /dev/null
+++ b/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`OcDatePicker > renders 1`] = `
+"<div class="oc-date-picker"><label class="oc-label" for="oc-textinput-1">Datepicker label</label>
+  <div class="oc-position-relative">
+    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date">
+    <!--v-if-->
+  </div>
+  <div class="oc-text-input-message">
+    <!--v-if--> <span id="oc-textinput-1-message" class=""></span>
+  </div>
+  <!--v-if-->
+</div>"
+`;
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index c07a37ce4a1..bbbff38a19f 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -36,6 +36,7 @@
         v-if="showClearButton"
         :aria-label="clearButtonAccessibleLabelValue"
         class="oc-pr-s oc-position-center-right oc-text-input-btn-clear"
+        :class="{ 'oc-mr-l': type === 'date' }"
         appearance="raw"
         @click="onClear"
       >
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index 2bded768fde..dec68546488 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -114,7 +114,7 @@ hr {
 }
 
 // outline for visible focus (via tab)
-*:focus-visible:not(input[type=text]):not(input[type=textarea]):not(input[type=search]):not(input[type=password]):not(input[type=email]) {
+*:focus-visible:not(input[type=text]):not(input[type=textarea]):not(input[type=search]):not(input[type=password]):not(input[type=email]):not(input[type=date]) {
   outline: 2px var(--oc-color-swatch-passive-contrast) solid;
   outline-offset: 0;
   box-shadow: 0 0 0 4px var(--oc-color-swatch-passive-default);
diff --git a/packages/web-app-files/src/components/Modals/DatePickerModal.vue b/packages/web-app-files/src/components/Modals/DatePickerModal.vue
new file mode 100644
index 00000000000..4ace3be2e6f
--- /dev/null
+++ b/packages/web-app-files/src/components/Modals/DatePickerModal.vue
@@ -0,0 +1,59 @@
+<template>
+  <oc-datepicker
+    :label="$gettext('Expiration date')"
+    type="date"
+    :min-date="minDate"
+    :current-date="currentDate"
+    :is-clearable="isClearable"
+    @date-changed="onDateChanged"
+  />
+
+  <div class="link-modal-actions oc-flex oc-flex-right oc-flex-middle oc-mt-s">
+    <oc-button
+      class="oc-modal-body-actions-cancel oc-ml-s"
+      appearance="outline"
+      variation="passive"
+      @click="$emit('cancel')"
+      >{{ $gettext('Cancel') }}
+    </oc-button>
+    <oc-button
+      :disabled="confirmDisabled"
+      class="oc-modal-body-actions-confirm oc-ml-s"
+      appearance="filled"
+      variation="primary"
+      @click="$emit('confirm', dateTime)"
+      >{{ $gettext('Confirm') }}
+    </oc-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue'
+import { Modal } from '@ownclouders/web-pkg'
+import { DateTime } from 'luxon'
+
+export default defineComponent({
+  name: 'DatePickerModal',
+  props: {
+    modal: { type: Object as PropType<Modal>, required: true },
+    currentDate: { type: Object as PropType<DateTime>, required: false, default: null },
+    minDate: { type: Object as PropType<DateTime>, required: false, default: null },
+    isClearable: { type: Boolean, default: true }
+  },
+  emits: ['confirm', 'cancel'],
+  setup() {
+    const dateTime = ref<DateTime>()
+    const confirmDisabled = ref(true)
+    const onDateChanged = ({ date, error }: { date: DateTime; error: boolean }) => {
+      confirmDisabled.value = error || !date
+      dateTime.value = date
+    }
+
+    return {
+      confirmDisabled,
+      onDateChanged,
+      dateTime
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index cd2327d25c5..335bb069b46 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -20,43 +20,36 @@
       padding-size="small"
     >
       <oc-list class="collaborator-edit-dropdown-options-list" :aria-label="shareEditOptions">
-        <li v-if="canEditOrDelete && isExpirationSupported" class="oc-rounded oc-menu-item-hover">
-          <oc-datepicker
-            v-model="enteredExpirationDate"
-            :min-date="minExpirationDate"
-            :max-date="maxExpirationDate"
-            :locale="$language.current"
-            :is-required="isExpirationDateEnforced"
-            class="files-recipient-expiration-datepicker oc-flex"
-            data-testid="recipient-datepicker"
-          >
-            <template #default="{ togglePopover }">
-              <oc-button
-                class="files-collaborators-expiration-button oc-p-s action-menu-item"
-                data-testid="recipient-datepicker-btn"
-                appearance="raw"
-                @click="togglePopover"
-              >
-                <oc-icon name="calendar-event" fill-type="line" size="medium" variation="passive" />
-                <span
-                  v-if="isExpirationDateSet"
-                  class="oc-ml-s"
-                  v-text="$gettext('Expires %{expires}', { expires: dateExpire })"
-                />
-                <span v-else v-text="$gettext('Set expiration date')" />
-              </oc-button>
-              <oc-button
-                v-if="isRemoveExpirationPossible"
-                class="remove-expiration-date"
-                data-testid="collaborator-remove-expiration-btn"
-                appearance="raw"
-                :aria-label="$gettext('Remove expiration date')"
-                @click="removeExpirationDate"
-              >
-                <oc-icon name="close" />
-              </oc-button>
-            </template>
-          </oc-datepicker>
+        <li
+          v-if="canEditOrDelete && isExpirationSupported"
+          class="oc-rounded oc-menu-item-hover files-collaborators-expiration"
+        >
+          <div class="oc-flex">
+            <oc-button
+              class="files-collaborators-expiration-button oc-p-s action-menu-item"
+              data-testid="recipient-datepicker-btn"
+              appearance="raw"
+              @click="showDatePickerModal"
+            >
+              <oc-icon name="calendar-event" fill-type="line" size="medium" variation="passive" />
+              <span
+                v-if="isExpirationDateSet"
+                class="oc-ml-s"
+                v-text="$gettext('Expires %{expires}', { expires: dateExpire })"
+              />
+              <span v-else v-text="$gettext('Set expiration date')" />
+            </oc-button>
+            <oc-button
+              v-if="isRemoveExpirationPossible"
+              class="remove-expiration-date"
+              data-testid="collaborator-remove-expiration-btn"
+              appearance="raw"
+              :aria-label="$gettext('Remove expiration date')"
+              @click="removeExpirationDate"
+            >
+              <oc-icon name="close" />
+            </oc-button>
+          </div>
         </li>
         <li v-for="(option, i) in options" :key="i" class="oc-rounded oc-menu-item-hover">
           <template v-if="option.enabled">
@@ -98,13 +91,9 @@ import uniqueId from 'design-system/src/utils/uniqueId'
 import { OcDrop } from 'design-system/src/components'
 import { Resource } from '@ownclouders/web-client'
 import { isProjectSpaceResource } from '@ownclouders/web-client'
-import {
-  formatRelativeDateFromDateTime,
-  useCapabilityStore,
-  useConfigStore
-} from '@ownclouders/web-pkg'
+import { formatRelativeDateFromDateTime, useConfigStore, useModals } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
-import { storeToRefs } from 'pinia'
+import DatePickerModal from '../../../Modals/DatePickerModal.vue'
 
 export default defineComponent({
   name: 'EditDropdown',
@@ -147,11 +136,10 @@ export default defineComponent({
     'notifyShare'
   ],
   setup(props, { emit }) {
-    const capabilityStore = useCapabilityStore()
-    const capabilityRefs = storeToRefs(capabilityStore)
     const language = useGettext()
     const { $gettext } = language
     const configStore = useConfigStore()
+    const { dispatchModal } = useModals()
 
     const toggleShareDenied = (value: boolean) => {
       emit('setDenyShare', value)
@@ -177,14 +165,8 @@ export default defineComponent({
       resource: inject<Ref<Resource>>('resource'),
       toggleShareDenied,
       dateExpire,
-      userExpirationDate: capabilityRefs.sharingUserExpireDate,
-      groupExpirationDate: capabilityRefs.sharingGroupExpireDate,
-      dropButtonTooltip
-    }
-  },
-  data: function () {
-    return {
-      enteredExpirationDate: null
+      dropButtonTooltip,
+      dispatchModal
     }
   },
   computed: {
@@ -251,87 +233,10 @@ export default defineComponent({
     },
 
     isRemoveExpirationPossible() {
-      return (
-        this.canEditOrDelete &&
-        this.isExpirationSupported &&
-        this.isExpirationDateSet &&
-        !this.isExpirationDateEnforced
-      )
-    },
-
-    isDefaultExpirationEnabled() {
-      if (this.editingUser) {
-        return this.userExpirationDate.enabled
-      }
-
-      if (this.editingGroup) {
-        return this.groupExpirationDate.enabled
-      }
-
-      return this.userExpirationDate.enabled || this.groupExpirationDate.enabled
-    },
-
-    defaultExpirationDate() {
-      if (!this.isDefaultExpirationEnabled) {
-        return null
-      }
-
-      const userMaxExpirationDays = parseInt(this.userExpirationDate.days)
-      const groupMaxExpirationDays = parseInt(this.groupExpirationDate.days)
-      let days = 0
-
-      if (this.editingUser) {
-        days = userMaxExpirationDays
-      } else if (this.editingGroup) {
-        days = groupMaxExpirationDays
-      } else if (userMaxExpirationDays && groupMaxExpirationDays) {
-        days = Math.min(userMaxExpirationDays, groupMaxExpirationDays)
-      } else {
-        days = userMaxExpirationDays || groupMaxExpirationDays
-      }
-
-      const date = new Date()
-      date.setDate(new Date().getDate() + days)
-      return date
-    },
-
-    isExpirationDateEnforced() {
-      if (this.editingUser) {
-        return this.userExpirationDate?.enforced
-      }
-
-      if (this.editingGroup) {
-        return this.groupExpirationDate?.enforced
-      }
-
-      return this.userExpirationDate?.enforced || this.groupExpirationDate?.enforced
-    },
-
-    maxExpirationDate() {
-      if (!this.isExpirationDateEnforced) {
-        return null
-      }
-      return this.defaultExpirationDate
-    },
-
-    minExpirationDate() {
-      const date = new Date()
-      date.setDate(new Date().getDate() + 1)
-      return date
-    }
-  },
-  watch: {
-    enteredExpirationDate: {
-      handler: 'updateExpirationDate'
+      return this.canEditOrDelete && this.isExpirationSupported && this.isExpirationDateSet
     }
   },
   methods: {
-    updateExpirationDate() {
-      this.$emit('expirationDateChanged', {
-        expirationDateTime: DateTime.fromJSDate(this.enteredExpirationDate).endOf('day').toISO()
-      })
-      ;(this.$refs.expirationDateDrop as InstanceType<typeof OcDrop>).hide()
-    },
     removeExpirationDate() {
       this.$emit('expirationDateChanged', { expirationDateTime: null })
       ;(this.$refs.expirationDateDrop as InstanceType<typeof OcDrop>).hide()
@@ -341,6 +246,24 @@ export default defineComponent({
     },
     showAccessDetails() {
       this.$emit('showAccessDetails')
+    },
+    showDatePickerModal() {
+      const currentDate = DateTime.fromISO(this.expirationDate)
+
+      this.dispatchModal({
+        title: this.$gettext('Set expiration date'),
+        hideActions: true,
+        customComponent: DatePickerModal,
+        customComponentAttrs: () => ({
+          currentDate: currentDate.isValid ? currentDate : null,
+          minDate: DateTime.now()
+        }),
+        onConfirm: (expirationDateTime: DateTime) => {
+          this.$emit('expirationDateChanged', {
+            expirationDateTime
+          })
+        }
+      })
     }
   }
 })
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
index 24ec903aa39..88ef23c5258 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
@@ -1,58 +1,44 @@
 <template>
   <div class="oc-flex oc-flex-middle oc-flex-nowrap">
-    <oc-datepicker
-      v-model="dateCurrent"
-      :min-date="dateMin"
-      :max-date="dateMax"
-      :locale="language.current"
-      :is-required="enforced"
-      class="files-recipient-expiration-datepicker oc-width-1-1"
-      data-testid="recipient-datepicker"
-    >
-      <template #default="{ togglePopover }">
-        <oc-button
-          class="files-collaborators-expiration-button oc-p-s action-menu-item"
-          data-testid="recipient-datepicker-btn"
-          appearance="raw"
-          gap-size="none"
-          :aria-label="
-            dateCurrent ? $gettext('Edit expiration date') : $gettext('Set expiration date')
-          "
-          @click="togglePopover"
-        >
-          <oc-icon name="calendar-event" fill-type="line" size="medium" variation="passive" />
-          <span
-            v-if="!dateCurrent"
-            key="no-expiration-date-label"
-            v-text="$gettext('Set expiration date')"
-          />
-          <span
-            v-else
-            key="set-expiration-date-label"
-            v-text="$gettext('Expires %{expires}', { expires: dateExpire })"
-          />
-        </oc-button>
-      </template>
-    </oc-datepicker>
     <oc-button
-      v-if="!enforced && dateCurrent"
-      class="recipient-edit-expiration-btn-remove"
+      data-testid="recipient-datepicker-btn"
+      class="files-collaborators-expiration-button oc-p-s action-menu-item"
       appearance="raw"
-      :aria-label="$gettext('Remove expiration date')"
-      @click="dateCurrent = null"
+      gap-size="none"
+      :aria-label="dateCurrent ? $gettext('Edit expiration date') : $gettext('Set expiration date')"
+      @click="showDatePickerModal"
     >
-      <oc-icon name="close" />
+      <oc-icon name="calendar-event" fill-type="line" size="medium" variation="passive" />
+      <span
+        v-if="!dateCurrent"
+        key="no-expiration-date-label"
+        v-text="$gettext('Set expiration date')"
+      />
+      <span
+        v-else
+        key="set-expiration-date-label"
+        v-text="$gettext('Expires %{expires}', { expires: dateExpire })"
+      />
     </oc-button>
   </div>
+  <oc-button
+    v-if="dateCurrent"
+    class="recipient-edit-expiration-btn-remove"
+    appearance="raw"
+    :aria-label="$gettext('Remove expiration date')"
+    @click="dateCurrent = null"
+  >
+    <oc-icon name="close" />
+  </oc-button>
 </template>
 
 <script lang="ts">
 import { DateTime } from 'luxon'
-import { computed, watch, defineComponent, customRef, PropType } from 'vue'
-import { useCapabilityStore } from '@ownclouders/web-pkg'
-import { ShareTypes } from '@ownclouders/web-client'
-import { formatRelativeDateFromDateTime, getLocaleFromLanguage } from '@ownclouders/web-pkg'
+import { computed, watch, defineComponent, customRef, PropType, unref } from 'vue'
+import { useModals } from '@ownclouders/web-pkg'
+import { formatRelativeDateFromDateTime } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
+import DatePickerModal from '../../../../Modals/DatePickerModal.vue'
 
 export default defineComponent({
   name: 'DateCurrentpicker',
@@ -66,91 +52,51 @@ export default defineComponent({
   emits: ['optionChange'],
   setup(props, { emit }) {
     const language = useGettext()
-    const capabilityStore = useCapabilityStore()
-
-    const optionsUser = computed(() => capabilityStore.sharingUserExpireDate)
-    const optionsGroup = computed(() => capabilityStore.sharingGroupExpireDate)
-    const enforced = computed(() => optionsUser.value?.enforced || optionsGroup.value?.enforced)
-    const dateMin = DateTime.now().setLocale(language.current).toJSDate()
-    const dateDefault = computed(() => {
-      const hasUserCollaborators = props.shareTypes.includes(ShareTypes.user.value)
-      const hasGroupCollaborators = props.shareTypes.includes(ShareTypes.group.value)
-      const userMaxExpirationDays = parseInt(optionsUser.value?.days)
-      const groupMaxExpirationDays = parseInt(optionsGroup.value?.days)
-
-      if (!(optionsUser.value?.enabled || optionsGroup.value?.enabled)) {
-        return null
-      }
-
-      let days = 0
-      if (
-        userMaxExpirationDays &&
-        hasUserCollaborators &&
-        groupMaxExpirationDays &&
-        hasGroupCollaborators
-      ) {
-        days = Math.min(userMaxExpirationDays, groupMaxExpirationDays)
-      } else if (userMaxExpirationDays && hasUserCollaborators) {
-        days = userMaxExpirationDays
-      } else if (groupMaxExpirationDays && hasGroupCollaborators) {
-        days = groupMaxExpirationDays
-      }
-
-      if (!days) {
-        return null
-      }
+    const { dispatchModal } = useModals()
 
-      return DateTime.now()
-        .setLocale(getLocaleFromLanguage(language.current))
-        .plus({ days })
-        .toJSDate()
-    })
-    const dateMax = computed(() => (enforced.value ? dateDefault.value : null))
-    const dateCurrent = customRef<Date>((track, trigger) => {
-      let date: Date = null
+    const dateCurrent = customRef<DateTime>((track, trigger) => {
+      let date: DateTime = null
       return {
         get() {
           track()
-          return date || dateDefault.value
+          return date
         },
-        set(val) {
+        set(val: DateTime) {
           date = val
           trigger()
         }
       }
     })
     const dateExpire = computed(() =>
-      formatRelativeDateFromDateTime(
-        DateTime.fromJSDate(dateCurrent.value).endOf('day'),
-        language.current
-      )
+      formatRelativeDateFromDateTime(dateCurrent.value.endOf('day'), language.current)
     )
 
-    watch(dateCurrent, (val) => {
-      const dateCurrent = DateTime.fromJSDate(val)
-        .setLocale(getLocaleFromLanguage(language.current))
-        .endOf('day')
+    const showDatePickerModal = () => {
+      dispatchModal({
+        title: language.$gettext('Set expiration date'),
+        hideActions: true,
+        customComponent: DatePickerModal,
+        customComponentAttrs: () => ({
+          currentDate: unref(dateCurrent),
+          minDate: DateTime.now()
+        }),
+        onConfirm: (expirationDateTime: DateTime) => {
+          dateCurrent.value = expirationDateTime
+        }
+      })
+    }
 
+    watch(dateCurrent, () => {
       emit('optionChange', {
-        expirationDate: dateCurrent.isValid ? dateCurrent.toString() : null
+        expirationDate: unref(dateCurrent).isValid ? dateCurrent.value : null
       })
     })
 
-    watch(dateMax, (val) => {
-      if (!val || dateCurrent.value < val) {
-        return
-      }
-
-      dateCurrent.value = val
-    })
-
     return {
       language,
-      enforced,
       dateCurrent,
-      dateMin,
-      dateMax,
-      dateExpire
+      dateExpire,
+      showDatePickerModal
     }
   }
 })
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index 07352f6f41b..5858f3d6992 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -14,13 +14,11 @@
       <name-and-copy v-if="quicklink" :link-share="quicklink" />
       <create-quick-link
         v-else-if="canCreateLinks({ space, resource })"
-        :expiration-rules="expirationRules"
         @create-public-link="addNewLink(true)"
       />
       <details-and-edit
         v-if="quicklink"
         :can-rename="false"
-        :expiration-rules="expirationRules"
         :is-folder-share="resource.isFolder"
         :is-modifiable="canEditLink(quicklink)"
         :is-password-enforced="isPasswordEnforcedForLinkType(quicklink.type)"
@@ -52,7 +50,6 @@
         <name-and-copy :link-share="link" />
         <details-and-edit
           :can-rename="true"
-          :expiration-rules="expirationRules"
           :is-folder-share="resource.isFolder"
           :is-modifiable="canEditLink(link)"
           :is-password-enforced="isPasswordEnforcedForLinkType(link.type)"
@@ -84,12 +81,7 @@
           :data-testid="`files-link-id-${link.id}`"
         >
           <name-and-copy :link-share="link" />
-          <details-and-edit
-            :expiration-rules="expirationRules"
-            :is-folder-share="true"
-            :is-modifiable="false"
-            :link-share="link"
-          />
+          <details-and-edit :is-folder-share="true" :is-modifiable="false" :link-share="link" />
         </li>
       </oc-list>
       <div class="oc-flex oc-flex-center">
@@ -108,7 +100,6 @@
 import { computed, defineComponent, inject, ref, Ref, unref } from 'vue'
 import {
   useAbility,
-  useExpirationRules,
   useFileActionsCreateLink,
   FileAction,
   useClientService,
@@ -143,7 +134,6 @@ export default defineComponent({
     const ability = useAbility()
     const clientService = useClientService()
     const { can } = ability
-    const { expirationRules } = useExpirationRules()
     const { dispatchModal } = useModals()
     const { removeResources } = useResourcesStore()
     const { isPasswordEnforcedForLinkType } = useLinkTypes()
@@ -261,7 +251,6 @@ export default defineComponent({
       configOptions,
       canCreateLinks,
       canEditLink,
-      expirationRules,
       handleLinkUpdate,
       addNewLink,
       dispatchModal,
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 7ae1d9707ec..08a7a6ae268 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -83,37 +83,27 @@
               :key="`public-link-edit-option-${i}`"
               class="oc-rounded oc-menu-item-hover"
             >
-              <oc-datepicker
-                v-if="option.showDatepicker"
-                v-model="newExpiration"
-                class="link-expiry-picker oc-flex oc-width-1-1"
-                :min-date="expirationRules.min"
-                :max-date="expirationRules.max"
-                :locale="$language.current"
-                :is-required="expirationRules.enforced"
-              >
-                <template #default="{ togglePopover }">
-                  <oc-button
-                    :data-testid="`files-link-id-${linkShare.id}-edit-${option.id}`"
-                    appearance="raw"
-                    class="oc-p-s action-menu-item"
-                    :variation="option.variation"
-                    @click="togglePopover"
-                  >
-                    <oc-icon :name="option.icon" fill-type="line" size="medium" />
-                    <span v-text="option.title" />
-                  </oc-button>
-                  <oc-button
-                    v-if="option.remove && option.remove.isRemovable"
-                    :data-testid="`files-link-id-${linkShare.id}-edit-${option.id}`"
-                    :aria-label="option.remove.title"
-                    appearance="raw"
-                    @click="option.remove.method"
-                  >
-                    <oc-icon :name="option.remove.icon" />
-                  </oc-button>
-                </template>
-              </oc-datepicker>
+              <div v-if="option.showDatepicker" class="oc-flex">
+                <oc-button
+                  :data-testid="`files-link-id-${linkShare.id}-edit-${option.id}`"
+                  appearance="raw"
+                  class="oc-p-s action-menu-item"
+                  :variation="option.variation"
+                  @click="showDatePickerModal"
+                >
+                  <oc-icon :name="option.icon" fill-type="line" size="medium" />
+                  <span v-text="option.title" />
+                </oc-button>
+                <oc-button
+                  v-if="option.remove"
+                  :data-testid="`files-link-id-${linkShare.id}-edit-${option.id}`"
+                  :aria-label="option.remove.title"
+                  appearance="raw"
+                  @click="option.remove.method"
+                >
+                  <oc-icon :name="option.remove.icon" />
+                </oc-button>
+              </div>
               <oc-button
                 v-else
                 appearance="raw"
@@ -168,17 +158,18 @@ import { formatDateFromDateTime, formatRelativeDateFromDateTime } from '@ownclou
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { createFileRouteOptions } from '@ownclouders/web-pkg'
 import { OcDrop } from 'design-system/src/components'
-import { usePasswordPolicyService, ExpirationRules } from '@ownclouders/web-pkg'
+import { usePasswordPolicyService } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import SetLinkPasswordModal from '../../../Modals/SetLinkPasswordModal.vue'
 import { storeToRefs } from 'pinia'
 import { SharingLinkType } from '@ownclouders/web-client/graph/generated'
+import DatePickerModal from '../../../Modals/DatePickerModal.vue'
 
 type EditOption = {
   id: string
   title: string
   icon: string
-  method: () => void
+  method?: () => void
   variation?: string
   remove?: any
   showDatepicker?: boolean
@@ -192,10 +183,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    expirationRules: {
-      type: Object as PropType<ExpirationRules>,
-      required: true
-    },
     isFolderShare: {
       type: Boolean,
       default: false
@@ -264,6 +251,24 @@ export default defineComponent({
       emit('updateLink', { linkShare })
     }
 
+    const showDatePickerModal = () => {
+      const currentDate = DateTime.fromISO(props.linkShare.expirationDateTime)
+
+      dispatchModal({
+        title: $gettext('Set expiration date'),
+        hideActions: true,
+        customComponent: DatePickerModal,
+        customComponentAttrs: () => ({
+          currentDate: currentDate.isValid ? currentDate : null,
+          minDate: DateTime.now()
+        }),
+        onConfirm: (expirationDateTime: DateTime) => {
+          emit('updateLink', {
+            linkShare: { ...props.linkShare, expirationDateTime }
+          })
+        }
+      })
+    }
     const showPasswordModal = (callbackFn: () => void = undefined) => {
       dispatchModal({
         title: props.linkShare.hasPassword ? $gettext('Edit password') : $gettext('Add password'),
@@ -345,7 +350,8 @@ export default defineComponent({
       currentLinkRoleDescription,
       currentLinkRoleLabel,
       viaRouterParams,
-      viaTooltip
+      viaTooltip,
+      showDatePickerModal
     }
   },
   data() {
@@ -370,18 +376,12 @@ export default defineComponent({
         result.push({
           id: 'edit-expiration',
           title: this.$gettext('Expires %{expires}', { expires: this.expirationDateRelative }),
-          method: () => {
-            this.$emit('updateLink', {
-              linkShare: { ...this.linkShare, expirationDateTime: this.dateExpire }
-            })
-          },
           icon: 'calendar-event',
           showDatepicker: true,
           remove: {
             id: 'remove-expiration',
             title: this.$gettext('Remove expiration date'),
             icon: 'close',
-            isRemovable: !this.expirationRules.enforced,
             method: () =>
               this.$emit('updateLink', {
                 linkShare: { ...this.linkShare, expirationDateTime: null }
@@ -454,7 +454,6 @@ export default defineComponent({
 
       return result
     },
-
     deleteOption(): EditOption {
       return {
         id: 'delete',
@@ -464,14 +463,12 @@ export default defineComponent({
         variation: 'danger'
       }
     },
-
     expirationDateRelative() {
       return formatRelativeDateFromDateTime(
         DateTime.fromISO(this.linkShare.expirationDateTime).endOf('day'),
         this.$language.current
       )
     },
-
     expirationDateTooltip() {
       return this.$gettext(
         'Expires %{timeToExpiry} (%{expiryDate})',
@@ -479,11 +476,9 @@ export default defineComponent({
         true
       )
     },
-
     passwortProtectionTooltip() {
       return this.$gettext('This link is password-protected')
     },
-
     currentLinkNotifyUploads() {
       // FIXME cern code
       return undefined
@@ -499,14 +494,6 @@ export default defineComponent({
       return this.$gettext('Notify a third party about uploads')
     }
   },
-  watch: {
-    newExpiration(expirationDateTime: string) {
-      const date = DateTime.fromJSDate(new Date(expirationDateTime))
-      this.$emit('updateLink', {
-        linkShare: { ...this.linkShare, expirationDateTime: date.toString() }
-      })
-    }
-  },
   methods: {
     deleteLink() {
       this.$emit('removePublicLink', { link: this.linkShare })
@@ -532,7 +519,6 @@ export default defineComponent({
         }
       })
     },
-
     toggleNotifyUploads() {
       if (this.currentLinkNotifyUploads) {
         this.$emit('updateLink', {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts
index a1e508f5af2..bc91f0a192f 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts
@@ -7,7 +7,7 @@ import OcButton from 'design-system/src/components/OcButton/OcButton.vue'
 const selectors = {
   editBtn: '.collaborator-edit-dropdown-options-btn',
   removeShareAction: '.remove-share',
-  oCDatepickerStub: 'oc-datepicker-stub',
+  expireDateMenuAction: '.files-collaborators-expiration',
   showAccessDetailsAction: '.show-access-details'
 }
 
@@ -39,11 +39,11 @@ describe('EditDropdown', () => {
   describe('expiration date', () => {
     it('is being rendered when canEditOrDelete is true', () => {
       const { wrapper } = getWrapper({ canEditOrDelete: true })
-      expect(wrapper.find(selectors.oCDatepickerStub).exists()).toBeTruthy()
+      expect(wrapper.find(selectors.expireDateMenuAction).exists()).toBeTruthy()
     })
     it('is not being rendered when canEditOrDelete is false', () => {
       const { wrapper } = getWrapper({ canEditOrDelete: false })
-      expect(wrapper.find(selectors.oCDatepickerStub).exists()).toBeFalsy()
+      expect(wrapper.find(selectors.expireDateMenuAction).exists()).toBeFalsy()
     })
   })
   describe('show access details action', () => {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.spec.ts
index 8ec7a3e8a83..cf68256bf86 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.spec.ts
@@ -1,240 +1,18 @@
 import ExpirationDatepicker from 'web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue'
-import { ShareTypes } from '@ownclouders/web-client'
-import merge from 'lodash-es/merge'
-import { DateTime } from 'luxon'
 import { defaultPlugins, mount } from 'web-test-helpers'
-import { defineComponent, nextTick } from 'vue'
-import { useCapabilityStore } from '@ownclouders/web-pkg'
-
-const bareCapabilities = {
-  user: {
-    expire_date: {}
-  },
-  group: {
-    expire_date: {}
-  }
-}
-
-const enabledCapabilities = merge({}, bareCapabilities, {
-  user: {
-    expire_date: {
-      enabled: true,
-      days: '1'
-    }
-  },
-  group: {
-    expire_date: {
-      enabled: true,
-      days: '2'
-    }
-  }
-})
-
-const enforcedCapabilities = merge({}, enabledCapabilities, {
-  user: {
-    expire_date: {
-      enforced: true
-    }
-  },
-  group: {
-    expire_date: {
-      enforced: true
-    }
-  }
-})
-
-const DatePickerComponent = defineComponent({
-  template: '<div id="foo"><slot></slot></div>'
-})
 
 describe('InviteCollaborator ExpirationDatepicker', () => {
   it('renders a button to open the datepicker and set an expiration date', () => {
-    const { wrapper } = createWrapper({ sharingCapabilities: bareCapabilities })
+    const { wrapper } = createWrapper()
     expect(wrapper.find('[data-testid="recipient-datepicker-btn"]').exists()).toBe(true)
   })
-
-  it('does not allow to select a date from the past', () => {
-    const { wrapper } = createWrapper({
-      sharingCapabilities: bareCapabilities,
-      stubOcDatepicker: true
-    })
-    const minDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes()['min-date']
-    expect(DateTime.now().toISODate()).toBe(DateTime.fromJSDate(new Date(minDate)).toISODate())
-  })
-
-  it('does not set any maximum date if no user or group is selected', () => {
-    const { wrapper } = createWrapper({
-      sharingCapabilities: enabledCapabilities,
-      stubOcDatepicker: true
-    })
-    const maxDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes()['max-date']
-
-    expect(maxDate).toBe(undefined)
-  })
-
-  it('pre selects and enforces the default expiration date for users', async () => {
-    const { wrapper } = createWrapper({
-      sharingCapabilities: enabledCapabilities,
-      stubOcDatepicker: true
-    })
-    await wrapper.setProps({ shareTypes: [ShareTypes.user.value] })
-
-    const selectedDate = wrapper
-      .find('[data-testid="recipient-datepicker"]')
-      .attributes().modelvalue
-    expect(
-      DateTime.now()
-        .plus({ days: Number(enabledCapabilities.user.expire_date.days) })
-        .toISODate()
-    ).toBe(DateTime.fromJSDate(new Date(selectedDate)).toISODate())
-
-    const capabilityStore = useCapabilityStore()
-    capabilityStore.capabilities.files_sharing = enforcedCapabilities
-
-    await nextTick()
-    const maxDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes()['max-date']
-    expect(
-      DateTime.now()
-        .plus({ days: Number(enabledCapabilities.user.expire_date.days) })
-        .toISODate()
-    ).toBe(DateTime.fromJSDate(new Date(maxDate)).toISODate())
-  })
-
-  it('pre selects and enforces the default expiration date for groups', async () => {
-    const { wrapper } = createWrapper({
-      sharingCapabilities: enabledCapabilities,
-      stubOcDatepicker: true
-    })
-    await wrapper.setProps({ shareTypes: [ShareTypes.group.value] })
-    const selectedDate = wrapper
-      .find('[data-testid="recipient-datepicker"]')
-      .attributes().modelvalue
-
-    expect(
-      DateTime.now()
-        .plus({ days: Number(enabledCapabilities.group.expire_date.days) })
-        .toISODate()
-    ).toBe(DateTime.fromJSDate(new Date(selectedDate)).toISODate())
-
-    const capabilityStore = useCapabilityStore()
-    capabilityStore.capabilities.files_sharing = enforcedCapabilities
-
-    await nextTick()
-    const maxDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes()['max-date']
-    expect(
-      DateTime.now()
-        .plus({ days: Number(enabledCapabilities.group.expire_date.days) })
-        .toISODate()
-    ).toBe(DateTime.fromJSDate(new Date(maxDate)).toISODate())
-  })
-
-  it('pre selects and enforces the smallest expiration date if user and group shareTypes are provided', async () => {
-    const { wrapper } = createWrapper({
-      sharingCapabilities: enabledCapabilities,
-      stubOcDatepicker: true
-    })
-    await wrapper.setProps({ shareTypes: [ShareTypes.group.value, ShareTypes.user.value] })
-    const selectedDate = wrapper
-      .find('[data-testid="recipient-datepicker"]')
-      .attributes().modelvalue
-
-    expect(
-      DateTime.now()
-        .plus({ days: Number(enabledCapabilities.user.expire_date.days) })
-        .toISODate()
-    ).toBe(DateTime.fromJSDate(new Date(selectedDate)).toISODate())
-
-    const capabilityStore = useCapabilityStore()
-    capabilityStore.capabilities.files_sharing = enforcedCapabilities
-
-    await nextTick()
-    const maxDate = wrapper.find('[data-testid="recipient-datepicker"]').attributes()['max-date']
-    expect(
-      DateTime.now()
-        .plus({ days: Number(enabledCapabilities.user.expire_date.days) })
-        .toISODate()
-    ).toBe(DateTime.fromJSDate(new Date(maxDate)).toISODate())
-  })
-
-  it('emits an event if date changes', async () => {
-    const { wrapper } = createWrapper({
-      sharingCapabilities: enabledCapabilities,
-      stubOcDatepicker: true
-    })
-    expect(wrapper.emitted('optionChange')).toBeFalsy()
-
-    const capabilityStore = useCapabilityStore()
-    capabilityStore.capabilities.files_sharing = enabledCapabilities
-
-    await wrapper.setProps({ shareTypes: [ShareTypes.user.value] })
-    await nextTick()
-    expect(wrapper.emitted('optionChange').length).toBe(1)
-    expect(
-      DateTime.fromISO(
-        (wrapper.emitted('optionChange')[0][0] as { expirationDate: string }).expirationDate
-      ).toISODate()
-    ).toBe(
-      DateTime.now()
-        .plus({ days: Number(enabledCapabilities.user.expire_date.days) })
-        .toISODate()
-    )
-
-    await wrapper.setProps({ shareTypes: [ShareTypes.group.value] })
-    await nextTick()
-    await nextTick()
-    expect(wrapper.emitted('optionChange').length).toBe(2)
-
-    expect(
-      DateTime.fromISO(
-        (wrapper.emitted('optionChange')[1][0] as { expirationDate: string }).expirationDate
-      ).toISODate()
-    ).toBe(
-      DateTime.now()
-        .plus({ days: Number(enabledCapabilities.group.expire_date.days) })
-        .toISODate()
-    )
-
-    await wrapper.setProps({ shareTypes: [] })
-    await nextTick()
-    expect(wrapper.emitted('optionChange').length).toBe(3)
-    expect(
-      (wrapper.emitted('optionChange')[2][0] as { expirationDate: string }).expirationDate
-    ).toBe(null)
-
-    const manualDate = DateTime.now().plus({ days: 5 })
-    wrapper.vm.dateCurrent = manualDate.toJSDate()
-    await nextTick()
-    expect(wrapper.emitted('optionChange').length).toBe(4)
-    expect(
-      DateTime.fromISO(
-        (wrapper.emitted('optionChange')[3][0] as { expirationDate: string }).expirationDate
-      ).toISODate()
-    ).toBe(manualDate.toISODate())
-
-    wrapper.vm.dateCurrent = null
-    await wrapper.setProps({ shareTypes: [ShareTypes.user.value, ShareTypes.group.value] })
-    await nextTick()
-    expect(wrapper.emitted('optionChange').length).toBe(5)
-    expect(
-      DateTime.fromISO(
-        (wrapper.emitted('optionChange')[4][0] as { expirationDate: string }).expirationDate
-      ).toISODate()
-    ).toBe(
-      DateTime.now()
-        .plus({ days: Number(enabledCapabilities.user.expire_date.days) })
-        .toISODate()
-    )
-  })
 })
 
-const createWrapper = ({ sharingCapabilities = {}, stubOcDatepicker = false } = {}) => {
-  const capabilities = { files_sharing: sharingCapabilities }
-
+const createWrapper = () => {
   return {
     wrapper: mount(ExpirationDatepicker, {
       global: {
-        stubs: { OcDatepicker: stubOcDatepicker, DatePicker: DatePickerComponent },
-        plugins: [...defaultPlugins({ piniaOptions: { capabilityState: { capabilities } } })]
+        plugins: [...defaultPlugins()]
       }
     })
   }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.spec.ts
index 9e390623225..27bfaba8b8b 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.spec.ts
@@ -41,8 +41,7 @@ function getMountedWrapper(recipient: CollaboratorAutoCompleteItem, avatarsEnabl
   const capabilities = {
     files_sharing: {
       user: {
-        profile_picture: avatarsEnabled,
-        expire_date: { enabled: true, days: '10' }
+        profile_picture: avatarsEnabled
       }
     }
   } satisfies Partial<CapabilityStore['capabilities']>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileLinks.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileLinks.spec.ts
index 2307e92be40..32162cb27ea 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileLinks.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileLinks.spec.ts
@@ -174,7 +174,6 @@ function getWrapper({
   const capabilities = {
     files_sharing: {
       public: {
-        expire_date: {},
         alias: true,
         password: {
           enforced_for: { read_only: false, upload_only: false, read_write: false }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
index 4a7256446d7..f8468d82e47 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
@@ -116,12 +116,6 @@ function getShallowMountedWrapper({
     wrapper: shallowMount(DetailsAndEdit, {
       props: {
         canRename: true,
-        expirationRules: {
-          enforced: false,
-          default: null,
-          min: new Date(),
-          max: null
-        },
         linkShare,
         isModifiable,
         isPasswordEnforced: false
diff --git a/packages/web-client/src/ocs/capabilities.ts b/packages/web-client/src/ocs/capabilities.ts
index 3cd6df255cb..228be482b89 100644
--- a/packages/web-client/src/ocs/capabilities.ts
+++ b/packages/web-client/src/ocs/capabilities.ts
@@ -26,12 +26,6 @@ export interface PasswordEnforcedForCapability {
   read_write_delete?: boolean
 }
 
-export interface PublicExpirationCapability {
-  days?: string
-  enabled?: boolean
-  enforced?: boolean
-}
-
 export interface SearchPropertyCapability {
   enabled?: boolean
 }
@@ -143,7 +137,6 @@ export interface Capabilities {
         can_edit?: boolean
         default_permissions?: number
         enabled?: boolean
-        expire_date?: PublicExpirationCapability
         multiple?: boolean
         password?: {
           enforced?: boolean
@@ -154,19 +147,7 @@ export interface Capabilities {
         upload?: boolean
       }
       search_min_length?: number
-      group?: {
-        expire_date?: {
-          enabled?: boolean
-          enforced?: boolean
-          days?: string
-        }
-      }
       user?: {
-        expire_date?: {
-          enabled?: boolean
-          enforced?: boolean
-          days?: string
-        }
         profile_picture?: boolean
         send_mail?: boolean
         settings?: {
diff --git a/packages/web-pkg/src/components/CreateLinkModal.vue b/packages/web-pkg/src/components/CreateLinkModal.vue
index 1ed4e479f1e..b6a362bfb6a 100644
--- a/packages/web-pkg/src/components/CreateLinkModal.vue
+++ b/packages/web-pkg/src/components/CreateLinkModal.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex oc-button-justify-content-space-between oc-pb-s">
-    <div v-if="advancedMode" class="oc-flex oc-flex-middle">
+    <div v-if="isAdvancedMode" class="oc-flex oc-flex-middle">
       <oc-icon class="oc-mr-s" :name="selectedTypeIcon" fill-type="line" />
       <link-role-dropdown
         :model-value="selectedType"
@@ -13,7 +13,7 @@
       <span v-text="selectedTypeDescription" />
     </div>
     <oc-button
-      v-if="!advancedMode"
+      v-if="!isAdvancedMode"
       class="link-modal-advanced-mode-button"
       gap-size="xsmall"
       appearance="raw"
@@ -26,7 +26,7 @@
   </div>
   <div v-if="!onlyInternalLinksAllowed" class="link-modal-password oc-mb-m">
     <oc-text-input
-      v-if="advancedMode"
+      v-if="isAdvancedMode"
       :key="passwordInputKey"
       :model-value="password.value"
       type="password"
@@ -47,74 +47,21 @@
       <span v-text="$gettext('Password:')" />
       <span v-text="password.value" />
     </div>
+    <oc-datepicker
+      v-if="isAdvancedMode"
+      class="oc-mt-s"
+      :min-date="DateTime.now()"
+      :label="$gettext('Expiry date')"
+      :disabled="selectedLinkTypeIsInternal"
+      :description-message="
+        selectedLinkTypeIsInternal
+          ? $gettext('Expiry date cannot be set for internal links')
+          : undefined
+      "
+      @date-changed="onExpiryDateChanged"
+    />
   </div>
   <div class="link-modal-actions oc-flex oc-flex-right oc-flex-middle oc-mt-s">
-    <div v-if="advancedMode" class="link-modal-actions-advanced">
-      <oc-icon
-        v-if="selectedExpiry"
-        v-oc-tooltip="expirationDateTooltip"
-        class="oc-mr-s"
-        :aria-label="expirationDateTooltip"
-        name="calendar-event"
-        fill-type="line"
-      />
-      <oc-button
-        v-if="!onlyInternalLinksAllowed"
-        id="link-modal-context-menu-toggle"
-        :aria-label="$gettext('More options')"
-        appearance="raw"
-      >
-        <oc-icon name="more-2" />
-      </oc-button>
-      <oc-drop
-        v-if="!onlyInternalLinksAllowed"
-        ref="contextMenuDrop"
-        X
-        drop-id="link-modal-context-menu-drop"
-        toggle="#link-modal-context-menu-toggle"
-        padding-size="small"
-        mode="click"
-      >
-        <oc-list class="link-modal-context-menu">
-          <li class="oc-rounded oc-menu-item-hover">
-            <oc-datepicker
-              v-model="selectedExpiry"
-              class="link-expiry-picker oc-flex oc-width-1-1"
-              :min-date="expirationRules.min"
-              :max-date="expirationRules.max"
-              :locale="$language.current"
-              :is-required="expirationRules.enforced"
-            >
-              <template #default="{ togglePopover }">
-                <oc-button
-                  appearance="raw"
-                  class="oc-p-s action-menu-item link-expiry-picker-btn"
-                  :disabled="selectedLinkTypeIsInternal"
-                  @click="togglePopover"
-                >
-                  <oc-icon name="calendar-event" fill-type="line" size="medium" />
-                  <span
-                    v-text="
-                      selectedExpiry
-                        ? $gettext('Edit expiration date')
-                        : $gettext('Set expiration date')
-                    "
-                  />
-                </oc-button>
-                <oc-button
-                  v-if="selectedExpiry"
-                  :aria-label="$gettext('Remove expiration date')"
-                  appearance="raw"
-                  @click="selectedExpiry = undefined"
-                >
-                  <oc-icon name="close" />
-                </oc-button>
-              </template>
-            </oc-datepicker>
-          </li>
-        </oc-list>
-      </oc-drop>
-    </div>
     <oc-button
       class="link-modal-cancel oc-modal-body-actions-cancel oc-ml-s"
       appearance="outline"
@@ -126,6 +73,7 @@
       class="link-modal-confirm oc-modal-body-actions-confirm oc-ml-s"
       appearance="filled"
       variation="primary"
+      :disabled="confirmButtonDisabled"
       @click="$emit('confirm')"
       >{{ confirmButtonText }}
     </oc-button>
@@ -145,13 +93,11 @@ import {
   ref,
   reactive,
   unref,
-  onMounted,
-  watch
+  onMounted
 } from 'vue'
 import {
   usePasswordPolicyService,
   useEmbedMode,
-  useExpirationRules,
   useLinkTypes,
   Modal,
   useSharesStore,
@@ -159,8 +105,7 @@ import {
 } from '../composables'
 import { LinkShare, SpaceResource } from '@ownclouders/web-client'
 import { Resource } from '@ownclouders/web-client'
-import { formatRelativeDateFromDateTime } from '../helpers'
-import { OcButton, OcDrop } from 'design-system/src/components'
+import { OcButton } from 'design-system/src/components'
 import { SharingLinkType } from '@ownclouders/web-client/graph/generated'
 import LinkRoleDropdown from './LinkRoleDropdown.vue'
 
@@ -191,7 +136,6 @@ export default defineComponent({
     const { $gettext } = language
     const passwordPolicyService = usePasswordPolicyService()
     const { isEnabled: isEmbedEnabled, postMessage } = useEmbedMode()
-    const { expirationRules } = useExpirationRules()
     const {
       defaultLinkType,
       getAvailableLinkTypes,
@@ -199,8 +143,8 @@ export default defineComponent({
       isPasswordEnforcedForLinkType
     } = useLinkTypes()
     const { addLink } = useSharesStore()
-    const contextMenuDrop = ref<InstanceType<typeof OcDrop>>()
-    const advancedMode = ref(false)
+    const isAdvancedMode = ref(false)
+    const isInvalidExpiryDate = ref(false)
 
     const isFolder = computed(() => props.resources.every(({ isFolder }) => isFolder))
 
@@ -223,7 +167,7 @@ export default defineComponent({
     const passwordInputKey = ref(uuidV4())
     const roleRefs = ref<Record<string, RoleRef>>({})
 
-    const selectedExpiry = ref<Date>()
+    const selectedExpiry = ref<DateTime>()
     const password = reactive({ value: '', error: undefined })
     const selectedType = ref(unref(defaultLinkType))
 
@@ -245,31 +189,13 @@ export default defineComponent({
     const onlyInternalLinksAllowed = computed(
       () => unref(availableLinkTypes).length === 1 && unref(selectedLinkTypeIsInternal)
     )
-
-    const selectedExpiryDateRelative = computed(() =>
-      formatRelativeDateFromDateTime(
-        DateTime.fromJSDate(unref(selectedExpiry)).endOf('day'),
-        language.current
-      )
-    )
-
-    const selectedExpiryDate = computed(() =>
-      formatRelativeDateFromDateTime(
-        DateTime.fromJSDate(unref(selectedExpiry)).endOf('day'),
-        language.current
-      )
-    )
-
-    const expirationDateTooltip = computed(() => {
-      return $gettext(
-        'Expires %{timeToExpiry} (%{expiryDate})',
-        { timeToExpiry: unref(selectedExpiryDateRelative), expiryDate: unref(selectedExpiryDate) },
-        true
-      )
-    })
-
     const setAdvancedMode = () => {
-      advancedMode.value = true
+      isAdvancedMode.value = true
+    }
+
+    const onExpiryDateChanged = ({ date, error }: { date: DateTime; error: boolean }) => {
+      selectedExpiry.value = date
+      isInvalidExpiryDate.value = error
     }
 
     const createLinks = () => {
@@ -283,7 +209,7 @@ export default defineComponent({
               type: unref(selectedType),
               '@libre.graph.quickLink': props.isQuickLink,
               password: unref(password).value,
-              expirationDateTime: DateTime.fromJSDate(unref(selectedExpiry)).endOf('day').toISO(),
+              expirationDateTime: unref(selectedExpiry)?.toISO(),
               displayName: $gettext('Link')
             }
           })
@@ -291,14 +217,25 @@ export default defineComponent({
       )
     }
 
-    const onConfirm = async () => {
+    const passwordPolicyFulfilled = computed(() => {
       if (!unref(selectedLinkTypeIsInternal)) {
         if (!passwordPolicy.check(unref(password).value)) {
-          password.error = $gettext('Password must fulfill the password policy')
-          return Promise.reject()
+          return false
         }
       }
 
+      return true
+    })
+
+    const confirmButtonDisabled = computed(() => {
+      if (unref(passwordPolicyFulfilled) && !unref(isInvalidExpiryDate)) {
+        return false
+      }
+
+      return true
+    })
+
+    const onConfirm = async () => {
       const result = await createLinks()
 
       const succeeded = result.filter(({ status }) => status === 'fulfilled')
@@ -368,21 +305,14 @@ export default defineComponent({
       }
     })
 
-    watch(selectedExpiry, () => {
-      unref(contextMenuDrop).hide()
-    })
-
     return {
       roleRefs,
-      contextMenuDrop,
       password,
       passwordEnforced,
       passwordPolicy,
       generatePasswordMethod: () => passwordPolicyService.generatePassword(),
       passwordInputKey,
       selectedExpiry,
-      expirationDateTooltip,
-      expirationRules,
       availableLinkTypes,
       selectedType,
       selectedTypeIcon,
@@ -394,8 +324,11 @@ export default defineComponent({
       updatePassword,
       getLinkRoleByType,
       confirmButtonText,
-      advancedMode,
+      isAdvancedMode,
       setAdvancedMode,
+      onExpiryDateChanged,
+      confirmButtonDisabled,
+      DateTime,
 
       // unit tests
       onConfirm
diff --git a/packages/web-pkg/src/composables/links/index.ts b/packages/web-pkg/src/composables/links/index.ts
index f72496f3f38..df025c357bf 100644
--- a/packages/web-pkg/src/composables/links/index.ts
+++ b/packages/web-pkg/src/composables/links/index.ts
@@ -1,2 +1 @@
 export * from './useLinkTypes'
-export * from './useExpirationRules'
diff --git a/packages/web-pkg/src/composables/links/useExpirationRules.ts b/packages/web-pkg/src/composables/links/useExpirationRules.ts
deleted file mode 100644
index a1b51377e6d..00000000000
--- a/packages/web-pkg/src/composables/links/useExpirationRules.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { computed } from 'vue'
-import { getExpirationRules } from '../../helpers'
-import { useGettext } from 'vue3-gettext'
-import { useCapabilityStore } from '../piniaStores'
-
-export const useExpirationRules = () => {
-  const capabilityStore = useCapabilityStore()
-  const language = useGettext()
-
-  const expirationRules = computed(() =>
-    getExpirationRules({ capabilityStore, currentLanguage: language.current })
-  )
-
-  return { expirationRules }
-}
diff --git a/packages/web-pkg/src/composables/piniaStores/capabilities.ts b/packages/web-pkg/src/composables/piniaStores/capabilities.ts
index f1b442b647a..3bc46aafa93 100644
--- a/packages/web-pkg/src/composables/piniaStores/capabilities.ts
+++ b/packages/web-pkg/src/composables/piniaStores/capabilities.ts
@@ -118,17 +118,10 @@ export const useCapabilityStore = defineStore('capabilities', () => {
   const sharingPublicPasswordEnforcedFor = computed(
     () => unref(capabilities).files_sharing.public?.password.enforced_for
   )
-  const sharingPublicExpireDate = computed(
-    () => unref(capabilities).files_sharing.public?.expire_date
-  )
   const sharingSearchMinLength = computed(() => unref(capabilities).files_sharing.search_min_length)
-  const sharingUserExpireDate = computed(() => unref(capabilities).files_sharing.user?.expire_date)
   const sharingUserProfilePicture = computed(
     () => unref(capabilities).files_sharing.user?.profile_picture
   )
-  const sharingGroupExpireDate = computed(
-    () => unref(capabilities).files_sharing.group?.expire_date
-  )
 
   const tusMaxChunkSize = computed(() => unref(capabilities).files.tus_support?.max_chunk_size)
   const tusExtension = computed(() => unref(capabilities).files.tus_support?.extension)
@@ -182,11 +175,8 @@ export const useCapabilityStore = defineStore('capabilities', () => {
     sharingPublicAlias,
     sharingPublicDefaultPermissions,
     sharingPublicPasswordEnforcedFor,
-    sharingPublicExpireDate,
     sharingSearchMinLength,
-    sharingUserExpireDate,
     sharingUserProfilePicture,
-    sharingGroupExpireDate,
     tusMaxChunkSize,
     tusExtension,
     tusHttpMethodOverride,
diff --git a/packages/web-pkg/src/composables/piniaStores/modals.ts b/packages/web-pkg/src/composables/piniaStores/modals.ts
index cb5fa983ebc..9f2e124b9e1 100644
--- a/packages/web-pkg/src/composables/piniaStores/modals.ts
+++ b/packages/web-pkg/src/composables/piniaStores/modals.ts
@@ -47,7 +47,7 @@ export type Modal = {
   customComponent?: CustomModalComponent
   customComponentAttrs?: () => Record<string, unknown>
   onCancel?: () => void
-  onConfirm?: (value: string) => void | Promise<void>
+  onConfirm?: (value: unknown) => void | Promise<void>
   onInput?: (value: string, setError: (error: string) => void) => void
 }
 
diff --git a/packages/web-pkg/src/helpers/share/index.ts b/packages/web-pkg/src/helpers/share/index.ts
index 81caa3b484c..19c16c5b5c0 100644
--- a/packages/web-pkg/src/helpers/share/index.ts
+++ b/packages/web-pkg/src/helpers/share/index.ts
@@ -1,2 +1 @@
-export * from './link'
 export * from './sharedAncestorRoute'
diff --git a/packages/web-pkg/src/helpers/share/link.ts b/packages/web-pkg/src/helpers/share/link.ts
deleted file mode 100644
index bed3b2768a2..00000000000
--- a/packages/web-pkg/src/helpers/share/link.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { DateTime } from 'luxon'
-import { getLocaleFromLanguage } from '../locale'
-import { CapabilityStore } from '../../composables'
-
-// TODO: move to useExpirationRules composable
-export type ExpirationRules = { enforced: boolean; default: Date; min: Date; max: Date }
-
-export const getExpirationRules = ({
-  capabilityStore,
-  currentLanguage
-}: {
-  capabilityStore: CapabilityStore
-  currentLanguage: string
-}): ExpirationRules => {
-  const expireDate = capabilityStore.sharingPublicExpireDate
-
-  let defaultExpireDate: Date = null
-  let maxExpireDateFromCaps: Date = null
-
-  if (expireDate.days) {
-    const days = parseInt(expireDate.days)
-    defaultExpireDate = DateTime.now()
-      .setLocale(getLocaleFromLanguage(currentLanguage))
-      .plus({ days })
-      .toJSDate()
-  }
-
-  if (expireDate.enforced) {
-    const days = parseInt(expireDate.days)
-    maxExpireDateFromCaps = DateTime.now()
-      .setLocale(getLocaleFromLanguage(currentLanguage))
-      .plus({ days })
-      .toJSDate()
-  }
-
-  return {
-    enforced: expireDate.enforced,
-    default: defaultExpireDate,
-    min: DateTime.now().setLocale(getLocaleFromLanguage(currentLanguage)).toJSDate(),
-    max: maxExpireDateFromCaps
-  }
-}
diff --git a/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts b/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts
index 79b1e4e317e..84987b23d53 100644
--- a/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts
@@ -10,6 +10,7 @@ import { useLinkTypes } from '../../../src/composables/links'
 import { nextTick, ref } from 'vue'
 import { CapabilityStore, useSharesStore } from '../../../src/composables/piniaStores'
 import { SharingLinkType } from '@ownclouders/web-client/graph/generated'
+import { describe } from 'vitest'
 
 vi.mock('../../../src/composables/embedMode')
 vi.mock('../../../src/composables/passwordPolicyService')
@@ -29,21 +30,21 @@ const selectors = {
 
 describe('CreateLinkModal', () => {
   describe('password input', () => {
-    it('should not rendered when "advancedMode" is not set', async () => {
+    it('should not rendered when "isAdvancedMode" is not set', async () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.advancedMode = false
+      wrapper.vm.isAdvancedMode = false
       await nextTick()
       expect(wrapper.find(selectors.passwordInput).exists()).toBeFalsy()
     })
     it('should be rendered', async () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.advancedMode = true
+      wrapper.vm.isAdvancedMode = true
       await nextTick()
       expect(wrapper.find(selectors.passwordInput).exists()).toBeTruthy()
     })
     it('should be disabled for internal links', async () => {
       const { wrapper } = getWrapper({ defaultLinkType: SharingLinkType.Internal })
-      wrapper.vm.advancedMode = true
+      wrapper.vm.isAdvancedMode = true
       await nextTick()
       expect(wrapper.find(selectors.passwordInput).attributes('disabled')).toBeTruthy()
     })
@@ -56,10 +57,38 @@ describe('CreateLinkModal', () => {
       expect(wrapper.find(selectors.passwordInput).exists()).toBeFalsy()
     })
   })
+  describe('datepicker', () => {
+    it('should not rendered when "isAdvancedMode" is not set', async () => {
+      const { wrapper } = getWrapper()
+      wrapper.vm.isAdvancedMode = false
+      await nextTick()
+      expect(wrapper.findComponent({ name: 'oc-datepicker' }).exists()).toBeFalsy()
+    })
+    it('should be rendered', async () => {
+      const { wrapper } = getWrapper()
+      wrapper.vm.isAdvancedMode = true
+      await nextTick()
+      expect(wrapper.findComponent({ name: 'oc-datepicker' }).exists()).toBeTruthy()
+    })
+    it('should be disabled for internal links', async () => {
+      const { wrapper } = getWrapper({ defaultLinkType: SharingLinkType.Internal })
+      wrapper.vm.isAdvancedMode = true
+      await nextTick()
+      expect(wrapper.findComponent({ name: 'oc-datepicker' }).attributes('disabled')).toBeTruthy()
+    })
+    it('should not be rendered if user cannot create public links', () => {
+      const { wrapper } = getWrapper({
+        userCanCreatePublicLinks: false,
+        availableLinkTypes: [SharingLinkType.Internal],
+        defaultLinkType: SharingLinkType.Internal
+      })
+      expect(wrapper.findComponent({ name: 'oc-datepicker' }).exists()).toBeFalsy()
+    })
+  })
   describe('link role drop', () => {
-    it('should not rendered when "advancedMode" is not set', async () => {
+    it('should not rendered when "isAdvancedMode" is not set', async () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.advancedMode = false
+      wrapper.vm.isAdvancedMode = false
       await nextTick()
       expect(wrapper.find(selectors.linkRoleDropDownToggle).exists()).toBeFalsy()
     })
@@ -70,48 +99,14 @@ describe('CreateLinkModal', () => {
         SharingLinkType.Edit
       ]
       const { wrapper } = getWrapper({ availableLinkTypes })
-      wrapper.vm.advancedMode = true
+      wrapper.vm.isAdvancedMode = true
       await nextTick()
       await wrapper.find(selectors.linkRoleDropDownToggle).trigger('click')
 
       expect(wrapper.findAll(selectors.roleElements).length).toBe(availableLinkTypes.length)
     })
   })
-  describe('context menu', () => {
-    it('should not rendered when "advancedMode" is not set', async () => {
-      const { wrapper } = getWrapper()
-      wrapper.vm.advancedMode = false
-      await nextTick()
-      expect(wrapper.find(selectors.contextMenuToggle).exists()).toBeFalsy()
-    })
-    it('should display the button to toggle the context menu', async () => {
-      const { wrapper } = getWrapper()
-      wrapper.vm.advancedMode = true
-      await nextTick()
-      expect(wrapper.find(selectors.contextMenuToggle).exists()).toBeTruthy()
-    })
-    it('should not display the button to toggle the context menu if user cannot create public links', () => {
-      const { wrapper } = getWrapper({
-        userCanCreatePublicLinks: false,
-        availableLinkTypes: [SharingLinkType.Internal],
-        defaultLinkType: SharingLinkType.Internal
-      })
-      expect(wrapper.find(selectors.contextMenuToggle).exists()).toBeFalsy()
-    })
-  })
   describe('method "confirm"', () => {
-    it('does not create links when the password policy is not fulfilled', async () => {
-      vi.spyOn(console, 'error').mockImplementation(undefined)
-      const callbackFn = vi.fn()
-      const { wrapper } = getWrapper({ passwordPolicyFulfilled: false, callbackFn })
-      wrapper.vm.advancedMode = true
-      await nextTick()
-      try {
-        await wrapper.vm.onConfirm()
-      } catch (error) {}
-
-      expect(callbackFn).not.toHaveBeenCalled()
-    })
     it('creates links for all resources', async () => {
       const callbackFn = vi.fn()
       const resources = [mock<Resource>({ isFolder: false }), mock<Resource>({ isFolder: false })]
@@ -167,6 +162,16 @@ describe('CreateLinkModal', () => {
       }
     )
   })
+  describe('action buttons', () => {
+    describe('confirm button', () => {
+      it('is disabled when password policy is not fulfilled', async () => {
+        const { wrapper } = getWrapper({ passwordPolicyFulfilled: false })
+        wrapper.vm.isAdvancedMode = true
+        await nextTick()
+        expect(wrapper.find(selectors.confirmBtn).attributes('disabled')).toBeTruthy()
+      })
+    })
+  })
 })
 
 function getWrapper({
@@ -222,7 +227,6 @@ function getWrapper({
   const capabilities = {
     files_sharing: {
       public: {
-        expire_date: {},
         can_edit: true,
         can_contribute: true,
         alias: true,
diff --git a/packages/web-pkg/tests/unit/helpers/share/link.spec.ts b/packages/web-pkg/tests/unit/helpers/share/link.spec.ts
deleted file mode 100644
index ddbbdfd1647..00000000000
--- a/packages/web-pkg/tests/unit/helpers/share/link.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { getExpirationRules } from '../../../../src/helpers/share'
-import { mock } from 'vitest-mock-extended'
-import { PublicExpirationCapability } from '@ownclouders/web-client/ocs'
-import { createTestingPinia } from 'web-test-helpers'
-import { useCapabilityStore } from '../../../../src/composables/piniaStores'
-
-describe('getExpirationRules', () => {
-  it('correctly computes rules based on the "expire_date"-capability', () => {
-    vi.useFakeTimers().setSystemTime(new Date('2000-01-01'))
-    createTestingPinia()
-    const capabilityStore = useCapabilityStore()
-    const capabilities = mock<PublicExpirationCapability>({ enforced: true, days: '10' })
-    capabilityStore.capabilities.files_sharing.public.expire_date = capabilities
-
-    const rules = getExpirationRules({
-      currentLanguage: 'de',
-      capabilityStore
-    })
-
-    expect(rules.enforced).toEqual(capabilities.enforced)
-    expect(rules.default).toEqual(new Date('2000-01-11'))
-    expect(rules.min).toEqual(new Date('2000-01-01'))
-    expect(rules.max).toEqual(new Date('2000-01-11'))
-  })
-})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7687ca5c1ef..35ae1077050 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -465,9 +465,6 @@ importers:
       url-loader:
         specifier: ^4.1.1
         version: 4.1.1(file-loader@6.2.0(webpack@5.89.0))(webpack@5.89.0)
-      v-calendar:
-        specifier: github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d
-        version: https://codeload.github.com/dschmidt/v-calendar/tar.gz/3ce6e3b8afd5491cb53ee811281d5fa8a45b044d(vue@3.4.21(typescript@5.5.3))
       vue:
         specifier: 3.4.21
         version: 3.4.21(typescript@5.5.3)
@@ -2478,9 +2475,6 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
-  '@popperjs/core@2.4.0':
-    resolution: {integrity: sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==}
-
   '@rollup/plugin-inject@5.0.3':
     resolution: {integrity: sha512-411QlbL+z2yXpRWFXSmw/teQRMkXcAAC8aYTemc15gwJRpvEVDQwoe+N/HTFD8RFG8+88Bme9DK2V9CVm7hJdA==}
     engines: {node: '>=14.0.0'}
@@ -4331,15 +4325,6 @@ packages:
     resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
     engines: {node: '>=12'}
 
-  date-fns-tz@1.3.8:
-    resolution: {integrity: sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==}
-    peerDependencies:
-      date-fns: '>=2.0.0'
-
-  date-fns@2.30.0:
-    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
-    engines: {node: '>=0.11'}
-
   dateformat@4.6.3:
     resolution: {integrity: sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==}
 
@@ -9230,12 +9215,6 @@ packages:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
     hasBin: true
 
-  v-calendar@https://codeload.github.com/dschmidt/v-calendar/tar.gz/3ce6e3b8afd5491cb53ee811281d5fa8a45b044d:
-    resolution: {tarball: https://codeload.github.com/dschmidt/v-calendar/tar.gz/3ce6e3b8afd5491cb53ee811281d5fa8a45b044d}
-    version: 3.0.0-alpha.9
-    peerDependencies:
-      vue: ^3.1.0
-
   v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
@@ -11264,8 +11243,6 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
-  '@popperjs/core@2.4.0': {}
-
   '@rollup/plugin-inject@5.0.3(rollup@4.14.0)':
     dependencies:
       '@rollup/pluginutils': 5.0.2(rollup@4.14.0)
@@ -13530,14 +13507,6 @@ snapshots:
       whatwg-mimetype: 3.0.0
       whatwg-url: 11.0.0
 
-  date-fns-tz@1.3.8(date-fns@2.30.0):
-    dependencies:
-      date-fns: 2.30.0
-
-  date-fns@2.30.0:
-    dependencies:
-      '@babel/runtime': 7.23.7
-
   dateformat@4.6.3: {}
 
   de-indent@1.0.2: {}
@@ -18817,15 +18786,6 @@ snapshots:
 
   uuid@9.0.1: {}
 
-  v-calendar@https://codeload.github.com/dschmidt/v-calendar/tar.gz/3ce6e3b8afd5491cb53ee811281d5fa8a45b044d(vue@3.4.21(typescript@5.5.3)):
-    dependencies:
-      '@popperjs/core': 2.4.0
-      '@types/lodash': 4.14.202
-      date-fns: 2.30.0
-      date-fns-tz: 1.3.8(date-fns@2.30.0)
-      lodash: 4.17.21
-      vue: 3.4.21(typescript@5.5.3)
-
   v8-compile-cache-lib@3.0.1: {}
 
   v8-to-istanbul@9.2.0:
diff --git a/tests/e2e/support/objects/app-files/link/actions.ts b/tests/e2e/support/objects/app-files/link/actions.ts
index b38589e2980..0158505c89d 100644
--- a/tests/e2e/support/objects/app-files/link/actions.ts
+++ b/tests/e2e/support/objects/app-files/link/actions.ts
@@ -63,7 +63,8 @@ export type publicLinkAndItsEditButtonVisibilityArgs = {
 }
 const publicLinkRoleToggle = `//button[contains(@class, "link-role-dropdown-toggle")]`
 const publicLinkSetRoleButton = `//span[contains(@class,"role-dropdown-list-option-label") and text()='%s']`
-const linkExpiryDatepicker = '.link-expiry-picker:not(.vc-container)'
+const linkExpiryDatepicker = '.oc-modal-body .oc-date-picker input'
+const linkExpiryDatepickerConfirmButton = '.oc-modal-body-actions-confirm'
 const publicLinkEditRoleButton =
   `//h4//span[contains(@class, "oc-files-file-link-name") and text()="%s"]//ancestor::li//div[contains(@class, "link-details")]/` +
   `div/button[contains(@class, "link-role-dropdown-toggle")]`
@@ -85,7 +86,8 @@ const editPublicLinkSetExpirationButton =
   '//div[contains(@id,"edit-public-link-dropdown")]//button/span[text()="Set expiration date"]'
 const editPublicLinkAddPasswordButton =
   '//div[contains(@id,"edit-public-link-dropdown")]//button/span[text()="Edit password"]'
-const editPublicLinkInput = '.oc-modal-body input.oc-text-input'
+const editPublicLinkNameInput = '.oc-modal-body input.oc-text-input'
+const editPublicLinkPasswordInput = '.oc-modal-body .oc-text-input-password-wrapper input'
 const editPublicLinkRenameConfirm = '.oc-modal-body-actions-confirm'
 const deleteLinkButton =
   `//h4//span[contains(@class, "oc-files-file-link-name") and text()="%s"]` +
@@ -132,7 +134,7 @@ export const createLink = async (args: createLinkArgs): Promise<string> => {
     ? await expect(page.locator(passwordInputDescription).first()).toHaveText(
         'Password cannot be set for internal links'
       )
-    : await page.locator(editPublicLinkInput).fill(password)
+    : await page.locator(editPublicLinkPasswordInput).fill(password)
 
   await Promise.all([
     page.waitForResponse(
@@ -199,7 +201,7 @@ export const changeName = async (args: changeNameArgs): Promise<string> => {
   }
   await page.locator(util.format(editPublicLinkButton, 'Link')).click()
   await page.locator(editPublicLinkRenameButton).click()
-  await page.locator(editPublicLinkInput).fill(newName)
+  await page.locator(editPublicLinkNameInput).fill(newName)
   await page.locator(editPublicLinkRenameConfirm).click()
   const message = await page.locator(linkUpdateDialog).textContent()
   expect(message.trim()).toBe('Link was updated successfully')
@@ -221,7 +223,7 @@ export const fillPassword = async (args: addPasswordArgs): Promise<void> => {
   await sidebar.openPanel({ page: page, name: 'sharing' })
   await page.locator(util.format(editPublicLinkButton, linkName)).click()
   await page.locator(editPublicLinkAddPasswordButton).click()
-  await page.locator(editPublicLinkInput).fill(newPassword)
+  await page.locator(editPublicLinkPasswordInput).fill(newPassword)
   await page.locator(editPublicLinkRenameConfirm).click()
 }
 
@@ -240,12 +242,12 @@ export const showOrHidePassword = async (args: {
   const { page, showOrHide } = args
   await page.locator(showOrHidePasswordButton).click()
   showOrHide === 'reveals'
-    ? await expect(page.locator(editPublicLinkInput)).toHaveAttribute('type', 'text')
-    : await expect(page.locator(editPublicLinkInput)).toHaveAttribute('type', 'password')
+    ? await expect(page.locator(editPublicLinkPasswordInput)).toHaveAttribute('type', 'text')
+    : await expect(page.locator(editPublicLinkPasswordInput)).toHaveAttribute('type', 'password')
 }
 
 export const copyEnteredPassword = async (page: Page): Promise<void> => {
-  const enteredPassword = await page.locator(editPublicLinkInput).inputValue()
+  const enteredPassword = await page.locator(editPublicLinkPasswordInput).inputValue()
   await page.locator(copyPasswordButton).click()
   const copiedPassword = await page.evaluate('navigator.clipboard.readText()')
   expect(enteredPassword).toBe(copiedPassword)
@@ -253,7 +255,7 @@ export const copyEnteredPassword = async (page: Page): Promise<void> => {
 
 export const generatePassword = async (page: Page): Promise<void> => {
   await page.locator(generatePasswordButton).click()
-  const generatedPassword = await page.locator(editPublicLinkInput).inputValue()
+  const generatedPassword = await page.locator(editPublicLinkPasswordInput).inputValue()
   expect(generatedPassword).toMatch(expectedRegexForGeneratedPassword)
 }
 
@@ -286,12 +288,8 @@ export const addExpiration = async (args: addExpirationArgs): Promise<void> => {
     expireDate
   )
 
-  await page.locator(linkExpiryDatepicker).evaluate(
-    (datePicker: any, { newExpiryDate }): any => {
-      datePicker?.__vueParentComponent?.refs?.calendar.move(newExpiryDate)
-    },
-    { newExpiryDate }
-  )
+  await page.locator(linkExpiryDatepicker).fill(newExpiryDate.toISOString().split('T')[0])
+  await page.locator(linkExpiryDatepickerConfirmButton).click()
 }
 
 export const deleteLink = async (args: deleteLinkArgs): Promise<void> => {
diff --git a/tests/e2e/support/objects/app-files/share/actions.ts b/tests/e2e/support/objects/app-files/share/actions.ts
index 220865a4387..0f17749be93 100644
--- a/tests/e2e/support/objects/app-files/share/actions.ts
+++ b/tests/e2e/support/objects/app-files/share/actions.ts
@@ -24,7 +24,7 @@ const selecAllCheckbox = '#resource-table-select-all'
 const acceptButton = '.oc-files-actions-enable-sync-trigger'
 const pendingShareItem =
   '//div[@id="files-shared-with-me-pending-section"]//tr[contains(@class,"oc-tbody-tr")]'
-const passwordInput = '.oc-modal-body input.oc-text-input'
+const passwordInput = '.oc-modal-body .link-modal-password-input input.oc-text-input'
 const createLinkButton = '.oc-modal-body-actions-confirm'
 const showMoreOptionsButton = '#show-more-share-options-btn'
 const calendarDatePickerId = 'recipient-datepicker-btn'
diff --git a/tests/e2e/support/objects/app-files/share/collaborator.ts b/tests/e2e/support/objects/app-files/share/collaborator.ts
index bece70a8e95..1d4ef60d8bc 100644
--- a/tests/e2e/support/objects/app-files/share/collaborator.ts
+++ b/tests/e2e/support/objects/app-files/share/collaborator.ts
@@ -84,9 +84,9 @@ export default class Collaborator {
   private static readonly showAccessDetailsButton =
     '%s//ul[contains(@class,"collaborator-edit-dropdown-options-list")]//button[contains(@class,"show-access-details")]'
   private static readonly removeCollaboratorConfirmationButton = '.oc-modal-body-actions-confirm'
-  private static readonly collaboratorExpirationDatepicker =
-    '.collaborator-edit-dropdown-options-list .files-recipient-expiration-datepicker:not(.vc-container)'
-  private static readonly expirationDatepickerDaySelect = '.vc-day.id-%s'
+  private static readonly collaboratorExpirationDatepicker = '.oc-modal-body .oc-date-picker input'
+  private static readonly collaboratorExpirationDatepickerConfirmButton =
+    '.oc-modal-body-actions-confirm'
   private static readonly collaboratorDropdownItem =
     'div[data-testid="new-collaborators-form"] div[data-testid="recipient-autocomplete-item-%s"]'
 
@@ -257,22 +257,11 @@ export default class Collaborator {
       expirationDate.toLowerCase().match(/[dayrmonthwek]+/)[0],
       expirationDate
     )
-    await page.locator(Collaborator.collaboratorExpirationDatepicker).evaluate(
-      (datePicker: any, { newExpiryDate }): any => {
-        datePicker.__datePicker.$refs.calendar.move(newExpiryDate)
-      },
-      { newExpiryDate }
-    )
 
     await page
-      .locator(
-        util.format(
-          Collaborator.expirationDatepickerDaySelect,
-          newExpiryDate.toISOString().split('T')[0]
-        )
-      )
-      .first()
-      .click()
+      .locator(Collaborator.collaboratorExpirationDatepicker)
+      .fill(newExpiryDate.toISOString().split('T')[0])
+    await page.locator(Collaborator.collaboratorExpirationDatepickerConfirmButton).click()
   }
 
   static async removeExpirationDateFromCollaborator(