React.js Blueprint Date picker Props

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 Props. The DatePicker Component helps in choosing a single date.

Date Picker Props:

• 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 shortcut 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.

Syntax:

<DatePicker highlightCurrentDay showActionsBar ... />

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 highlightCurrentDay and showActionsBar props.

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 Props</h1>
            <div>
                <DatePicker showActionsBar highlightCurrentDay />
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the usage of shortcuts and footerElement props.

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>Choose your date of Joining.</Callout>;

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

export default App;

Output:

Reference: https://blueprintjs.com/docs/#datetime/datepicker.props-interface