React Suite is a front-end UI framework that has a set of React components that developers can use in their react app to fasten the development process. It supports all the major browsers like Chrome, Safari, Firefox, Brave, etc. In this example, we will see React Suite DateRangePicker Show Week Numbers.
The DateRangePicker component is used to take the input of the date range from the users. By default, the DateRangePicker component’s calendar does not show the week number. The showWeekNumbers property can be used to show the week number in front of every row.
React Suite DateRangePicker Show Week Numbers Components:
- DateRangePicker: This component is used to take the user’s input of the date range.
React Suite DateRangePicker Show Week Numbers Attributes/Props:
- showWeekNumbers: This is a boolean property used to show the week number in front of every row of the calendar.
- showOneCalendar: This is a boolean property used to show only one calendar when opening the DateRangePicker.
Syntax:
<DateRangePicker showWeekNumbers/>
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 showWeekNumbers attribute/prop.
Example 1: Now replace the code in the App.js file with the code below. In this example, we used the showWeekNumbers property of the DateRangePicker component to show the week number in front of every calendar row.
App.js
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { DateRangePicker } from "rsuite";   function App() {     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                     Show Week Numbers                 </h5>             </header>             <DateRangePicker showWeekNumbers />         </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.
Â
Example 2: In the example below, we used the showWeekNumbers property of the DateRangePicker along with the showOneCalendar property to show the week number with only one calendar.
App.js
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { DateRangePicker } from "rsuite";   function App() {     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                     Show Week Numbers                 </h5>             </header>               <DateRangePicker                 showWeekNumbers showOneCalendar />         </div>     ); }   export default App; |
Output:
Â
Reference: https://rsuitejs.com/components/date-range-picker/#show-week-numbers
