Merge pull request #328 from devforth/AdminForth/786

docs: docs for the afcl DatePicker

Author: NoOne7135

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -1783,8 +1783,34 @@ import { JsonViever } from '@/afcl'
   ```
 </div>
   <div>
-    ![Mixed Chart](image-93.png)
+    ![JSON Viewer](image-93.png)
   </div>
 </div>
 
+## Date picker
+
+```ts
+import { DatePicker } from '@/afcl';
+const datePickerValue = ref()
+```
+
+### Basic
+<div class="split-screen" >
+
+<div>
+```html
+<DatePicker
+  v-model:datePickerValue="datePickerValue"
+  :column="{ type: 'datetime' }"
+  label="Pick start"
+/>
+```
+</div>
+  <div>
+    ![Date Picker](image-95.png)
+  </div>
+</div>
+
+
+
 

adminforth/documentation/docs/tutorial/03-Customization/image-95.png

@@ -279,7 +279,14 @@
       @close="() => {}"
     />
 
+    <Toggle />
 
+    <DatePicker
+      v-model:valueStart="valueStart"
+      :column="{ type: 'datetime' }"
+      label="Pick start"
+    />
+    
   </div>
 
 
@@ -305,7 +312,9 @@ import { Table } from '@/afcl'
 import { ProgressBar } from '@/afcl';
 import { Skeleton } from '@/afcl';
 import { Spinner } from '@/afcl';
+import { Toggle } from '@/afcl';
 import { IconSearchOutline } from '@iconify-prerendered/vue-flowbite'
+import { DatePicker } from '@/afcl';
 import CustomRangePicker from "@/components/CustomRangePicker.vue";
 import Toast from '@/components/Toast.vue';
 
@@ -321,8 +330,12 @@ watch(files, (files) => {
 const enable = ref(false)
 const selected = ref(null)
 const selected2 = ref([])
+const valueStart = ref()
 
 
+watch(valueStart, (newVal) => {
+  console.log('New start value:', newVal);
+});
 
 function doSmth(){