modify datepickers to use datetime

Author: bernardodemarco

ui/src/utils/date.js

@@ -18,34 +18,52 @@ import store from '@/store'
 
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import isToday from 'dayjs/plugin/isToday'
 
 dayjs.extend(utc)
-dayjs.extend(isToday)
 
-export function parseDayJsObject ({ value, format }) {
+export function parseDayJsObject ({ value, format = true, keepMoment = true }) {
+  console.log(value)
+
   if (!value) {
     return null
   }
 
+  if (typeof value === 'string') {
+    value = dayjs(value)
+  }
+
+  if (!store.getters.usebrowsertimezone) {
+    value = value.utc(keepMoment)
+  }
+
   if (!format) {
     return value
   }
 
-  return value.format(format)
-}
-
-export function isDayJsObjectToday (dayJsObject) {
-  return dayJsObject.isToday()
+  return value.format()
 }
 
+/**
+ * When passing a string/dayjs to the date picker component, it converts the value to the browser timezone; therefore,
+ * we need to normalize the value to UTC if user is not using browser's timezone.
+ * @param {*} value The datetime to normalize.
+ * @returns A dayjs object with the datetime normalized to UTC if user is not using browser's timezone;
+ * otherwise, a correspondent dayjs object based on the value passed.
+ */
 export function parseDateToDatePicker (value) {
   if (!value) {
     return null
   }
 
-  const format = 'YYYY-MM-DD'
-  return dayjs(value, format)
+  if (typeof value === 'string') {
+    value = dayjs(value)
+  }
+
+  if (store.getters.usebrowsertimezone) {
+    return value
+  }
+
+  return value.utc(false)
 }
 
 export function toLocalDate ({ date, timezoneoffset = store.getters.timezoneoffset, usebrowsertimezone = store.getters.usebrowsertimezone }) {

ui/src/views/plugins/quota/CreateQuotaTariff.vue

@@ -73,6 +73,7 @@
           v-model:value="form.startDate"
           :disabled-date="disabledStartDate"
           :placeholder="$t('placeholder.quota.tariff.startdate')"
+          show-time
         />
       </a-form-item>
       <a-form-item ref="endDate" name="endDate">
@@ -83,6 +84,7 @@
           v-model:value="form.endDate"
           :disabled-date="disabledEndDate"
           :placeholder="$t('placeholder.quota.tariff.enddate')"
+          show-time
         />
       </a-form-item>
       <div :span="24" class="action-button">
@@ -98,7 +100,7 @@ import { api } from '@/api'
 import { ref, reactive, toRaw } from 'vue'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 import { getQuotaTypes } from '@/utils/quota'
-import { dayjs, isDayJsObjectToday, parseDayJsObject } from '@/utils/date'
+import { dayjs, parseDayJsObject } from '@/utils/date'
 import { mixinForm } from '@/utils/mixin'
 
 export default {
@@ -145,11 +147,11 @@ export default {
         values.usageType = values.usageType.split('-')[0]
 
         if (values.startDate) {
-          values.startDate = isDayJsObjectToday(values.startDate) ? null : parseDayJsObject({ value: values.startDate, format: 'YYYY-MM-DD' })
+          values.startDate = parseDayJsObject({ value: values.startDate })
         }
 
         if (values.endDate) {
-          values.endDate = parseDayJsObject({ value: values.endDate, format: 'YYYY-MM-DD' })
+          values.endDate = parseDayJsObject({ value: values.endDate })
         }
 
         this.loading = true

ui/src/views/plugins/quota/EditQuotaTariff.vue

@@ -50,6 +50,7 @@
           v-model:value="form.endDate"
           :disabled-date="disabledEndDate"
           :placeholder="$t('placeholder.quota.tariff.enddate')"
+          show-time
         />
       </a-form-item>
       <div :span="24" class="action-button">
@@ -66,6 +67,7 @@ import { dayjs, parseDateToDatePicker, parseDayJsObject } from '@/utils/date'
 import { mixinForm } from '@/utils/mixin'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 import { ref, reactive, toRaw } from 'vue'
+import store from '@/store'
 
 export default {
   name: 'EditQuotaTariff',
@@ -125,10 +127,8 @@ export default {
           params.value = values.value
         }
 
-        const resourceEndDate = this.resource.endDate?.split('T')[0]
-        const parsedEndDate = parseDayJsObject({ value: values.endDate, format: 'YYYY-MM-DD' })
-        if (parsedEndDate && resourceEndDate !== parsedEndDate) {
-          params.enddate = parsedEndDate
+        if (values.endDate && !values.endDate.isSame(this.resource.endDate)) {
+          params.enddate = parseDayJsObject({ value: values.endDate })
         }
 
         if (Object.keys(params).length === 1) {
@@ -159,7 +159,13 @@ export default {
       })
     },
     disabledEndDate (current) {
-      return current < dayjs.utc(this.resource.effectiveDate).startOf('day')
+      const lowerEndDateLimit = dayjs(this.resource.effectiveDate)
+      const startOfToday = dayjs().startOf('day')
+
+      if (store.getters.usebrowsertimezone) {
+        return current < startOfToday || current < lowerEndDateLimit.startOf('day')
+      }
+      return current < startOfToday || current < lowerEndDateLimit.utc(false).startOf('day')
     }
   }
 }