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
anduseRef
) 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 receivenewdate
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 } };
- Define the
-
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" /> );
- Add the
-
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.
- You can add a button or input element to toggle the