Instructions for Using the Multiple Date Selection Component

Step1 Intstall Datepicker package npm install bootstrap5-multiple-react-datepicker Step2: Install Bootstrap & Add it to your Project This package requires Bootstrap for styling. Depending on your setup, follow the appropriate instructions:

Step2 Option A If You’re Using Plain Bootstrap** Install Bootstrap and import its CSS file in your main JavaScript or SCSS file. npm install bootstrap@^5.3.2 Then, in your main file (e.g., index.js or App.js), add import 'bootstrap/dist/css/bootstrap.min.css';

Step2 Option B For SCSS-based imports (if using custom Bootstrap styles): Add this to your main SCSS file: @import '~bootstrap/scss/bootstrap'; Add Your Global SCSS Import: In your main JavaScript file (e.g., index.js or App.js), import the global SCSS file to apply Bootstrap styles across your application. import '../styles/globals.scss'; // Ensure this file imports Bootstrap 2 Option C If You’re Using React-Bootstrap: import 'bootstrap/dist/css/bootstrap.min.css';

Step3 Import the Date Picker

• Import the necessary React hooks (useState and useRef) and styles to use the Datepicker component in your app.
• Your import statements should look like this:

  import { useState, useRef } from 'react';

import Datepicker from 'bootstrap5-multiple-react-datepicker';

**Step4. Define State Variables The datepicker needs these three usestates where you import it. Example:

const [multiple, setMultiple] = useState(''); // Empty for single date selection, 'yes' for multiple
const [selecteddate, setSelecteddate] = useState('');
const [selecteddatesMulti, setSelecteddatesMulti] = useState([]);

• Use multiple to determine if multiple dates are allowed -leave empty for single or write 'yes' for multiple
• selecteddate will hold the value of the date if you choose single date
• selecteddatesMulti will hold an array of multiple dates, if you choose multiple yes

3. Create a Callback Function for Date Changes

   • Define the handleDateChange function to handle date changes. This function will receive newdate as an argument. Copy and Paste this: ```javascript const handleDateChange = (newdate) => { if (typeof newdate === 'object') { setSelecteddatesMulti(newdate); // Update multi-date state } else { setSelecteddate(newdate); // Update single date state } };

4. Use the Datepicker Component

   • Add the Datepicker component within the return statement of your component function You can only change the format, the rest leave as is
     • format: Specify the date format, e.g.,
     • YYYYMMDD
     • DDMMYYYY
     • MMDDYYYY

   Example: COPY AND PASTE THIS , and only change the format if you want

   return (
       <Datepicker 
           onDateChange={handleDateChange}
           dateprop={multiple === 'yes' ? selecteddatesMulti : selecteddate}
           multiple={multiple}
           format="MMDDYYYY"
       />
   );

5. Run the App

   • Start your development server to test the component.

6. Optional: Toggle between Single and Multiple Date Selection

   • You can add a button or input element to toggle the multiple state between '' (single) and 'yes' (multiple) based on user preference.