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
