瀏覽代碼

fix the date picker positionning issue

Olivier Massot 2 年之前
父節點
當前提交
34f6570862
共有 1 個文件被更改,包括 14 次插入5 次删除
  1. 14 5
      components/Ui/Input/DateRangePicker.vue

+ 14 - 5
components/Ui/Input/DateRangePicker.vue

@@ -8,6 +8,7 @@
       locale="fr"
       :start-date="today"
       :teleport="true"
+      :alt-position="dateRangePickerAltPosition"
       :enable-time-picker="false"
       close-on-scroll
       text-input
@@ -48,16 +49,24 @@ if (props.maxHeight !== null) {
   style += 'height: ' + props.maxHeight + 'px;max-height: ' + props.maxHeight + 'px;'
 }
 
-
 /**
  * Recalcule la position du panneau de sélection des dates si trop près du bord droit de l'écran
  * @param el
  */
-const dateRangePickerAltPosition = (el: HTMLElement) => ({
-  top: el.getBoundingClientRect().bottom,
-  left: el.getBoundingClientRect().left - 100
-})
+const dateRangePickerAltPosition = (el: HTMLElement) => {
+  let xOffset = 0
+  const fullWidth = 500
+  const rect = el.getBoundingClientRect()
+  
+  if ((rect.left + fullWidth + 20) > window.innerWidth) {
+    xOffset = window.innerWidth - (rect.left + fullWidth + 20)
+  }
 
+  return {
+    top: rect.bottom,
+    left: rect.left + xOffset
+  }
+}
 </script>
 
 <style scoped lang="scss">