Bootstrap5-multiple-react-datepicker NPM

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

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
   }
};

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"
    />
);
```
Run the App
- Start your development server to test the component.
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.