docs: add example for multi

Author: nandorojo

example/src/App.tsx

@@ -28,6 +28,7 @@ import {
   DatePickerModal,
   DatePickerModalContent,
   TimePickerModal,
+  // @ts-ignore
 } from 'react-native-paper-dates';
 import { addMonths } from '../../src/Date/dateUtils';
 
@@ -59,6 +60,7 @@ function App({
     hour12: false,
   });
   const [date, setDate] = React.useState<Date | undefined>(undefined);
+  const [dates, setDates] = React.useState<Date[] | undefined>();
   const [range, setRange] = React.useState<{
     startDate: Date | undefined;
     endDate: Date | undefined;
@@ -77,6 +79,7 @@ function App({
   const onDismissTime = React.useCallback(() => {
     setTimeOpen(false);
   }, [setTimeOpen]);
+  const [multiOpen, setMultiOpen] = React.useState(false);
 
   const onDismissRange = React.useCallback(() => {
     setRangeOpen(false);
@@ -90,6 +93,10 @@ function App({
     setSingleOpen(false);
   }, [setSingleOpen]);
 
+  const onDismissMulti = React.useCallback(() => {
+    setMultiOpen(false);
+  }, []);
+
   const onDismissCustom = React.useCallback(() => {
     setCustomOpen(false);
   }, [setCustomOpen]);
@@ -118,6 +125,12 @@ function App({
     [setSingleOpen, setDate]
   );
 
+  const onChangeMulti = React.useCallback((params) => {
+    setMultiOpen(false);
+    setDates(params.dates);
+    console.log('[on-change-multi]', params);
+  }, []);
+
   const onConfirmTime = React.useCallback(
     ({ hours, minutes }) => {
       setTimeOpen(false);
@@ -238,6 +251,14 @@ function App({
             >
               Pick single date
             </Button>
+            <Button
+              onPress={() => setMultiOpen(true)}
+              uppercase={false}
+              mode="outlined"
+              style={styles.pickButton}
+            >
+              Pick Multi date
+            </Button>
             <View style={styles.buttonSeparator} />
             <Button
               onPress={() => setRangeOpen(true)}
@@ -339,6 +360,19 @@ function App({
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
       />
 
+      <DatePickerModal
+        // locale={'en'} optional, default: automatic
+        mode="multi"
+        visible={multiOpen}
+        onDismiss={onDismissMulti}
+        dates={dates}
+        onConfirm={onChangeMulti}
+        // onChange={onChangeMulti}
+        // saveLabel="Save" // optional
+        // label="Select date" // optional
+        // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
+      />
+
       <TimePickerModal
         locale={'nl'} //optional, default: automatic
         visible={timeOpen}