feat: 添加 PDatePicker 组件

src/App.vue

@@ -4,27 +4,12 @@ import AllCustom from './all-custom/all-custom.vue';
 import TutorialForm from './tutorial-form/index.vue';
 import ZodForm from './zod-form/index.vue';
 
-const selectedCity = ref('NY');
-const loading = ref(false);
-const cities = ref([
-  { name: 'New York', code: 'NY' },
-  { name: 'Rome', code: 'RM' },
-  { name: 'London', code: 'LDN' },
-  { name: 'Istanbul', code: 'IST' },
-  { name: 'Paris', code: 'PRS' }
-]);
-const loadSelectedCity = () => {
-  loading.value = true;
-  setTimeout(() => {
-    loading.value = false;
-  }, 2000);
-};
-const handleE = (eventName: string) => {
-  return (...args: any[]) => {
-    console.log('eventName :>> ', eventName);
-    console.log('args :>> ', args);
-  };
-};
+const datetime12h = ref();
+const datetime24h = ref();
+const time = ref();
+const date = ref();
+const dates = ref();
+
 
 </script>
 
@@ -40,31 +25,62 @@ const handleE = (eventName: string) => {
     <!-- </div> -->
 
     <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4">
-      <Select
-        v-model="selectedCity"
-        :placeholder="loading ? 'Loading' : 'Select a City'"
-        :loading="loading"
-        class="w-full md:w-56"
-        :options="cities"
-        optionLabel="name"
-        optionValue="code"
-        @input="(e: any) => handleE('input')(e)"
-        @value-change="(e) => handleE('value-change')(e)"
-        @change="(e) => handleE('change')(e)"
-        @blur="(e) => handleE('blur')(e)"
-      ></Select>
-      <Select
-        :options="cities"
-        class="w-full md:w-56"
-      >
-        <template #value="slotProps">{{ slotProps.value }}</template>
-      </Select>
-      <Button
-        id="load-selected-city"
-        label="Load Selected City"
-        @click="loadSelectedCity"
-      />
-      {{ { selectedCity } }}
+
+
+      <div class="card flex flex-wrap gap-4 items-start">
+        <DatePicker
+          v-model="date"
+          view="month"
+          dateFormat="mm/yy"
+        />
+
+        <DatePicker
+          v-model="dates"
+          selectionMode="range"
+          :manualInput="false"
+        />
+
+
+        <div class="flex-auto">
+          <label
+            for="datepicker-12h"
+            class="font-bold block mb-2"
+          > 12h Format </label>
+          <DatePicker
+            id="datepicker-12h"
+            v-model="datetime12h"
+            showTime
+            hourFormat="12"
+            fluid
+          />
+        </div>
+        <div class="flex-auto">
+          <label
+            for="datepicker-24h"
+            class="font-bold block mb-2"
+          > 24h Format </label>
+          <DatePicker
+            id="datepicker-24h"
+            v-model="datetime24h"
+            showTime
+            hourFormat="24"
+            fluid
+          />
+        </div>
+        <div class="flex-auto">
+          <label
+            for="datepicker-timeonly"
+            class="font-bold block mb-2"
+          > Time Only </label>
+          <DatePicker
+            id="datepicker-timeonly"
+            v-model="time"
+            timeOnly
+            fluid
+          />
+        </div>
+      </div>
+
     </div>
   </div>
 </template>