React Suite is a front-end UI library built on top of React that lets us many pre-built components to our react application. It is a developer-friendly library and is a great base for building scalable and beautiful websites and applications. In this article, we will see React Suite DateRangePicker Select Whole Week, Whole Month.
The DateRangePicker component is used to take date range input from the user. The hoverRange property of the DateRangePicker component can be used to select the whole week, a whole month, or any custom number of days.
React Suite DateRangePicker Select Whole Week, Whole Month Components:
- DateRangePicker: This component is used to take the user’s input of the date range.
React Suite DateRangePicker Select Whole Week, Whole Month Attributes/Props:
- hoverRange: This attribute is used to define the range of days that can be selected by the user. It accepts two values: “week” and “month”. A custom range can also be assigned to this property.
- oneTap: This property is used to indicate whether to enable One-click to complete the selection date or not
Syntax:
<DateRangePicker hoverRange="month" ranges={[]} />
Note: It is suggested to assign an empty array to the ranges property to disable the default shortcut options to restrict the user to select only the defined range.
Creating React Application And Installing React Suite in the Project:
Step 1: Create the React application using the npx command:
npx create-react-app foldername
Step 2: After creating the project folder, move to it using the cd command:
cd foldername
Step 3: After creating the ReactJS application, Install the rsuite module so that we can use the DateRangePicker component using the following command:
npm install rsuite
Project Structure: After following the above steps, the project structure will look like this:
Project Structure
Let’s see some examples to understand how to use the React Suite DateRangePicker hoverRange attribute/prop.
Example 1: Now replace the code in the App.js file with the code below. In this example, we used the hoverRange property of the DateRangePicker component to select the whole week.
App.js
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { DateRangePicker } from "rsuite"; function App() { const paraStyle = { marginBottom: "10px", marginTop: "25px" }; return ( <div className="App" style={{ display: "flex", alignItems: "center", flexDirection: "column" }}> <header style={{ textAlign: "center", display: "block", marginBottom: "30px" }}> <h3 style={{ color: "green" }}>neveropen</h3> <h5>React Suite DateRangePicker Select Whole Week</h5> </header> <p style={paraStyle}>Select Whole Week</p> <DateRangePicker hoverRange="week" ranges={[]} oneTap /> <p style={paraStyle}> Select Whole Week [ISO 8601 standard] </p> <DateRangePicker hoverRange="week" isoWeek ranges={[]} oneTap /> </div> ); } export default App; |
Run the Application: Run your app using the following command from the root directory of the project.
npm start
Output: Go to http://localhost:3000/ in your browser to see the output.
React Suite Select Whole Week
Example 2: In this example, we used the hoverRange property of the DateRangePicker component to select the whole month and also assigned a custom 5 days range to the hoverRange property.
App.js
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { DateRangePicker } from "rsuite"; import { addDays } from "date-fns"; function App() { const paraStyle = { marginBottom: "10px", marginTop: "25px" }; return ( <div className="App" style={{ display: "flex", alignItems: "center", flexDirection: "column" }}> <header style={{ textAlign: "center", display: "block", marginBottom: "30px" }}> <h3 style={{ color: "green" }}>neveropen</h3> <h5>React Suite DateRangePicker Select Whole Month</h5> </header> <p style={paraStyle}>Select Whole Month</p> <DateRangePicker hoverRange="month" ranges={[]} oneTap /> <p style={paraStyle}>Select 5 days [Custom Range]</p> <DateRangePicker hoverRange={today => [today, addDays(today, 4)]} ranges={[]} oneTap /> </div> ); } export default App; |
Output:
Reference: https://rsuitejs.com/components/date-range-picker/#select-whole-week-whole-month
