Open In App

React.js Blueprint Date picker Props

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 31 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads