Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

ReactJS Blueprint DatePicker Component

  • Last Updated : 19 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. DatePicker Component helps the user to choose a single date. We can use the following approach in ReactJS to use the ReactJS Blueprint DatePicker Component.

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

  • canClearSelection: It allows the user to clear the selection by clicking the currently selected day.
  • className: It is used to denote a space-delimited list of class names to pass along to a child element.
  • clearButtonText: It is used to denote the text for the reset button in the action bar.
  • dayPickerProps: It is used to denote the props to pass to ReactDayPicker.
  • defaultValue: It is used to denote the initial day of the calendar that will be displayed 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.
  • 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.
  • 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 date are displayed or not.
  • showActionsBar: It is used to indicate whether the bottom bar displaying Today and Clear buttons should be shown.
  • 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.
  • todayButtonText: It is used to denote the text for the today button in the action bar.
  • value: It is used to denote the currently selected day.

DatePickerShortcut Props:

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



 

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 { DatePicker } from "@blueprintjs/datetime";
  
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint DatePicker Component</h4>
            <DatePicker />
        </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/datepicker




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!