Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

ReactJS Blueprint DateRangePicker Component

  • Last Updated : 09 Jul, 2021

BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. DateRangePicker Component helps the user to select a single range of days, and it shows two sequential month calendars. We can use the following approach in ReactJS to use the ReactJS Blueprint DateRangePicker Component.

DateRangeShortcut Props:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • dateRange: It is used to denote the date range represented by this shortcut.
  • includeTime: It is used to allow this shortcut to change the selected times as well as the dates if this prop is set to true.
  • label: It is used to denote the shortcut label that appears in the list.

DateRangePicker Props:

  • allowSingleDayRange: It is used to indicate whether the start and end dates of range can be the same day.
  • boundaryToModify: It is used to denote the date-range boundary that the next click should modify.
  • className: It is used to denote a space-delimited list of class names to pass along to a child element.
  • contiguousCalendarMonths: It is used to indicate whether displayed months in the calendar are contiguous.
  • dayPickerProps: It is used to denote the props to pass to ReactDayPicker.
  • defaultValue: It is used to denote the initial DateRange the calendar will display as selected.
  • highlightCurrentDay: It is used to indicate whether the current day should be highlighted in the calendar.
  • initialMonth: It is used to denote the initial month the calendar displays.
  • locale: It is used to denote the locale name that is passed to the functions in localeUtils.
  • localeUtils: It is used to denote the collection of functions that provide internationalization support.
  • maxDate: It is used to denote the latest date the user can select.
  • minDate: It is used to denote the earliest date the user can select.
  • modifiers: It is used to denote the collection of functions that determine which modifier classes get applied to which days.
  • onChange: It is a callback function that is triggered when the user selects a day.
  • onHoverChange: It is a callback function that is triggered when the user changes the hovered date range.
  • onShortcutChange: It is a callback function that is triggered when the shortcuts props are enabled and the user changes the shortcut.
  • reverseMonthAndYearMenus: The month menu will appear to the left of the year menu if this is set to true.
  • selectedShortcutIndex: It is used to denote the currently selected shortcut.
  • shortcuts: It is used to indicate whether shortcuts to quickly select a range of dates are displayed or not.
  • singleMonthOnly: It is used to indicate whether to show only a single month calendar.
  • timePickerProps: It is used to further configure the TimePicker that appears beneath the calendar.
  • timePrecision: It is used to denote the precision of time selection that accompanies the calendar.
  • value: It is used to denote the currently selected DateRange.



 

Creating React Application And Installing Module:

  • Step 1: Create a React application using the following command:

    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. foldername, move to it using the following command:

    cd foldername
  • Step 3: After creating the ReactJS application, Install the required module using the following command:

    npm install @blueprintjs/core
    npm install @blueprintjs/popover2

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js




import React from 'react'
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
import '@blueprintjs/core/lib/css/blueprint.css';
import { DateRangePicker } from "@blueprintjs/datetime";
  
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint DateRangePicker Component</h4>
            <DateRangePicker />
        </div >
    );
}
  
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://blueprintjs.com/docs/#datetime/daterangepicker




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!