bootstrap5-multiple-react-datepicker

1.0.21 • Public • Published

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
  1. 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 } };
    
    
  2. 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"
        />
    );
  3. Run the App

    • Start your development server to test the component.
  4. 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.

Package Sidebar

Install

npm i bootstrap5-multiple-react-datepicker

Weekly Downloads

10

Version

1.0.21

License

custom licence see LICENCE.md

Unpacked Size

48.6 kB

Total Files

9

Last publish

Collaborators

  • steviec87