Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

ReactJS Blueprint DateRangeInput Component

  • Last Updated : 13 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. DateRangeInput Component helps the user to enter the date range. It is used in forms where the user must enter a date range. We can use the following approach in ReactJS to use the ReactJS Blueprint DateRangeInput Component.

DateRangeInput 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!

  • allowSingleDayRange: It is used to indicate whether the start and end dates of range can be the same day.
  • className: It is used to denote a space-delimited list of class names to pass along to a child element.
  • closeOnSelection: It is used to indicate whether the calendar popover should close when a date range is fully selected.
  • 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 default date range to be used in the component when uncontrolled.
  • disabled: It is used to indicate whether the text inputs are non-interactive.
  • endInputProps: It is used to denote the props to pass to the end-date input group.
  • formatDate: It is a function to render a JavaScript Date to a string.
  • 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.
  • invalidDateMessage: It is used to denote the error message to display when the date selected is invalid.
  • 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.
  • onError: It is a function that is triggered when the user finishes typing in a new date and the date causes an error state.
  • outOfRangeMessage: It is used to denote the error message to display when selected date is out of range.
  • overlappingDatesMessage: It is used to denote the error message to display when selected dates overlap.
  • parseDate: It is a function to deserialize user input text to a JavaScript Date object.
  • placeholder: It is used to denote the placeholder text to display in empty input fields.
  • popoverProps: It is used to denote the props to pass to the popover.
  • reverseMonthAndYearMenus: The month menu will appear to the left of the year menu if this is set to true.
  • selectAllOnFocus: It is used to indicate whether the entire text field should be selected on focus.
  • 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.
  • startInputProps: It is used to denote the props to pass to the start-date input group.
  • 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 date range.

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/datetime

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 { DateRangeInput } from "@blueprintjs/datetime";
  
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint DateRangeInput Component</h4>
            <DateRangeInput
                formatDate={date => date.toLocaleString()}
                parseDate={str => new Date(str)}
            />
        </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/daterangeinput




My Personal Notes arrow_drop_up
Recommended Articles
Page :