React.js Blueprint Date picker Shortcuts

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint Date picker Shortcuts. The DatePicker Component helps in choosing a single date. The menu given on the left of the datepicker component provides “shortcuts” which allow users to quickly select common dates and the items in the menu are controlled by the shortcuts prop.

Syntax:

<DatePicker shortcuts />

DatePicker Shortcut 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:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

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:

Example 1: Below example demonstrates the usage of shortcut props in the date picker component.

Javascript

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={{
                padding: 20,
                textAlign: "center",
                color: "green"
            }}>
            <h1>ReactJS Blueprint Date Picker Shortcuts</h1>
            <div>
                <DatePicker shortcuts />
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the usage of the shortcuts component with an extra footer element in datepicker.

Javascript

import React from "react";
import "@blueprintjs/datetime/lib/css/blueprint-datetime.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Callout } from "@blueprintjs/core";
import { DatePicker } from "@blueprintjs/datetime";

const footerElement =
    <Callout>
        You may choose date using shortcuts on left.
    </Callout>;

function App() {
    return (
        <div style={{
            padding: 20,
            textAlign: "center",
            color: "green"
        }}>
            <h1>ReactJS Blueprint Date Picker Shortcuts</h1>
            <div>
                <DatePicker shortcuts
                    footerElement={footerElement} />
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#datetime/datepicker.shortcuts