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" }}>neveropen</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" }}>neveropen</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
