diff --git a/src/components/shared/DatePicker.vue b/src/components/shared/DatePicker.vue
new file mode 100644
index 00000000..982eedb9
--- /dev/null
+++ b/src/components/shared/DatePicker.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import VueDatePicker from '@vuepic/vue-datepicker';
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
+import { useI18n } from 'vue-i18n';
+
+const i18n = useI18n();
+const model = defineModel<string | Date | null>();
+
+const props = defineProps<{
+  id?: string;
+  readonly?: boolean;
+  label?: string;
+  rules?: ((value: string) => string | true)[];
+  disabledDates?: string[] | Date[] | ((date: Date) => boolean);
+}>();
+
+function valueUpdate(value: string) {
+  if (typeof model.value === 'string') model.value = new Date(model.value);
+
+  if (value.length === 10) {
+    const _date = parseAndFormatDate(value, i18n.locale.value);
+
+    if (_date) {
+      if (Array.isArray(props.disabledDates)) {
+        const disabled = props.disabledDates.map((v) =>
+          new Date(v).toISOString(),
+        );
+        if (disabled.includes(_date.toISOString())) {
+          model.value = null;
+        }
+      }
+      if (typeof props.disabledDates === 'function') {
+        if (props.disabledDates(_date)) {
+          model.value = null;
+        }
+      }
+
+      if (model.value instanceof Date && !isNaN(model.value.getTime())) {
+        model.value.setDate(_date.getDate());
+        model.value.setMonth(_date.getMonth());
+        model.value.setFullYear(_date.getFullYear());
+      } else {
+        model.value = _date;
+      }
+    } else {
+      model.value = model.value;
+    }
+  }
+}
+</script>
+
+<template>
+  <VueDatePicker
+    utc
+    auto-apply
+    :id
+    :disabled="readonly"
+    :disabled-dates="disabledDates"
+    :teleport="true"
+    :dark="$q.dark.isActive"
+    :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+    :enableTimePicker="false"
+    v-model="model"
+    class="col-2"
+  >
+    <template #year="{ value }">
+      {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+    </template>
+    <template #year-overlay-value="{ value }">
+      {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+    </template>
+    <template #trigger>
+      <q-input
+        lazy-rules="ondemand"
+        placeholder="DD/MM/YYYY"
+        hide-bottom-space
+        dense
+        outlined
+        :rules
+        :label
+        :for="id"
+        :readonly="readonly"
+        :mask="readonly ? '' : '##/##/####'"
+        :model-value="
+          model
+            ? readonly
+              ? dateFormat(model)
+              : dateFormat(model, false, false, true)
+            : readonly
+              ? '-'
+              : undefined
+        "
+        @update:model-value="valueUpdate"
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-calendar-blank-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
+    </template>
+  </VueDatePicker>
+</template>