From 490f7e9a7a2bb1e5ff051db2a81ef777bc353383 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 8 Feb 2025 23:47:07 +0330
Subject: [PATCH] added date picker component

---
 frontend/components/global/Datepicker.vue | 48 +++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 frontend/components/global/Datepicker.vue

diff --git a/frontend/components/global/Datepicker.vue b/frontend/components/global/Datepicker.vue
new file mode 100644
index 0000000..5cabbeb
--- /dev/null
+++ b/frontend/components/global/Datepicker.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// imports
+
+import DatePicker from "vue3-persian-datetime-picker";
+
+// types
+
+type Props = {
+    modelValue: string;
+};
+
+type Emits = {
+    "update:modelValue": [value: string];
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { modelValue } = toRefs(props);
+
+// emit
+
+const emit = defineEmits<Emits>();
+
+// computed
+
+const value = computed({
+    get: () => modelValue.value ?? "",
+    set: (value) => emit("update:modelValue", value),
+});
+</script>
+
+<template>
+    <ClientOnly>
+        <DatePicker
+            format="jYYYY-jMM-jDD"
+            displayFormat="jYYYY-jMM-jDD"
+            :editable="false"
+            placeholder="وارد نشده"
+            altFormat="jYYYY-jMM-jDD"
+            color="#000000"
+            inputClass="!py-3.5 placeholder-slate-400 rounded-e-100 !border-[1.5px] hover:!border-black !transition-all !border-slate-200 !text-sm"
+            :autoSubmit="false"
+            v-model="value"
+        />
+    </ClientOnly>
+</template>