|
|
@@ -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">
|