From c6fe61c5456d637849d40f175d3d47c106388323 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 5 Dec 2022 15:31:31 +0530
Subject: [PATCH 1/2] feat: add datetime component - refactor date component

---
 fyo/utils/format.ts                           |  10 +-
 models/baseModels/Invoice/Invoice.ts          |   2 +-
 .../baseModels/JournalEntry/JournalEntry.ts   |   2 +-
 models/baseModels/Payment/Payment.ts          |   2 +-
 models/inventory/StockTransfer.ts             |   2 +-
 src/components/Controls/Date.vue              |  47 +-
 src/components/Controls/Datetime.vue          |  99 ++++
 src/components/Controls/DatetimePicker.vue    | 538 ++++++++++++++++++
 src/components/Controls/FormControl.vue       |   3 +-
 src/components/DatePicker/DatePicker.vue      | 281 ---------
 10 files changed, 660 insertions(+), 326 deletions(-)
 create mode 100644 src/components/Controls/Datetime.vue
 create mode 100644 src/components/Controls/DatetimePicker.vue
 delete mode 100644 src/components/DatePicker/DatePicker.vue

diff --git a/fyo/utils/format.ts b/fyo/utils/format.ts
index 918d61a9..d5c80df1 100644
--- a/fyo/utils/format.ts
+++ b/fyo/utils/format.ts
@@ -9,7 +9,7 @@ import {
   DEFAULT_CURRENCY,
   DEFAULT_DATE_FORMAT,
   DEFAULT_DISPLAY_PRECISION,
-  DEFAULT_LOCALE
+  DEFAULT_LOCALE,
 } from './consts';
 
 export function format(
@@ -66,6 +66,10 @@ function toDatetime(value: DocValue) {
 }
 
 function formatDatetime(value: DocValue, fyo: Fyo): string {
+  if (value == null) {
+    return '';
+  }
+
   const dateFormat =
     (fyo.singles.SystemSettings?.dateFormat as string) ?? DEFAULT_DATE_FORMAT;
   const formattedDatetime = toDatetime(value).toFormat(
@@ -80,6 +84,10 @@ function formatDatetime(value: DocValue, fyo: Fyo): string {
 }
 
 function formatDate(value: DocValue, fyo: Fyo): string {
+  if (value == null) {
+    return '';
+  }
+
   const dateFormat =
     (fyo.singles.SystemSettings?.dateFormat as string) ?? DEFAULT_DATE_FORMAT;
 
diff --git a/models/baseModels/Invoice/Invoice.ts b/models/baseModels/Invoice/Invoice.ts
index a749f848..252d1de5 100644
--- a/models/baseModels/Invoice/Invoice.ts
+++ b/models/baseModels/Invoice/Invoice.ts
@@ -436,7 +436,7 @@ export abstract class Invoice extends Transactional {
 
       return defaults?.purchaseInvoiceTerms ?? '';
     },
-    date: () => new Date().toISOString().slice(0, 10),
+    date: () => new Date(),
   };
 
   static filters: FiltersMap = {
diff --git a/models/baseModels/JournalEntry/JournalEntry.ts b/models/baseModels/JournalEntry/JournalEntry.ts
index 156e1e00..2d357857 100644
--- a/models/baseModels/JournalEntry/JournalEntry.ts
+++ b/models/baseModels/JournalEntry/JournalEntry.ts
@@ -40,7 +40,7 @@ export class JournalEntry extends Transactional {
 
   static defaults: DefaultMap = {
     numberSeries: (doc) => getNumberSeries(doc.schemaName, doc.fyo),
-    date: () => DateTime.local().toISODate(),
+    date: () => new Date(),
   };
 
   static filters: FiltersMap = {
diff --git a/models/baseModels/Payment/Payment.ts b/models/baseModels/Payment/Payment.ts
index 68a4aed8..0f928138 100644
--- a/models/baseModels/Payment/Payment.ts
+++ b/models/baseModels/Payment/Payment.ts
@@ -381,7 +381,7 @@ export class Payment extends Transactional {
 
   static defaults: DefaultMap = {
     numberSeries: (doc) => getNumberSeries(doc.schemaName, doc.fyo),
-    date: () => new Date().toISOString(),
+    date: () => new Date(),
   };
 
   async _getAccountsMap(): Promise<AccountTypeMap> {
diff --git a/models/inventory/StockTransfer.ts b/models/inventory/StockTransfer.ts
index 76d2f296..5aae9c1f 100644
--- a/models/inventory/StockTransfer.ts
+++ b/models/inventory/StockTransfer.ts
@@ -43,7 +43,7 @@ export abstract class StockTransfer extends Transfer {
 
       return defaults?.purchaseReceiptTerms ?? '';
     },
-    date: () => new Date().toISOString().slice(0, 10),
+    date: () => new Date(),
   };
 
   static filters: FiltersMap = {
diff --git a/src/components/Controls/Date.vue b/src/components/Controls/Date.vue
index e2dd39a3..415cc7d5 100644
--- a/src/components/Controls/Date.vue
+++ b/src/components/Controls/Date.vue
@@ -1,42 +1,11 @@
-<template>
-  <div>
-    <div :class="labelClasses" v-if="showLabel">
-      {{ df.label }}
-    </div>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Datetime from './Datetime.vue';
 
-    <DatePicker
-      ref="input"
-      :show-mandatory="showMandatory"
-      :input-class="['bg-transparent', inputClasses, containerClasses]"
-      :value="value"
-      :placeholder="inputPlaceholder"
-      :readonly="isReadOnly"
-      :format-value="formatValue"
-      @change="(value) => triggerChange(value)"
-    />
-  </div>
-</template>
-
-<script>
-import { fyo } from 'src/initFyo';
-import DatePicker from '../DatePicker/DatePicker';
-import Base from './Base';
-
-export default {
-  name: 'Date',
-  extends: Base,
-  components: {
-    DatePicker,
+export default defineComponent({
+  data() {
+    return { selectTime: false };
   },
-  computed: {
-    inputType() {
-      return 'date';
-    },
-  },
-  methods: {
-    formatValue(value) {
-      return fyo.format(value, this.df);
-    },
-  },
-};
+  extends: Datetime,
+});
 </script>
diff --git a/src/components/Controls/Datetime.vue b/src/components/Controls/Datetime.vue
new file mode 100644
index 00000000..0ddace70
--- /dev/null
+++ b/src/components/Controls/Datetime.vue
@@ -0,0 +1,99 @@
+<template>
+  <Popover>
+    <!-- Datetime Selected Display -->
+    <template #target="{ togglePopover }">
+      <div :class="labelClasses" v-if="showLabel">
+        {{ df?.label }}
+      </div>
+      <div :class="[containerClasses, sizeClasses]" class="flex">
+        <p
+          :class="[baseInputClasses]"
+          class="overflow-auto no-scrollbar whitespace-nowrap"
+          v-if="!isEmpty"
+        >
+          {{ formattedValue }}
+        </p>
+        <p v-else-if="inputPlaceholder" class="text-base text-gray-500 w-full">
+          {{ inputPlaceholder }}
+        </p>
+
+        <button
+          v-if="!isReadOnly"
+          class="p-0.5 rounded -mr-1 ml-1"
+          :class="showMandatory ? 'bg-red-300' : 'bg-gray-300'"
+          @click="togglePopover"
+        >
+          <FeatherIcon
+            name="calendar"
+            class="w-4 h-4"
+            :class="showMandatory ? 'text-red-600' : 'text-gray-600'"
+          />
+        </button>
+      </div>
+    </template>
+
+    <!-- Datetime Input Popover -->
+    <template #content="{ togglePopover }">
+      <DatetimePicker
+        :select-time="selectTime"
+        :model-value="internalValue"
+        :format-value="formatValue"
+        @update:model-value="
+          (value) => {
+            triggerChange(value);
+            togglePopover();
+          }
+        "
+      />
+    </template>
+  </Popover>
+</template>
+
+<script lang="ts">
+import { Field } from 'schemas/types';
+import { defineComponent, PropType } from 'vue';
+import DatetimePicker from './DatetimePicker.vue';
+import FeatherIcon from '../FeatherIcon.vue';
+import Popover from '../Popover.vue';
+import Base from './Base.vue';
+
+export default defineComponent({
+  extends: Base,
+  props: { value: [Date, String], df: Object as PropType<Field> },
+  components: { Popover, FeatherIcon, DatetimePicker },
+  data() {
+    return { selectTime: true };
+  },
+  computed: {
+    internalValue() {
+      if (this.value == null) {
+        return undefined;
+      }
+
+      if (typeof this.value === 'string') {
+        return new Date(this.value);
+      }
+
+      return this.value;
+    },
+    formattedValue() {
+      return this.formatValue(this.internalValue);
+    },
+  },
+  methods: {
+    triggerChange(value: Date | null) {
+      this.$emit('change', value);
+    },
+    formatValue(value?: Date | null) {
+      if (value == null) {
+        return '';
+      }
+
+      return this.fyo.format(
+        value,
+        this.df ?? (this.selectTime ? 'Datetime' : 'Date')
+      );
+    },
+  },
+});
+</script>
diff --git a/src/components/Controls/DatetimePicker.vue b/src/components/Controls/DatetimePicker.vue
new file mode 100644
index 00000000..aa08b118
--- /dev/null
+++ b/src/components/Controls/DatetimePicker.vue
@@ -0,0 +1,538 @@
+<template>
+  <div>
+    <!-- Datetime header -->
+    <div class="flex justify-between items-center text-sm px-4 pt-4">
+      <div
+        class="text-blue-500 cursor-pointer"
+        @click="selectMonthYear = !selectMonthYear"
+      >
+        {{ datetimeString }}
+      </div>
+
+      <!-- Next and Previous Month Buttons -->
+      <div class="flex items-center">
+        <button
+          class="font-mono text-gray-600 cursor-pointer"
+          @click="prevClicked"
+        >
+          <FeatherIcon name="chevron-left" class="w-4 h-4" />
+        </button>
+        <button
+          class="
+            font-mono
+            cursor-pointer
+            w-2
+            h-2
+            rounded-full
+            border-gray-400 border-2
+          "
+          @click="selectToday"
+        />
+        <button
+          class="font-mono text-gray-600 cursor-pointer"
+          @click="nextClicked"
+        >
+          <FeatherIcon name="chevron-right" class="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Date Input -->
+    <div class="flex">
+      <!-- Weekday Titles -->
+      <div class="px-3 pt-4" :class="selectTime ? 'pb-4' : ''">
+        <div class="grid grid-cols-7 gap-1">
+          <div
+            v-for="day of weekdays"
+            :key="day"
+            class="
+              w-7
+              h-7
+              flex
+              items-center
+              justify-center
+              text-xs text-gray-600
+            "
+          >
+            {{ day }}
+          </div>
+        </div>
+
+        <!-- Weekday Grid -->
+        <div class="grid grid-cols-7 gap-1">
+          <div
+            v-for="item of weekdayList"
+            :key="`${item.year}-${item.month}-${item.day}`"
+            class="
+              w-7
+              h-7
+              flex
+              items-center
+              justify-center
+              text-xs
+              rounded-full
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            @click="select(item)"
+            :class="getDayClass(item)"
+          >
+            {{ item.day }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Month and Year Selectors -->
+      <div
+        v-if="selectMonthYear"
+        class="border-l flex flex-col justify-between"
+      >
+        <!-- Month Selector -->
+        <div class="flex flex-col gap-2 overflow-auto h-40 p-4">
+          <div
+            v-for="(m, i) of months"
+            :key="m"
+            ref="monthDivs"
+            class="text-xs cursor-pointer"
+            :class="getMonthClass(i)"
+            @click="change(i, 'month')"
+          >
+            {{ m }}
+          </div>
+        </div>
+
+        <!-- Year Selector -->
+        <div
+          class="border-t w-full px-4 pt-4"
+          :class="selectTime ? 'pb-4' : ''"
+        >
+          <label class="date-selector-label">Year</label>
+          <input
+            class="date-selector-input"
+            type="number"
+            min="1000"
+            max="9999"
+            @change="(e) => change(e, 'year')"
+            :value="year"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Time Selector -->
+    <div
+      v-if="selectTime"
+      class="px-4 pt-4 grid gap-4 border-t"
+      style="grid-template-columns: repeat(3, minmax(0, 1fr))"
+    >
+      <div>
+        <label class="date-selector-label">Hours</label>
+        <input
+          class="date-selector-input"
+          type="number"
+          min="0"
+          max="23"
+          @change="(e) => change(e, 'hours')"
+          :value="hours"
+        />
+      </div>
+      <div>
+        <label class="date-selector-label">Minutes</label>
+        <input
+          class="date-selector-input"
+          type="number"
+          min="0"
+          max="59"
+          @change="(e) => change(e, 'minutes')"
+          :value="minutes"
+        />
+      </div>
+      <div>
+        <label class="date-selector-label">Seconds</label>
+        <input
+          class="date-selector-input"
+          type="number"
+          min="0"
+          max="59"
+          @change="(e) => change(e, 'seconds')"
+          :value="seconds"
+        />
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex p-4 w-full justify-between">
+      <button
+        class="text-xs text-gray-600 hover:text-gray-600"
+        @click="selectMonthYear = !selectMonthYear"
+      >
+        {{ selectMonthYear ? t`Hide Month/Year` : t`Show Month/Year` }}
+      </button>
+
+      <button
+        class="text-xs text-gray-600 hover:text-gray-600 ml-auto"
+        @click="clearClicked"
+      >
+        {{ t`Clear` }}
+      </button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, nextTick, PropType } from 'vue';
+import FeatherIcon from '../FeatherIcon.vue';
+
+type WeekListItem = {
+  year: number;
+  month: number;
+  day: number;
+  weekday: number;
+};
+
+type DatetimeValues = {
+  year: number;
+  month: number;
+  day: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  ms: number;
+};
+
+export default defineComponent({
+  emits: ['update:modelValue'],
+  props: {
+    modelValue: { type: Date },
+    selectTime: { type: Boolean, default: true },
+    formatValue: { type: Function as PropType<(value: Date | null) => string> },
+  },
+  mounted() {
+    this.viewMonth = this.month;
+    this.viewYear = this.year;
+  },
+  data() {
+    return {
+      selectedMonth: 0,
+      selectedYear: 1000,
+      viewMonth: 0,
+      viewYear: 1000,
+      selectMonthYear: false,
+    } as {
+      selectedMonth: number;
+      selectedYear: number;
+      selectMonthYear: boolean;
+      viewMonth: number;
+      viewYear: number;
+    };
+  },
+  watch: {
+    async selectMonthYear(value) {
+      if (!value) {
+        return;
+      }
+      await nextTick();
+      const monthDivs = this.$refs.monthDivs as HTMLDivElement[];
+      if (!monthDivs?.length) {
+        return;
+      }
+      monthDivs[this.month]?.scrollIntoView({
+        block: 'center',
+        inline: 'center',
+      });
+    },
+  },
+  computed: {
+    today() {
+      return new Date();
+    },
+    internalValue(): Date {
+      if (this.modelValue == null) {
+        return this.today;
+      }
+      return this.modelValue;
+    },
+    year() {
+      // 1000 to 9999
+      return this.internalValue?.getFullYear() ?? 1000;
+    },
+    month() {
+      // 0 to 11
+      return this.internalValue?.getMonth() ?? 0;
+    },
+    day() {
+      // 1 to 31
+      return this.internalValue?.getDate() ?? 1;
+    },
+    hours() {
+      // 0 to 23
+      return this.internalValue?.getHours() ?? 0;
+    },
+    minutes() {
+      // 0 to 59
+      return this.internalValue?.getMinutes() ?? 0;
+    },
+    seconds() {
+      // 0 to 59
+      return this.internalValue?.getSeconds() ?? 0;
+    },
+    ms() {
+      // 0 to 999
+      return this.internalValue?.getMilliseconds() ?? 0;
+    },
+    weekdayList() {
+      return getWeekdayList(this.viewYear, this.viewMonth);
+    },
+    datetimeString() {
+      if (this.formatValue) {
+        return this.formatValue(this.internalValue);
+      }
+
+      const dateString = this.internalValue
+        .toDateString()
+        .split(' ')
+        .slice(1)
+        .join(' ');
+
+      if (!this.selectTime) {
+        return dateString;
+      }
+      const timeString = this.internalValue?.toTimeString().split(' ')[0] ?? '';
+
+      return `${dateString} ${timeString}]`;
+    },
+    months() {
+      return [
+        this.t`January`,
+        this.t`February`,
+        this.t`March`,
+        this.t`April`,
+        this.t`May`,
+        this.t`June`,
+        this.t`July`,
+        this.t`August`,
+        this.t`September`,
+        this.t`October`,
+        this.t`November`,
+        this.t`December`,
+      ];
+    },
+    weekdays() {
+      return [
+        this.t`Su`,
+        this.t`Mo`,
+        this.t`Tu`,
+        this.t`We`,
+        this.t`Th`,
+        this.t`Fr`,
+        this.t`Sa`,
+      ];
+    },
+  },
+  methods: {
+    getDayClass(item: WeekListItem) {
+      let dclass = [];
+      const today = this.today;
+      const todayDay = today.getDate();
+      const todayMonth = today.getMonth();
+      const isToday = item.day === todayDay && item.month === todayMonth;
+      const isSelected = item.day === this.day && item.month === this.month;
+      if (item.month !== this.viewMonth && !isToday) {
+        dclass.push('text-gray-600');
+      }
+      if (isSelected) {
+        dclass.push('font-semibold');
+      }
+      if (isSelected && this.modelValue != null) {
+        dclass.push('bg-gray-100', 'text-blue-500');
+      } else if (isToday && !isSelected) {
+        dclass.push('text-blue-500');
+      }
+      return dclass;
+    },
+    getMonthClass(item: number) {
+      let dclass = [];
+      if (item === this.month) {
+        dclass.push('font-semibold');
+      }
+      if (this.modelValue != null && item === this.month) {
+        dclass.push('text-blue-500');
+      }
+      return dclass;
+    },
+    change(e: number | Event, name: keyof DatetimeValues) {
+      let value: number;
+      if (typeof e === 'number' && name === 'month') {
+        value = e;
+      } else if (typeof e !== 'number') {
+        value = Number((e.target as HTMLInputElement).value);
+      } else {
+        return;
+      }
+
+      if (Number.isNaN(value)) {
+        return;
+      }
+      if (name === 'year' && value >= 1000 && value <= 9999) {
+        return this.select({ year: value });
+      }
+      if (name === 'month' && value >= 0 && value <= 11) {
+        return this.select({ month: value });
+      }
+      if (name === 'day' && value >= 1 && value <= 31) {
+        return this.select({ day: value });
+      }
+      if (name === 'hours' && value >= 0 && value <= 23) {
+        return this.select({ hours: value });
+      }
+      if (name === 'minutes' && value >= 0 && value <= 59) {
+        return this.select({ minutes: value });
+      }
+      if (name === 'seconds' && value >= 0 && value <= 59) {
+        return this.select({ seconds: value });
+      }
+      if (name === 'ms' && value >= 0 && value <= 999) {
+        return this.select({ ms: value });
+      }
+    },
+    select(values: Partial<DatetimeValues>) {
+      values.year ??= this.year;
+      values.month ??= this.month;
+      values.day ??= this.day;
+      values.hours ??= this.hours;
+      values.minutes ??= this.minutes;
+      values.seconds ??= this.seconds;
+      values.ms ??= this.ms;
+
+      const date = new Date(
+        values.year,
+        values.month,
+        values.day,
+        values.hours,
+        values.minutes,
+        values.seconds,
+        values.ms
+      );
+
+      this.viewMonth = values.month;
+      this.viewYear = values.year;
+
+      this.emitChange(date);
+    },
+    selectToday() {
+      return this.emitChange(new Date());
+    },
+    clearClicked() {
+      this.emitChange(null);
+    },
+    emitChange(value: null | Date) {
+      if (value == null) {
+        this.viewMonth = this.today.getMonth();
+        this.viewYear = this.today.getFullYear();
+      } else {
+        this.viewMonth = value.getMonth();
+        this.viewYear = value.getFullYear();
+      }
+
+      this.$emit('update:modelValue', value);
+    },
+    nextClicked() {
+      const d = new Date(this.viewYear, this.viewMonth + 1, 1);
+      this.viewYear = d.getFullYear();
+      this.viewMonth = d.getMonth();
+    },
+    prevClicked() {
+      const d = new Date(this.viewYear, this.viewMonth - 1, 1);
+      this.viewYear = d.getFullYear();
+      this.viewMonth = d.getMonth();
+    },
+  },
+  components: { FeatherIcon },
+});
+
+function getWeekdayList(startYear: number, startMonth: number): WeekListItem[] {
+  /**
+   * Weekday:
+   *
+   * S M T W T F S
+   * 0 1 2 3 4 5 6
+   *
+   * 0: Sunday
+   * 6: Saturday
+   */
+  let year = startYear;
+  let month = startMonth;
+  let day = 1;
+
+  const weekdayList: WeekListItem[] = [];
+
+  /**
+   * Push days of the current month into weeklist
+   */
+  while (month === startMonth) {
+    const date = new Date(year, month, day);
+    if (date.getMonth() !== month) {
+      break;
+    }
+
+    weekdayList.push({ year, month, day, weekday: date.getDay() });
+
+    year = date.getFullYear();
+    month = date.getMonth();
+    day += 1;
+  }
+
+  /**
+   * Unshift days of the previous month into weeklist
+   * until the first day is Sunday
+   */
+  while (weekdayList[0]?.weekday !== 0) {
+    const { year, month, day } = weekdayList[0] ?? {};
+    if (year === undefined || month === undefined || day === undefined) {
+      break;
+    }
+
+    const date = new Date(year, month, day - 1);
+    weekdayList.unshift({
+      year: date.getFullYear(),
+      month: date.getMonth(),
+      day: date.getDate(),
+      weekday: date.getDay(),
+    });
+  }
+
+  /**
+   * Push days of the next month into weeklist
+   * until the last day is Saturday
+   */
+  while (weekdayList.length !== 42) {
+    const { year, month, day } = weekdayList.at(-1) ?? {};
+    if (year === undefined || month === undefined || day === undefined) {
+      break;
+    }
+
+    const date = new Date(year, month, day + 1);
+    weekdayList.push({
+      year: date.getFullYear(),
+      month: date.getMonth(),
+      day: date.getDate(),
+      weekday: date.getDay(),
+    });
+  }
+
+  return weekdayList;
+}
+</script>
+
+<style scoped>
+.date-selector-label {
+  @apply text-xs text-gray-600 block mb-0.5;
+}
+
+.date-selector-input {
+  @apply text-sm text-gray-900 p-1 border rounded w-full;
+}
+
+input[type='number']::-webkit-inner-spin-button {
+  appearance: auto;
+}
+</style>
diff --git a/src/components/Controls/FormControl.vue b/src/components/Controls/FormControl.vue
index 02230c01..ad87c458 100644
--- a/src/components/Controls/FormControl.vue
+++ b/src/components/Controls/FormControl.vue
@@ -8,6 +8,7 @@ import Color from './Color.vue';
 import Currency from './Currency.vue';
 import Data from './Data.vue';
 import Date from './Date.vue';
+import Datetime from './Datetime.vue';
 import DynamicLink from './DynamicLink.vue';
 import Float from './Float.vue';
 import Int from './Int.vue';
@@ -24,7 +25,7 @@ const components = {
   Select,
   Link,
   Date,
-  Datetime: Date,
+  Datetime,
   Table,
   AutoComplete,
   DynamicLink,
diff --git a/src/components/DatePicker/DatePicker.vue b/src/components/DatePicker/DatePicker.vue
deleted file mode 100644
index 7e1fd04a..00000000
--- a/src/components/DatePicker/DatePicker.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<template>
-  <Popover @open="selectCurrentMonthYear">
-    <template #target="{ togglePopover, handleBlur }">
-      <div :class="showMandatory ? 'show-mandatory' : ''">
-        <input
-          type="text"
-          :class="inputClass"
-          :value="value && formatValue ? formatValue(value) : value || ''"
-          :placeholder="placeholder"
-          readonly
-          @focus="!readonly ? togglePopover() : null"
-          @blur="handleBlur"
-        />
-      </div>
-    </template>
-    <template #content="{ togglePopover }">
-      <div class="text-left p-3 select-none">
-        <div class="flex items-center justify-between">
-          <span class="font-medium text-blue-500 text-base">
-            {{ formatMonth }}
-          </span>
-          <span class="flex">
-            <div
-              class="
-                w-5
-                h-5
-                hover:bg-gray-100
-                rounded-md
-                flex-center
-                cursor-pointer
-              "
-            >
-              <feather-icon
-                @click="prevMonth"
-                name="chevron-left"
-                class="w-4 h-4"
-              />
-            </div>
-            <div
-              class="
-                ml-2
-                w-5
-                h-5
-                hover:bg-gray-100
-                rounded-md
-                flex-center
-                cursor-pointer
-              "
-            >
-              <feather-icon
-                @click="nextMonth"
-                name="chevron-right"
-                class="w-4 h-4"
-              />
-            </div>
-          </span>
-        </div>
-        <div class="mt-2 text-sm">
-          <div class="flex w-full text-gray-600">
-            <div
-              class="w-6 h-6 mr-1 last:mr-0 flex-center text-center"
-              v-for="(d, i) in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
-              :key="i"
-            >
-              {{ d }}
-            </div>
-          </div>
-          <div
-            v-for="(week, i) in datesAsWeeks"
-            :key="`${i}-${Math.random().toString(36)}`"
-            class="mt-1"
-          >
-            <div class="flex w-full">
-              <div
-                v-for="date in week"
-                :key="`${toValue(date)}-${Math.random().toString(36)}`"
-                class="
-                  w-6
-                  h-6
-                  mr-1
-                  last:mr-0
-                  flex-center
-                  cursor-pointer
-                  rounded-md
-                  hover:bg-blue-100 hover:text-blue-500
-                "
-                :class="{
-                  'text-gray-600': date.getMonth() !== currentMonth - 1,
-                  'text-blue-500': toValue(date) === toValue(today),
-                  'bg-blue-100 font-semibold text-blue-500':
-                    toValue(date) === value,
-                }"
-                @click="
-                  selectDate(date);
-                  togglePopover();
-                "
-              >
-                {{ date.getDate() }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="w-full flex justify-end mt-2">
-          <div
-            class="
-              text-sm
-              hover:bg-gray-100
-              px-2
-              py-1
-              rounded-md
-              cursor-pointer
-            "
-            @click="
-              selectDate('');
-              togglePopover();
-            "
-          >
-            {{ t`Clear` }}
-          </div>
-        </div>
-      </div>
-    </template>
-  </Popover>
-</template>
-
-<script>
-import { DateTime } from 'luxon';
-import Popover from '../Popover';
-
-export default {
-  name: 'DatePicker',
-  props: [
-    'value',
-    'placeholder',
-    'readonly',
-    'formatValue',
-    'inputClass',
-    'showMandatory',
-  ],
-  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);
-      return date.toLocaleString('en-US', { month: 'short', year: 'numeric' });
-    },
-  },
-  methods: {
-    selectDate(date) {
-      this.$emit('change', this.toValue(date));
-    },
-    selectCurrentMonthYear() {
-      let date = this.value ? this.getDate(this.value) : 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 '';
-      }
-
-      return DateTime.fromJSDate(date).toISODate();
-    },
-
-    getDate(...args) {
-      let d = new Date(...args);
-      return d;
-    },
-  },
-};
-</script>

From d17352b8f36c623c663c7293e7237cd5592b312a Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Mon, 5 Dec 2022 16:44:34 +0530
Subject: [PATCH 2/2] fix: toggle popover on click - hide clear if required

---
 src/components/Controls/Datetime.vue       | 10 +++-------
 src/components/Controls/DatetimePicker.vue | 12 +++++++-----
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/Controls/Datetime.vue b/src/components/Controls/Datetime.vue
index 0ddace70..a3600b25 100644
--- a/src/components/Controls/Datetime.vue
+++ b/src/components/Controls/Datetime.vue
@@ -33,17 +33,13 @@
     </template>
 
     <!-- Datetime Input Popover -->
-    <template #content="{ togglePopover }">
+    <template #content>
       <DatetimePicker
+        :show-clear="!isRequired"
         :select-time="selectTime"
         :model-value="internalValue"
         :format-value="formatValue"
-        @update:model-value="
-          (value) => {
-            triggerChange(value);
-            togglePopover();
-          }
-        "
+        @update:model-value="(value) => triggerChange(value)"
       />
     </template>
   </Popover>
diff --git a/src/components/Controls/DatetimePicker.vue b/src/components/Controls/DatetimePicker.vue
index aa08b118..8d3c9d98 100644
--- a/src/components/Controls/DatetimePicker.vue
+++ b/src/components/Controls/DatetimePicker.vue
@@ -2,10 +2,7 @@
   <div>
     <!-- Datetime header -->
     <div class="flex justify-between items-center text-sm px-4 pt-4">
-      <div
-        class="text-blue-500 cursor-pointer"
-        @click="selectMonthYear = !selectMonthYear"
-      >
+      <div class="text-blue-500">
         {{ datetimeString }}
       </div>
 
@@ -88,7 +85,10 @@
         class="border-l flex flex-col justify-between"
       >
         <!-- Month Selector -->
-        <div class="flex flex-col gap-2 overflow-auto h-40 p-4">
+        <div
+          class="flex flex-col gap-2 overflow-auto m-4"
+          style="height: calc(248px - 79.5px - 1px - 2rem)"
+        >
           <div
             v-for="(m, i) of months"
             :key="m"
@@ -170,6 +170,7 @@
       </button>
 
       <button
+        v-if="showClear"
         class="text-xs text-gray-600 hover:text-gray-600 ml-auto"
         @click="clearClicked"
       >
@@ -204,6 +205,7 @@ export default defineComponent({
   props: {
     modelValue: { type: Date },
     selectTime: { type: Boolean, default: true },
+    showClear: { type: Boolean, default: true },
     formatValue: { type: Function as PropType<(value: Date | null) => string> },
   },
   mounted() {