fix(datepicker): multiple and range not working #62

Author: sfxcode

dev/pages/inputs/DatePicker.vue

@@ -2,34 +2,49 @@
 const primeAttributes = 'dateFormat, showIcon, icon, .... (see documentation)'
 
 const schema
-  = [
-    {
-      $formkit: 'primeDatePicker',
-      id: 'basic',
-      name: 'basic',
-      label: 'Basic',
-      placeholder: 'MM/DD/YYYY',
-      validation: 'required',
-    },
-    {
-      $formkit: 'primeDatePicker',
-      name: 'styled',
-      label: 'Styled',
-      style: { background: 'gray' },
-      class: 'customClass',
-      showIcon: true,
-    },
-    {
-      $formkit: 'primeDatePicker',
-      name: 'icon',
-      label: 'Custom Icon',
-      dateFormat: 'yy-mm',
-      showIcon: true,
-      icon: 'pi pi-question',
-    },
-  ]
+    = [
+      {
+        $formkit: 'primeDatePicker',
+        id: 'basic',
+        name: 'basic',
+        label: 'Basic',
+        placeholder: 'MM/DD/YYYY',
+        validation: 'required',
+      },
+      {
+        $formkit: 'primeDatePicker',
+        name: 'styled',
+        label: 'Styled',
+        style: { background: 'gray' },
+        class: 'customClass',
+        showIcon: true,
+      },
+      {
+        $formkit: 'primeDatePicker',
+        name: 'icon',
+        label: 'Custom Icon',
+        dateFormat: 'yy-mm',
+        showIcon: true,
+        icon: 'pi pi-question',
+      },
+      {
+        $formkit: 'primeDatePicker',
+        name: 'range',
+        label: 'Date Range',
+        selectionMode: 'range',
+        manualInput: false,
+      },
+      {
+        $formkit: 'primeDatePicker',
+        name: 'multiple',
+        label: 'Multiple Dates',
+        selectionMode: 'multiple',
+        manualInput: false,
+      },
 
-const data = { }
+    ]
+
+const data = {}
 </script>
 
 <template>

src/components/PrimeDatePicker.vue

@@ -59,7 +59,7 @@ const props = defineProps({
   },
 })
 
-const { validSlotNames, unstyled, isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
+const { validSlotNames, unstyled, isInvalid, handleInput } = useFormKitInput(props.context)
 
 function handleBlur(e: DatePickerBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -68,6 +68,15 @@ function handleBlur(e: DatePickerBlurEvent) {
 function handleClearClick() {
   props.context?.node.input(null)
 }
+
+function handleSelect(e: any) {
+  if (props.context?.selectionMode === 'range' || props.context?.selectionMode === 'multiple') {
+    props.context?.node.input(props.context._value)
+  }
+  else {
+    props.context?.node.input(e)
+  }
+}
 </script>
 
 <template>