1 files changed, 11 insertions, 13 deletions
diff --git a/app/assets/javascripts/analytics/shared/components/daterange.vue b/app/assets/javascripts/analytics/shared/components/daterange.vue
index 7df66d1b2be..92ccac59057 100644
--- a/app/assets/javascripts/analytics/shared/components/daterange.vue
+++ b/app/assets/javascripts/analytics/shared/components/daterange.vue
@@ -1,13 +1,10 @@
 <script>
-import { GlDaterangePicker, GlSprintf } from '@gitlab/ui';
-import { getDayDifference } from '~/lib/utils/datetime_utility';
-import { __, sprintf } from '~/locale';
-import { OFFSET_DATE_BY_ONE } from '../constants';
+import { GlDaterangePicker } from '@gitlab/ui';
+import { n__, __, sprintf } from '~/locale';
 
 export default {
   components: {
     GlDaterangePicker,
-    GlSprintf,
   },
   props: {
     show: {
@@ -69,9 +66,10 @@ export default {
         this.$emit('change', { startDate, endDate });
       },
     },
-    numberOfDays() {
-      const dayDifference = getDayDifference(this.startDate, this.endDate);
-      return this.includeSelectedDate ? dayDifference + OFFSET_DATE_BY_ONE : dayDifference;
+  },
+  methods: {
+    numberOfDays(daysSelected) {
+      return n__('1 day selected', '%d days selected', daysSelected);
     },
   },
 };
@@ -83,7 +81,7 @@ export default {
   >
     <gl-daterange-picker
       v-model="dateRange"
-      class="d-flex flex-column flex-lg-row"
+      class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row"
       :default-start-date="startDate"
       :default-end-date="endDate"
       :default-min-date="minDate"
@@ -93,12 +91,12 @@ export default {
       :tooltip="maxDateRangeTooltip"
       theme="animate-picker"
       start-picker-class="js-daterange-picker-from gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-lg-align-items-center gl-lg-mr-3 gl-mb-2 gl-lg-mb-0"
-      end-picker-class="js-daterange-picker-to d-flex flex-column flex-lg-row align-items-lg-center gl-mb-2 gl-lg-mb-0"
+      end-picker-class="js-daterange-picker-to gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-lg-align-items-center gl-mb-2 gl-lg-mb-0"
       label-class="gl-mb-2 gl-lg-mb-0"
     >
-      <gl-sprintf :message="n__('1 day selected', '%d days selected', numberOfDays)">
-        <template #numberOfDays>{{ numberOfDays }}</template>
-      </gl-sprintf>
+      <template #default="{ daysSelected }">
+        {{ numberOfDays(daysSelected) }}
+      </template>
     </gl-daterange-picker>
   </div>
 </template>