added date picker component

2025-02-08 23:47:07 +03:30
parent 22095b8540
commit 490f7e9a7a
1 changed files with 48 additions and 0 deletions
@@ -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>