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. DateInput Component helps the user to enter the date as an input. We can use the following approach in ReactJS to use the ReactJS Blueprint DateInput Component.
DateInput 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 date picker action bar.
- closeOnSelection: It is used to indicate whether the calendar popover should close when a date is selected.
- dayPickerProps: It is used to denote the props to pass to ReactDayPicker.
- defaultValue: It is used to denote the default date to be used in the component when uncontrolled.
- disabled: It is used to indicate whether the date input is non-interactive.
- fill: It is used to indicate whether the component should take up the full width of its container.
- formatDate: It is a function to render a JavaScript Date to a string.
- 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.
- inputProps: It is used to denote the props to pass to the input group.
- invalidDateMessage: It is used to denote the error message to display when the date selected is invalid.
- 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 new valid date through the DatePicker or by typing in the input.
- onError: It is a callback function that is triggered when the user finishes typing in a new date and the date causes an error state.
- outOfRangeMessage: It is used to denote the error message to display when the date selected is out of range.
- parseDate: It is a callback function to deserialize user input text to a JavaScript Date object.
- placeholder: It is used to denote the placeholder text to display in empty input fields.
- popoverProps: It is used to denote the props to pass to the Popover.
- reverseMonthAndYearMenus: The month menu will appear to the left of the year menu if this is set to true.
- rightElement: It is used to denote the element to render on the right side of an input.
- 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 below the calendar.
- 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 date picker action bar.
- value: It is used to denote the currently selected day.
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.
