React.js Blueprint DateInput2

In this article, we will learn about the DateInput2 component offered by the blueprint.js library. BlueprintJS is a React-based UI toolkit for the web. It is written in Typescript. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications that run in a modern web browser.

The DateInput2 component renders an InputGroup component that shows a DatePicker component on focus, inside a Popover2 component. It also optionally (depending on the props passed) displays a TimezoneSelect component on the right side of the InputGroup, allowing the user to change the timezone of the selected date.

DateInput2 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.
• defaultTimezone: It denotes the default timezone selected
• 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.
• disableTimezoneSelect: It determines whether to disable the timezone select component
• fill: It is used to indicate whether the component should take up the full width of its container.
• footerElement: It denotes the additional element that the user wants to show below the date picker
• 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.
• showTimezoneSelect: It determines whether to show the timezone select component on the right side of the input
• 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 @blueprint/datetime @blueprintjs/datetime2

Project Structure: It will look like the following.

Example 1: In this example, we will try to create a simple date-picker application that allows us to select date and time using the DateInput2 component provided by BlueprintJS.

Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import { DateInput2 } from "@blueprintjs/datetime2";
import { useCallback, useState } from "react";
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
import '@blueprintjs/core/lib/css/blueprint.css';

export default function App() {
    const [dateValue, setDateValue] = useState(null);
    const handleChange = useCallback(setDateValue, []);
    const formatDate = useCallback((date) => date.toLocaleString());
    const parseDate = useCallback((str) => new Date(str));

    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h3>ReactJS blueprint DateInput2 component</h3>
            <DateInput2
                formatDate={formatDate}
                onChange={handleChange}
                parseDate={parseDate}
                placeholder="M/D/YYYY"
                value={dateValue}
            />
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we will put a timezone select dropdown as well. Also, for this example, as we are using the TimePrecision object, please install the @blueprint/datetime library as well.

App.js

import { DateInput2 } from "@blueprintjs/datetime2";
import { useCallback, useState } from "react";
import { TimePrecision } from "@blueprintjs/datetime";
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
import '@blueprintjs/core/lib/css/blueprint.css';
import { Tag } from "@blueprintjs/core";

export default function App() {
    const [dateValue, setDateValue] = useState(null);
    const handleChange = (date) => {
        setDateValue(date)
    }
    const formatDate = useCallback((date) => date.toLocaleString());
    const parseDate = useCallback((str) => new Date(str));

    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h3>ReactJS blueprint DateInput2 component</h3>
            <DateInput2
                formatDate={formatDate}
                onChange={handleChange}
                parseDate={parseDate}
                placeholder="M/D/YYYY"
                value={dateValue}
                showTimezoneSelect={true}
                timePrecision={TimePrecision.MINUTE}
            />
            {dateValue == null ?
                <Tag minimal={true}>no date</Tag> :
                <Tag intent="primary">{dateValue}</Tag>}
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

Reference: https://blueprintjs.com/docs/#datetime2/date-input2