force rerender on range selection

Signed-off-by: dartcafe <github@dartcafe.de>

2 files changed, 24 insertions, 25 deletions

diff --git a/src/js/assets/scss/hacks.scss b/src/js/assets/scss/hacks.scss
index fc24cfe4..1b2692f7 100644
--- a/src/js/assets/scss/hacks.scss
+++ b/src/js/assets/scss/hacks.scss
@@ -6,20 +6,16 @@
 	}
 }
 
-// When switching from non range mode to range mode, date picker crosses
-// the right window border
-// Force date picker position to the right side of the sidebar
-.mx-datepicker-main, .mx-datepicker-popup {
-	right: 4px !important;
-	left: auto !important;
-}
-
 // fill full input with background color
 .mx-input {
 	background-clip: initial !important;
 }
 
-// force scrolling of sidebar-tabs content 
+.mx-datepicker-main svg {
+	fill: var(--color-primary-element);
+}
+
+// force scrolling of sidebar-tabs content
 .app-sidebar-tabs {
 	overflow-y: hidden;
 }
diff --git a/src/js/components/Options/OptionsDateAdd.vue b/src/js/components/Options/OptionsDateAdd.vue
index 465e397b..064964b5 100644
--- a/src/js/components/Options/OptionsDateAdd.vue
+++ b/src/js/components/Options/OptionsDateAdd.vue
@@ -30,21 +30,7 @@
 		<template #input>
 			<ButtonDiv :title="t('polls', 'Add new date option')" />
 		</template>
-		<template #footer>
-			<div v-if="dateOption.isValid" class="selection">
-				<div>
-					{{ dateOption.text }}
-				</div>
-				<Spacer />
-				<button v-if="dateOption.option.duration >= 0 && !added" class="primary" @click="addOption">
-					{{ t('polls', 'Add') }}
-				</button>
-				<div v-if="added" v-tooltip.auto="t('polls', 'Added')" class="icon-polls-yes" />
-			</div>
-			<div v-else>
-				{{ t('polls', 'Pick a day.') }}
-			</div>
-		</template>
+
 		<template #header>
 			<CheckboxRadioSwitch :checked.sync="useRange" class="range" type="switch">
 				{{ t('polls', 'Select range') }}
@@ -61,6 +47,22 @@
 				</button>
 			</div>
 		</template>
+
+		<template #footer>
+			<div v-if="dateOption.isValid" class="selection">
+				<div>
+					{{ dateOption.text }}
+				</div>
+				<Spacer />
+				<button v-if="dateOption.option.duration >= 0 && !added" class="primary" @click="addOption">
+					{{ t('polls', 'Add') }}
+				</button>
+				<div v-if="added" v-tooltip.auto="t('polls', 'Added')" class="icon-polls-yes" />
+			</div>
+			<div v-else>
+				{{ t('polls', 'Pick a day.') }}
+			</div>
+		</template>
 	</DateTimePicker>
 </template>
 
@@ -181,6 +183,7 @@ export default {
 				minuteStep: 5,
 				type: this.useTime ? 'datetime' : 'date',
 				range: this.useRange,
+				key: this.useRange ? 'range-on' : 'range-off',
 				showSecond: false,
 				showTimePanel: this.showTimePanel,
 				valueType: 'timestamp',
@@ -323,7 +326,7 @@ export default {
 
 .range {
 	flex: 1;
-	text-align: left;
+	justify-content: flex-end;
 	margin: 8px;
 }