fang create

frontend/src/components/right/DatePicker.vue

@@ -0,0 +1,45 @@
+<template>
+
+  <q-input v-model="selectedDate" :label="placeholder" mask="date" :rules="['date']">
+    <template v-slot:append>
+      <q-icon name="event" class="cursor-pointer">
+        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+          <q-date v-model="selectedDate">
+            <div class="row items-center justify-end">
+              <q-btn v-close-popup label="Close" color="primary" flat />
+            </div>
+          </q-date>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref ,watchEffect} from 'vue';
+
+export default defineComponent({
+  name: 'DatePicker',
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { emit }) {
+    const selectedDate = ref(props.modelValue);
+
+    watchEffect(() => {
+      emit('update:modelValue', selectedDate.value);
+    });
+
+    return {
+      selectedDate
+    };
+  }
+});
+</script>