React.js Blueprint DateInput2 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 DateInput2 Props. The DateInput2 component is a type of InputGroup that allows the users to pick the date as per choice and also the timezones. It shows a DatePicker inside a Popover2 when focused.

React.js BluePrint DateInput2 Props:

• canClearSelection: It allows the users to clear the selection by clicking the currently selected day.
• className: It denotes a space-delimited list of class names to pass along to a child element.
• clearButtonText: It denotes the text for the reset button in the date picker action bar.
• closeOnSelection: It indicates whether the calendar popover should close when a date is selected.
• dayPickerProps: It denotes the props to pass to ReactDayPicker.
• defaultTimezone: It denotes the default timezone selected as per the user’s local timezone.
• defaultValue: It denotes the default date to be used in the component when uncontrolled.
• disabled: It indicates whether the date input is non-interactive.
• disableTimezoneSelect: It denotes whether to disable the timezone selected.
• fill: It denotes whether the component should take up the full width of its container.
• footerElement: It is used to add an additional element 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 denotes the initial month the calendar displays.
• inputProps: It denotes the props to pass to the input group.
• invalidDateMessage: It denotes the error message to display when the date selected is invalid.
• locale: It denotes the locale name.
• localeUtils: It denotes the collection of functions that provide internationalization support.
• maxDate: It denotes the latest date the user can select.
• minDate: It denotes the earliest date the user can select.
• modifiers: It denotes 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 denotes 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 denotes the placeholder text to display in empty input fields.
• popoverProps: It denotes 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 denotes the element to render on the right side of an input.
• shortcuts: It indicates 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 denotes the precision of time selection that accompanies the calendar.
• todayButtonText: It denotes e the text for the today button in the date picker action bar.
• value: It is used to denote the currently selected day.

Syntax:

<DateInput2
    value={...}
    formatDate={...}
/>

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

Step 4: Installing @blueprintjs datetime2 component.

npm install @blueprintjs/datetime2

Project Structure:

Step 5: Run the project as follows:

npm start

Example 1: The below example demonstrates the usage of the formatDate, onChange, parseData, placeholder, and value props of DateInput2 component.

Javascript

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

function App() {
    const [dateVal, setDateVal] = useState(null);
    const handleChange = useCallback(setDateVal, []);
    const formatDate = useCallback((Date) =>
        Date.toLocaleString(), []);
    const parseDate = useCallback((string) =>
        new Date(string), []);

    return (
        <center>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>ReactJs Blueprint DateInput2 Props</h2>
            </div>
            <div style={{ width: 500 }}>
                <DateInput2
                    formatDate={formatDate}
                    onChange={handleChange}
                    parseDate={parseDate}
                    placeholder="MM/DD/YYYY"
                    value={dateVal}
                />
            </div>
        </center>
    );
}

export default App;

Output:

Example 2: The below example demonstrates the usage of the shortcuts and highlightCurrentDay props of DateInput2 component.

Javascript

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

function App() {
    const [dateVal, setDateVal] = useState(null);
    const handleChange = useCallback(setDateVal, []);
    const formatDate = useCallback((Date) => Date.toLocaleString(), []);
    const parseDate = useCallback((string) => new Date(string), []);

    return (
        <center>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>ReactJs Blueprint DateInput2 Props</h2>
            </div>
            <div style={{ width: 500 }}>
                <DateInput2
                    formatDate={formatDate}
                    onChange={handleChange}
                    parseDate={parseDate}
                    placeholder="MM/DD/YYYY"
                    value={dateVal}
                    highlightCurrentDay={true}
                    shortcuts
                />
            </div>
        </center>
    );
}

export default App;

Output:

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