From eea1ea7ed0b57fbd7eb6cf9be5a8846b687f829f Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Fri, 21 Apr 2023 22:36:57 +0800
Subject: [PATCH] always show date range picker in center

---
 .../mobile/DateRangeSelectionSheet.vue        | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/mobile/DateRangeSelectionSheet.vue b/src/components/mobile/DateRangeSelectionSheet.vue
index 5d336ea9..282f440d 100644
--- a/src/components/mobile/DateRangeSelectionSheet.vue
+++ b/src/components/mobile/DateRangeSelectionSheet.vue
@@ -14,24 +14,24 @@
                     <span>{{ endDateTime }}</span>
                 </p>
                 <slot></slot>
-                <VueDatePicker range inline enable-seconds six-weeks
-                               auto-apply month-name-format="long"
-                               class="margin-bottom"
-                               :dark="isDarkMode"
-                               :week-start="firstDayOfWeek"
-                               :year-range="yearRange"
-                               :day-names="dayNames"
-                               :is24="is24Hour"
-                               :partial-range="false"
-                               :preset-ranges="presetRanges"
-                               v-model="dateRange">
+                <vue-date-picker range inline enable-seconds six-weeks
+                                 auto-apply month-name-format="long"
+                                 class="justify-content-center margin-bottom"
+                                 :dark="isDarkMode"
+                                 :week-start="firstDayOfWeek"
+                                 :year-range="yearRange"
+                                 :day-names="dayNames"
+                                 :is24="is24Hour"
+                                 :partial-range="false"
+                                 :preset-ranges="presetRanges"
+                                 v-model="dateRange">
                     <template #month="{ text }">
                         {{ $t(`datetime.${text}.short`) }}
                     </template>
                     <template #month-overlay-value="{ text }">
                         {{ $t(`datetime.${text}.short`) }}
                     </template>
-                </VueDatePicker>
+                </vue-date-picker>
                 <f7-button large fill
                            :class="{ 'disabled': !dateRange[0] || !dateRange[1] }"
                            :text="$t('Continue')"