React.js Blueprint Date picker Modifiers

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. The React.js Blueprint DatePicker Component allows the user to choose or select date or dates. The modifier prop allows to apply styles to the calendar.

Syntax:

<DatePicker modifiers={}/>

Creating React Application and Module installation:

Step 1:  Create a React application using the following command:

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency by using the following command:

npm install @blueprintjs/core

npm install @blueprintjs/datetime

Project Structure: It will look like this.

Example 1: We are importing the DatePicker from “@blueprintjs/datetime”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css” and ‘@blueprintjs/datetime/lib/css/blueprint-datetime.css’. 

We are creating an object named modifier, that we are passing to the modifier prop to the DatePicker. We are also creating a styleComponent for styling which provides additional styling to the DatePicker.

App.js

Javascript

import React from 'react'
import { DatePicker } from "@blueprintjs/datetime";
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
import '@blueprintjs/core/lib/css/blueprint.css';

const modifiers = {
    highlighted: new Date(),
};

const styleComponent = `.DayPicker-Day--highlighted {
    border-radius: 50px !important;
    background-color: green;
    color: white;
}`;

function App() {
    return (
        <div style={{
            margin: 50
        }}>
        <h2 style={{ color: "green" }}>GeeksforGeeks</h2>
            <h4>React.js Blueprint Date picker Modifiers</h4>
            <style>{styleComponent}</style>
            <DatePicker modifiers={modifiers} />
        </div >
    );
}

export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2: To the modifier, we are adding Thursdays and Sundays and passing value to it. To the styleCompoent we have added additional styles as follows.

App.js

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";

const modifiers = {
    thursdays: { daysOfWeek: [4] },
    sundays: { daysOfWeek: [0] },
};

const styleComponent = `.DayPicker-Day--selected {
    background-color: lightgreen!important;
    color: white;
}
.DayPicker-Day--thursdays{
    color: green !important;
    font-weight:800;
}
.DayPicker-Day--sundays{
    color: blue !important;
    font-weight:800;
}
`

function App() {
    return (
        <div style={{
            margin: 50
        }}>
           <h2 style={{ color: "green" }}>GeeksforGeeks</h2>
            <h4>React.js Blueprint Date picker Modifiers</h4>
            <style>{styleComponent}</style>
            <DatePicker
                modifiers={modifiers}
            />
        </div >
    );
}

export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Reference: https://blueprintjs.com/docs/#datetime/datepicker.modifiers