From 5bde6b723aded3e7530d7dfefc467880b72240c7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Jun 2024 13:53:30 +0530
Subject: [PATCH] fix: replaced date pickers with frappe ui's datepickers

---
 .../src/components/Controls/DatePicker.vue    | 270 ------------
 .../components/Controls/DateRangePicker.vue   | 314 --------------
 .../components/Controls/DatetimePicker.vue    | 384 ------------------
 frontend/src/components/Fields.vue            |  14 +-
 frontend/src/components/Filter.vue            |  21 +-
 .../src/components/Modals/EditValueModal.vue  |   3 +-
 frontend/src/components/Modals/TaskModal.vue  |   9 +-
 frontend/src/components/QuickFilterField.vue  |   6 +-
 8 files changed, 23 insertions(+), 998 deletions(-)
 delete mode 100644 frontend/src/components/Controls/DatePicker.vue
 delete mode 100644 frontend/src/components/Controls/DateRangePicker.vue
 delete mode 100644 frontend/src/components/Controls/DatetimePicker.vue

diff --git a/frontend/src/components/Controls/DatePicker.vue b/frontend/src/components/Controls/DatePicker.vue
deleted file mode 100644
index 583aebd3..00000000
--- a/frontend/src/components/Controls/DatePicker.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<template>
-  <Popover
-    @open="selectCurrentMonthYear"
-    class="flex w-full [&>div:first-child]:w-full"
-  >
-    <template #target="{ togglePopover }">
-      <Input
-        readonly
-        type="text"
-        :placeholder="placeholder"
-        :value="value && formatter ? formatter(value) : value"
-        @focus="!readonly ? togglePopover() : null"
-        class="w-full"
-        :class="inputClass"
-        v-bind="$attrs"
-      />
-    </template>
-    <template #body="{ togglePopover }">
-      <div
-        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
-      >
-        <div class="flex items-center p-1 text-gray-500">
-          <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
-            <FeatherIcon
-              :stroke-width="2"
-              name="chevron-left"
-              class="h-4 w-4"
-            />
-          </Button>
-          <div class="flex-1 text-center text-base font-medium text-gray-700">
-            {{ formatMonth }}
-          </div>
-          <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
-            <FeatherIcon
-              :stroke-width="2"
-              name="chevron-right"
-              class="h-4 w-4"
-            />
-          </Button>
-        </div>
-        <div class="flex items-center justify-center gap-1 p-1">
-          <TextInput
-            class="text-sm"
-            type="text"
-            :value="value"
-            @change="
-              selectDate(getDate($event.target.value)) || togglePopover()
-            "
-          />
-          <Button
-            :label="__('Today')"
-            class="text-sm"
-            @click="selectDate(getDate()) || togglePopover()"
-          />
-        </div>
-        <div
-          class="flex flex-col items-center justify-center p-1 text-gray-800"
-        >
-          <div class="flex items-center text-xs uppercase">
-            <div
-              class="flex h-6 w-8 items-center justify-center text-center"
-              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
-              :key="i"
-            >
-              {{ __(d) }}
-            </div>
-          </div>
-          <div
-            class="flex items-center"
-            v-for="(week, i) in datesAsWeeks"
-            :key="i"
-          >
-            <div
-              v-for="date in week"
-              :key="toValue(date)"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
-              :class="{
-                'text-gray-400': date.getMonth() !== currentMonth - 1,
-                'font-extrabold text-gray-900':
-                  toValue(date) === toValue(today),
-                'bg-gray-800 text-white hover:bg-gray-800':
-                  toValue(date) === value,
-              }"
-              @click="
-                () => {
-                  selectDate(date)
-                  togglePopover()
-                }
-              "
-            >
-              {{ __(date.getDate()) }}
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-end p-1">
-          <Button
-            :label="__('Clear')"
-            class="text-sm"
-            @click="
-              () => {
-                selectDate('')
-                togglePopover()
-              }
-            "
-          />
-        </div>
-      </div>
-    </template>
-  </Popover>
-</template>
-
-<script>
-import Popover from '@/components/frappe-ui/Popover.vue'
-export default {
-  name: 'DatePicker',
-  props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
-  emits: ['change'],
-  components: {
-    Popover,
-  },
-  data() {
-    return {
-      currentYear: null,
-      currentMonth: null,
-    }
-  },
-  created() {
-    this.selectCurrentMonthYear()
-  },
-  computed: {
-    today() {
-      return this.getDate()
-    },
-    datesAsWeeks() {
-      let datesAsWeeks = []
-      let dates = this.dates.slice()
-      while (dates.length) {
-        let week = dates.splice(0, 7)
-        datesAsWeeks.push(week)
-      }
-      return datesAsWeeks
-    },
-    dates() {
-      if (!(this.currentYear && this.currentMonth)) {
-        return []
-      }
-      let monthIndex = this.currentMonth - 1
-      let year = this.currentYear
-
-      let firstDayOfMonth = this.getDate(year, monthIndex, 1)
-      let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
-      let leftPaddingCount = firstDayOfMonth.getDay()
-      let rightPaddingCount = 6 - lastDayOfMonth.getDay()
-
-      let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
-      let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
-      let daysInMonth = this.getDaysInMonth(monthIndex, year)
-      let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
-
-      let dates = [
-        ...leftPadding,
-        firstDayOfMonth,
-        ...datesInMonth,
-        ...rightPadding,
-      ]
-      if (dates.length < 42) {
-        const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
-        dates = dates.concat(...finalPadding)
-      }
-      return dates
-    },
-    formatMonth() {
-      let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
-      let month = __(
-        date.toLocaleString('en-US', {
-          month: 'long',
-        })
-      )
-      return `${month}, ${date.getFullYear()}`
-    },
-  },
-  methods: {
-    selectDate(date) {
-      this.$emit('change', this.toValue(date))
-    },
-    selectCurrentMonthYear() {
-      let date = this.value ? this.getDate(this.value) : this.getDate()
-      if (date === 'Invalid Date') {
-        date = this.getDate()
-      }
-      this.currentYear = date.getFullYear()
-      this.currentMonth = date.getMonth() + 1
-    },
-    prevMonth() {
-      this.changeMonth(-1)
-    },
-    nextMonth() {
-      this.changeMonth(1)
-    },
-    changeMonth(adder) {
-      this.currentMonth = this.currentMonth + adder
-      if (this.currentMonth < 1) {
-        this.currentMonth = 12
-        this.currentYear = this.currentYear - 1
-      }
-      if (this.currentMonth > 12) {
-        this.currentMonth = 1
-        this.currentYear = this.currentYear + 1
-      }
-    },
-    getDatesAfter(date, count) {
-      let incrementer = 1
-      if (count < 0) {
-        incrementer = -1
-        count = Math.abs(count)
-      }
-      let dates = []
-      while (count) {
-        date = this.getDate(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() + incrementer
-        )
-        dates.push(date)
-        count--
-      }
-      if (incrementer === -1) {
-        return dates.reverse()
-      }
-      return dates
-    },
-
-    getDaysInMonth(monthIndex, year) {
-      let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-      let daysInMonth = daysInMonthMap[monthIndex]
-      if (monthIndex === 1 && this.isLeapYear(year)) {
-        return 29
-      }
-      return daysInMonth
-    },
-
-    isLeapYear(year) {
-      if (year % 400 === 0) return true
-      if (year % 100 === 0) return false
-      if (year % 4 === 0) return true
-      return false
-    },
-
-    toValue(date) {
-      if (!date) {
-        return ''
-      }
-
-      // toISOString is buggy and reduces the day by one
-      // this is because it considers the UTC timestamp
-      // in order to circumvent that we need to use luxon/moment
-      // but that refactor could take some time, so fixing the time difference
-      // as suggested in this answer.
-      // https://stackoverflow.com/a/16084846/3541205
-      date.setHours(0, -date.getTimezoneOffset(), 0, 0)
-      return date.toISOString().slice(0, 10)
-    },
-
-    getDate(...args) {
-      let d = new Date(...args)
-      return d
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/Controls/DateRangePicker.vue b/frontend/src/components/Controls/DateRangePicker.vue
deleted file mode 100644
index d23f115f..00000000
--- a/frontend/src/components/Controls/DateRangePicker.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<template>
-  <Popover
-    @open="selectCurrentMonthYear"
-    class="flex w-full [&>div:first-child]:w-full"
-  >
-    <template #target="{ togglePopover }">
-      <Input
-        readonly
-        type="text"
-        :placeholder="placeholder"
-        :value="formatter ? formatDates(value) : value"
-        @focus="!readonly ? togglePopover() : null"
-        class="w-full"
-        :class="inputClass"
-        v-bind="$attrs"
-      />
-    </template>
-    <template #body="{ togglePopover }">
-      <div
-        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
-      >
-        <div class="flex items-center p-1 text-gray-500">
-          <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
-            <FeatherIcon
-              :stroke-width="2"
-              name="chevron-left"
-              class="h-4 w-4"
-            />
-          </Button>
-          <div class="flex-1 text-center text-base font-medium text-gray-700">
-            {{ formatMonth }}
-          </div>
-          <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
-            <FeatherIcon
-              :stroke-width="2"
-              name="chevron-right"
-              class="h-4 w-4"
-            />
-          </Button>
-        </div>
-        <div class="flex items-center justify-center gap-1 p-1">
-          <TextInput class="w-28 text-sm" type="text" v-model="fromDate" />
-          <TextInput class="w-28 text-sm" type="text" v-model="toDate" />
-        </div>
-        <div
-          class="flex flex-col items-center justify-center p-1 text-gray-800"
-        >
-          <div class="flex items-center text-xs uppercase">
-            <div
-              class="flex h-6 w-8 items-center justify-center text-center"
-              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
-              :key="i"
-            >
-              {{ __(d) }}
-            </div>
-          </div>
-          <div
-            class="flex items-center"
-            v-for="(week, i) in datesAsWeeks"
-            :key="i"
-          >
-            <div
-              v-for="date in week"
-              :key="toValue(date)"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
-              :class="{
-                'text-gray-400': date.getMonth() !== currentMonth - 1,
-                'text-gray-900': date.getMonth() === currentMonth - 1,
-                'font-extrabold text-gray-900':
-                  toValue(date) === toValue(today),
-                'rounded-none bg-gray-100': isInRange(date),
-                'rounded-l-md rounded-r-none bg-gray-800 text-white hover:bg-gray-800':
-                  fromDate && toValue(date) === toValue(fromDate),
-                'rounded-r-md bg-gray-800 text-white hover:bg-gray-800':
-                  toDate && toValue(date) === toValue(toDate),
-              }"
-              @click="() => handleDateClick(date)"
-            >
-              {{ date.getDate() }}
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-end space-x-1 p-1">
-          <Button
-            :label="__('Clear')"
-            @click="() => clearDates() | togglePopover()"
-            :disabled="!fromDate || !toDate"
-          />
-          <Button
-            variant="solid"
-            :label="__('Apply')"
-            :disabled="!fromDate || !toDate"
-            @click="() => selectDates() | togglePopover()"
-          />
-        </div>
-      </div>
-    </template>
-  </Popover>
-</template>
-
-<script>
-import Popover from '@/components/frappe-ui/Popover.vue'
-export default {
-  name: 'DateRangePicker',
-  props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
-  emits: ['change'],
-  components: {
-    Popover,
-  },
-  data() {
-    const fromDate = this.value ? this.value[0] : ''
-    const toDate = this.value ? this.value[1] : ''
-    return {
-      currentYear: null,
-      currentMonth: null,
-      fromDate,
-      toDate,
-    }
-  },
-  created() {
-    this.selectCurrentMonthYear()
-  },
-  computed: {
-    today() {
-      return this.getDate()
-    },
-    datesAsWeeks() {
-      let datesAsWeeks = []
-      let dates = this.dates.slice()
-      while (dates.length) {
-        let week = dates.splice(0, 7)
-        datesAsWeeks.push(week)
-      }
-      return datesAsWeeks
-    },
-    dates() {
-      if (!(this.currentYear && this.currentMonth)) {
-        return []
-      }
-      let monthIndex = this.currentMonth - 1
-      let year = this.currentYear
-
-      let firstDayOfMonth = this.getDate(year, monthIndex, 1)
-      let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
-      let leftPaddingCount = firstDayOfMonth.getDay()
-      let rightPaddingCount = 6 - lastDayOfMonth.getDay()
-
-      let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
-      let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
-      let daysInMonth = this.getDaysInMonth(monthIndex, year)
-      let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
-
-      let dates = [
-        ...leftPadding,
-        firstDayOfMonth,
-        ...datesInMonth,
-        ...rightPadding,
-      ]
-      if (dates.length < 42) {
-        const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
-        dates = dates.concat(...finalPadding)
-      }
-      return dates
-    },
-    formatMonth() {
-      let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
-      let month = __(
-        date.toLocaleString('en-US', {
-          month: 'long',
-        })
-      )
-      return `${month}, ${date.getFullYear()}`
-    },
-  },
-  methods: {
-    handleDateClick(date) {
-      if (this.fromDate && this.toDate) {
-        this.fromDate = this.toValue(date)
-        this.toDate = ''
-      } else if (this.fromDate && !this.toDate) {
-        this.toDate = this.toValue(date)
-      } else {
-        this.fromDate = this.toValue(date)
-      }
-      this.swapDatesIfNecessary()
-    },
-    selectDates() {
-      if (!this.fromDate && !this.toDate) {
-        return this.$emit('change', '')
-      }
-      this.$emit('change', `${this.fromDate},${this.toDate}`)
-    },
-    swapDatesIfNecessary() {
-      if (!this.fromDate || !this.toDate) {
-        return
-      }
-      // if fromDate is greater than toDate, swap them
-      let fromDate = this.getDate(this.fromDate)
-      let toDate = this.getDate(this.toDate)
-      if (fromDate > toDate) {
-        let temp = fromDate
-        fromDate = toDate
-        toDate = temp
-      }
-      this.fromDate = this.toValue(fromDate)
-      this.toDate = this.toValue(toDate)
-    },
-    selectCurrentMonthYear() {
-      let date = this.toDate ? this.getDate(this.toDate) : this.today
-      this.currentYear = date.getFullYear()
-      this.currentMonth = date.getMonth() + 1
-    },
-    prevMonth() {
-      this.changeMonth(-1)
-    },
-    nextMonth() {
-      this.changeMonth(1)
-    },
-    changeMonth(adder) {
-      this.currentMonth = this.currentMonth + adder
-      if (this.currentMonth < 1) {
-        this.currentMonth = 12
-        this.currentYear = this.currentYear - 1
-      }
-      if (this.currentMonth > 12) {
-        this.currentMonth = 1
-        this.currentYear = this.currentYear + 1
-      }
-    },
-    getDatesAfter(date, count) {
-      let incrementer = 1
-      if (count < 0) {
-        incrementer = -1
-        count = Math.abs(count)
-      }
-      let dates = []
-      while (count) {
-        date = this.getDate(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() + incrementer
-        )
-        dates.push(date)
-        count--
-      }
-      if (incrementer === -1) {
-        return dates.reverse()
-      }
-      return dates
-    },
-
-    getDaysInMonth(monthIndex, year) {
-      let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-      let daysInMonth = daysInMonthMap[monthIndex]
-      if (monthIndex === 1 && this.isLeapYear(year)) {
-        return 29
-      }
-      return daysInMonth
-    },
-
-    isLeapYear(year) {
-      if (year % 400 === 0) return true
-      if (year % 100 === 0) return false
-      if (year % 4 === 0) return true
-      return false
-    },
-
-    toValue(date) {
-      if (!date) {
-        return ''
-      }
-      if (typeof date === 'string') {
-        return date
-      }
-
-      // toISOString is buggy and reduces the day by one
-      // this is because it considers the UTC timestamp
-      // in order to circumvent that we need to use luxon/moment
-      // but that refactor could take some time, so fixing the time difference
-      // as suggested in this answer.
-      // https://stackoverflow.com/a/16084846/3541205
-      date.setHours(0, -date.getTimezoneOffset(), 0, 0)
-      return date.toISOString().slice(0, 10)
-    },
-
-    getDate(...args) {
-      let d = new Date(...args)
-      return d
-    },
-
-    isInRange(date) {
-      if (!this.fromDate || !this.toDate) {
-        return false
-      }
-      return (
-        date >= this.getDate(this.fromDate) && date <= this.getDate(this.toDate)
-      )
-    },
-
-    formatDates(value) {
-      if (!value) {
-        return ''
-      }
-      const values = value.split(',')
-      return this.formatter(values[0]) + ' to ' + this.formatter(values[1])
-    },
-    clearDates() {
-      this.fromDate = ''
-      this.toDate = ''
-      this.selectDates()
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/Controls/DatetimePicker.vue b/frontend/src/components/Controls/DatetimePicker.vue
deleted file mode 100644
index 65708189..00000000
--- a/frontend/src/components/Controls/DatetimePicker.vue
+++ /dev/null
@@ -1,384 +0,0 @@
-<template>
-  <Popover
-    @open="selectCurrentMonthYear"
-    class="flex w-full [&>div:first-child]:w-full"
-  >
-    <template #target="{ togglePopover }">
-      <Input
-        readonly
-        type="text"
-        :placeholder="placeholder"
-        :value="value && formatter ? formatter(value) : value"
-        @focus="!readonly ? togglePopover() : null"
-        class="w-full"
-        :class="inputClass"
-        v-bind="$attrs"
-      />
-    </template>
-    <template #body="{ togglePopover }">
-      <div
-        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
-      >
-        <div class="flex items-center p-1 text-gray-500">
-          <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
-            <FeatherIcon
-              :stroke-width="2"
-              name="chevron-left"
-              class="h-4 w-4"
-            />
-          </Button>
-          <div class="flex-1 text-center text-base font-medium text-gray-700">
-            {{ formatMonth }}
-          </div>
-          <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
-            <FeatherIcon
-              :stroke-width="2"
-              name="chevron-right"
-              class="h-4 w-4"
-            />
-          </Button>
-        </div>
-        <div class="flex items-center justify-center gap-1 p-1">
-          <TextInput
-            class="text-sm"
-            type="text"
-            :value="value"
-            @change="updateDate($event.target.value) || togglePopover()"
-          />
-          <Button
-            :label="__('Now')"
-            class="text-sm"
-            @click="selectDate(getDate(), false, true) || togglePopover()"
-          />
-        </div>
-        <div
-          class="flex flex-col items-center justify-center p-1 text-gray-800"
-        >
-          <div class="flex items-center text-xs uppercase">
-            <div
-              class="flex h-6 w-8 items-center justify-center text-center"
-              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
-              :key="i"
-            >
-              {{ __(d) }}
-            </div>
-          </div>
-          <div
-            class="flex items-center"
-            v-for="(week, i) in datesAsWeeks"
-            :key="i"
-          >
-            <div
-              v-for="date in week"
-              :key="toValue(date)"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
-              :class="{
-                'text-gray-400': date.getMonth() !== currentMonth - 1,
-                'font-extrabold text-gray-900':
-                  toValue(date) === toValue(today),
-                'bg-gray-800 text-white hover:bg-gray-800':
-                  toValue(date) === value,
-              }"
-              @click="
-                () => {
-                  selectDate(date)
-                  togglePopover()
-                }
-              "
-            >
-              {{ date.getDate() }}
-            </div>
-          </div>
-        </div>
-        <div class="flex items-center justify-around gap-2 p-1">
-          <div>
-            {{ twoDigit(hour) }} : {{ twoDigit(minute) }} :
-            {{ twoDigit(second) }}
-          </div>
-          <div class="flex flex-col items-center justify-center">
-            <div class="slider flex min-h-4 items-center justify-center">
-              <TextInput
-                v-model="hour"
-                name="hours"
-                type="range"
-                min="0"
-                max="23"
-                step="1"
-                @change="() => changeTime() || togglePopover()"
-              />
-            </div>
-            <div class="slider flex min-h-4 items-center justify-center">
-              <TextInput
-                v-model="minute"
-                name="minutes"
-                type="range"
-                min="0"
-                max="59"
-                step="1"
-                @change="() => changeTime() || togglePopover()"
-              />
-            </div>
-            <div class="slider flex min-h-4 items-center justify-center">
-              <TextInput
-                v-model="second"
-                name="seconds"
-                type="range"
-                min="0"
-                max="59"
-                step="1"
-                @change="() => changeTime() || togglePopover()"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-end p-1">
-          <Button
-            :label="__('Clear')"
-            class="text-sm"
-            @click="
-              () => {
-                selectDate('')
-                togglePopover()
-              }
-            "
-          />
-        </div>
-      </div>
-    </template>
-  </Popover>
-</template>
-
-<script>
-import Popover from '@/components/frappe-ui/Popover.vue'
-export default {
-  name: 'DatePicker',
-  props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
-  emits: ['change'],
-  components: {
-    Popover,
-  },
-  data() {
-    return {
-      currentYear: null,
-      currentMonth: null,
-      hour: 0,
-      minute: 0,
-      second: 0,
-    }
-  },
-  created() {
-    this.selectCurrentMonthYear()
-  },
-  computed: {
-    today() {
-      return this.getDate()
-    },
-    datesAsWeeks() {
-      let datesAsWeeks = []
-      let dates = this.dates.slice()
-      while (dates.length) {
-        let week = dates.splice(0, 7)
-        datesAsWeeks.push(week)
-      }
-      return datesAsWeeks
-    },
-    dates() {
-      if (!(this.currentYear && this.currentMonth)) {
-        return []
-      }
-      let monthIndex = this.currentMonth - 1
-      let year = this.currentYear
-
-      let firstDayOfMonth = this.getDate(year, monthIndex, 1)
-      let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
-      let leftPaddingCount = firstDayOfMonth.getDay()
-      let rightPaddingCount = 6 - lastDayOfMonth.getDay()
-
-      let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
-      let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
-      let daysInMonth = this.getDaysInMonth(monthIndex, year)
-      let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
-
-      let dates = [
-        ...leftPadding,
-        firstDayOfMonth,
-        ...datesInMonth,
-        ...rightPadding,
-      ]
-      if (dates.length < 42) {
-        const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
-        dates = dates.concat(...finalPadding)
-      }
-      return dates
-    },
-    formatMonth() {
-      let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
-      let month = __(
-        date.toLocaleString('en-US', {
-          month: 'long',
-        })
-      )
-      return `${month}, ${date.getFullYear()}`
-    },
-  },
-  methods: {
-    changeTime() {
-      let date = this.value ? this.getDate(this.value) : this.getDate()
-      this.selectDate(date, true)
-    },
-    selectDate(date, isTimeChange = false, isNow = false) {
-      if (!isTimeChange) {
-        let currentDate =
-          this.value && !isNow ? this.getDate(this.value) : this.getDate()
-        this.hour = currentDate.getHours()
-        this.minute = currentDate.getMinutes()
-        this.second = currentDate.getSeconds()
-      }
-      this.$emit('change', this.toValue(date))
-    },
-    selectCurrentMonthYear() {
-      let date = this.value ? this.getDate(this.value) : this.getDate()
-      if (date === 'Invalid Date') {
-        date = this.getDate()
-      }
-      this.currentYear = date.getFullYear()
-      this.currentMonth = date.getMonth() + 1
-      this.hour = date.getHours()
-      this.minute = date.getMinutes()
-      this.second = date.getSeconds()
-    },
-    prevMonth() {
-      this.changeMonth(-1)
-    },
-    nextMonth() {
-      this.changeMonth(1)
-    },
-    changeMonth(adder) {
-      this.currentMonth = this.currentMonth + adder
-      if (this.currentMonth < 1) {
-        this.currentMonth = 12
-        this.currentYear = this.currentYear - 1
-      }
-      if (this.currentMonth > 12) {
-        this.currentMonth = 1
-        this.currentYear = this.currentYear + 1
-      }
-    },
-    getDatesAfter(date, count) {
-      let incrementer = 1
-      if (count < 0) {
-        incrementer = -1
-        count = Math.abs(count)
-      }
-      let dates = []
-      while (count) {
-        date = this.getDate(
-          date.getFullYear(),
-          date.getMonth(),
-          date.getDate() + incrementer
-        )
-        dates.push(date)
-        count--
-      }
-      if (incrementer === -1) {
-        return dates.reverse()
-      }
-      return dates
-    },
-    getDaysInMonth(monthIndex, year) {
-      let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-      let daysInMonth = daysInMonthMap[monthIndex]
-      if (monthIndex === 1 && this.isLeapYear(year)) {
-        return 29
-      }
-      return daysInMonth
-    },
-    isLeapYear(year) {
-      if (year % 400 === 0) return true
-      if (year % 100 === 0) return false
-      if (year % 4 === 0) return true
-      return false
-    },
-    twoDigit(number) {
-      return number.toString().padStart(2, '0')
-    },
-    toValue(date) {
-      if (!date) return ''
-
-      date.setHours(this.hour, this.minute, this.second, 0)
-      // "YYYY-MM-DD HH:MM:SS"
-      return `${date.getFullYear()}-${this.twoDigit(
-        date.getMonth() + 1
-      )}-${this.twoDigit(date.getDate())} ${this.twoDigit(
-        date.getHours()
-      )}:${this.twoDigit(date.getMinutes())}:${this.twoDigit(
-        date.getSeconds()
-      )}`
-    },
-    getDate(...args) {
-      let d = new Date(...args)
-      return d
-    },
-    updateDate(date) {
-      date = this.getDate(date)
-      this.hour = date.getHours()
-      this.minute = date.getMinutes()
-      this.second = date.getSeconds()
-      this.selectDate(date, true)
-    },
-  },
-}
-</script>
-
-<style scoped>
-.slider {
-  --trackHeight: 1px;
-  --thumbRadius: 10px;
-}
-:deep(.slider input[type='range']) {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 100%;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-}
-
-:deep(.slider input[type='range']::-webkit-slider-runnable-track) {
-  appearance: none;
-  background: #000;
-  height: var(--trackHeight);
-  border-radius: 999px;
-}
-
-:deep(.slider input[type='range']:focus-visible) {
-  outline: none;
-}
-
-:deep(.slider input[type='range']::-webkit-slider-thumb) {
-  width: var(--thumbRadius);
-  height: var(--thumbRadius);
-  margin-top: calc((var(--trackHeight) - var(--thumbRadius)) / 2);
-  background: #fff;
-  border-radius: 3px;
-  pointer-events: all;
-  appearance: none;
-  outline: 1px solid #777777;
-  z-index: 1;
-}
-
-:deep(.slider:hover input[type='range']::-webkit-slider-thumb) {
-  outline: 1px solid #000;
-}
-:deep(.slider input[type='range']::-webkit-slider-thumb) {
-  width: var(--thumbRadius);
-  height: var(--thumbRadius);
-  margin-top: calc((var(--trackHeight) - var(--thumbRadius)) / 2);
-  background: #fff;
-  border-radius: 3px;
-  pointer-events: all;
-  appearance: none;
-  z-index: 1;
-}
-</style>
diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
index 6ecd6ca8..6bfdc09f 100644
--- a/frontend/src/components/Fields.vue
+++ b/frontend/src/components/Fields.vue
@@ -132,19 +132,15 @@
               </template>
             </NestedPopover>
           </div>
-          <DatetimePicker
+          <DateTimePicker
             v-else-if="field.type === 'Datetime'"
-            icon-left="calendar"
-            :value="data[field.name]"
-            @change="(val) => (data[field.name] = val)"
+            v-model="data[field.name]"
             :placeholder="__(field.placeholder || field.label)"
             input-class="border-none"
           />
           <DatePicker
             v-else-if="field.type === 'Date'"
-            icon-left="calendar"
-            :value="data[field.name]"
-            @change="(val) => (data[field.name] = val)"
+            v-model="data[field.name]"
             :placeholder="__(field.placeholder || field.label)"
             input-class="border-none"
           />
@@ -173,15 +169,13 @@
 </template>
 
 <script setup>
-import DatePicker from '@/components/Controls/DatePicker.vue'
-import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import DropdownItem from '@/components/DropdownItem.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
-import { Tooltip } from 'frappe-ui'
+import { Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
 
 const { getUser } = usersStore()
 
diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index f211a81e..a67bf7c4 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -34,10 +34,10 @@
             v-for="(f, i) in filters"
             :key="i"
             id="filter-list"
-            class="sm:mb-3 mb-4"
+            class="mb-4 sm:mb-3"
           >
             <div v-if="isMobileView" class="flex flex-col gap-2">
-              <div class="flex w-full items-center justify-between -mb-2">
+              <div class="-mb-2 flex w-full items-center justify-between">
                 <div class="text-base text-gray-600">
                   {{ i == 0 ? __('Where') : __('And') }}
                 </div>
@@ -155,14 +155,18 @@
   </NestedPopover>
 </template>
 <script setup>
-import DatePicker from '@/components/Controls/DatePicker.vue'
-import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
-import DateRangePicker from '@/components/Controls/DateRangePicker.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import FilterIcon from '@/components/Icons/FilterIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
-import { FormControl, createResource, Tooltip } from 'frappe-ui'
+import {
+  FormControl,
+  createResource,
+  Tooltip,
+  DatePicker,
+  DateTimePicker,
+  DateRangePicker,
+} from 'frappe-ui'
 import { h, computed, onMounted } from 'vue'
 import { isMobileView } from '@/composables/settings'
 
@@ -395,10 +399,11 @@ function getValSelect(f) {
   } else if (typeNumber.includes(fieldtype)) {
     return h(FormControl, { type: 'number' })
   } else if (typeDate.includes(fieldtype) && operator == 'between') {
-    return h(DateRangePicker, { value: f.value })
+    return h(DateRangePicker, { value: f.value, iconLeft: '' })
   } else if (typeDate.includes(fieldtype)) {
-    return h(fieldtype == 'Date' ? DatePicker : DatetimePicker, {
+    return h(fieldtype == 'Date' ? DatePicker : DateTimePicker, {
       value: f.value,
+      iconLeft: '',
     })
   } else {
     return h(FormControl, { type: 'text' })
diff --git a/frontend/src/components/Modals/EditValueModal.vue b/frontend/src/components/Modals/EditValueModal.vue
index 9f60a6fa..43540602 100644
--- a/frontend/src/components/Modals/EditValueModal.vue
+++ b/frontend/src/components/Modals/EditValueModal.vue
@@ -34,10 +34,9 @@
 </template>
 
 <script setup>
-import DatePicker from '@/components/Controls/DatePicker.vue'
 import Link from '@/components/Controls/Link.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
-import { FormControl, call, createResource, TextEditor } from 'frappe-ui'
+import { FormControl, call, createResource, TextEditor, DatePicker } from 'frappe-ui'
 import { ref, computed, onMounted, h } from 'vue'
 
 const typeCheck = ['Check']
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index e6183d2f..46e903c3 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -91,11 +91,9 @@
               </Tooltip>
             </template>
           </Link>
-          <DatetimePicker
+          <DateTimePicker
             class="datepicker w-36"
-            icon-left="calendar"
-            :value="_task.due_date"
-            @change="(val) => (_task.due_date = val)"
+            v-model="_task.due_date"
             :placeholder="__('01/04/2024 11:30 PM')"
             input-class="border-none"
           />
@@ -120,8 +118,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { taskStatusOptions, taskPriorityOptions } from '@/utils'
 import { usersStore } from '@/stores/users'
-import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
-import { TextEditor, Dropdown, Tooltip, call } from 'frappe-ui'
+import { TextEditor, Dropdown, Tooltip, call, DateTimePicker } from 'frappe-ui'
 import { ref, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/frontend/src/components/QuickFilterField.vue b/frontend/src/components/QuickFilterField.vue
index 1a0a35e9..a932b0bb 100644
--- a/frontend/src/components/QuickFilterField.vue
+++ b/frontend/src/components/QuickFilterField.vue
@@ -25,7 +25,7 @@
   <component
     v-else-if="['Date', 'Datetime'].includes(filter.type)"
     class="border-none"
-    :is="filter.type === 'Date' ? DatePicker : DatetimePicker"
+    :is="filter.type === 'Date' ? DatePicker : DateTimePicker"
     :value="filter.value"
     @change="(v) => updateFilter(filter, v)"
     :placeholder="filter.label"
@@ -39,10 +39,8 @@
   />
 </template>
 <script setup>
-import DatePicker from '@/components/Controls/DatePicker.vue'
-import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
 import Link from '@/components/Controls/Link.vue'
-import { TextInput, FormControl } from 'frappe-ui'
+import { TextInput, FormControl, DatePicker, DateTimePicker } from 'frappe-ui'
 import { useDebounceFn } from '@vueuse/core'
 
 const props = defineProps({