Open In App

React Suite DatePicker Usage Show week numbers

Improve
Improve
Like Article
Like
Save
Share
Report

The React Suite DatePicker component is used to take the date and time input from the user. The showWeekNumbers prop denotes whether to show the week number or not. It takes a boolean value that is true by default.

Syntax:

<DatePicker showWeekNumbers />

Prerequisite:

 

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

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 rsuite

Project Structure: It will look like this:

 

Example 1: We are importing the DatePicker Component from “rsuite” and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. Now to the DatePicker component, we are passing the showWeekNumbers prop.

App.js




import { DatePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const style = {
        textAlign: "center",
    };
    return (
        <div className="App">
            <h4>React Suite DatePicker Usage
                Show week numbers
            </h4>
            <div style={style}>
                <DatePicker showWeekNumbers />
            </div>
        </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: We are further adding a button with a label as the state-defined selectBool created using react hook useState, added an onClick function that will call the onHandleChange function that will change the current state of the selectBool and we are passing it to showWeekNumbers prop of the DatePicker component.

App.js




import { useState } from "react";
import { DatePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const [selectBool, setSelectBool] = useState(false);
  
    const onHandleChange = () => {
        setSelectBool(!selectBool);
  
    };
    const style = {
        textAlign: "center",
    };
    return (
        <div className="App">
            <h4>React Suite DatePicker Usage
                Show week numbers
            </h4>
            <div style={style}>
                <p>
                    <b style={{ marginLeft: 30 }}>
                        showWeekNumbers ?</b>
                    <button
                        onClick={onHandleChange}
                        style={{
                            marginLeft: 10, fontSize: 15,
                            padding: 10
                        }}
                    >
                        {"" + selectBool}
                    </button>
                </p>
  
                <DatePicker
                    showWeekNumbers={selectBool}
                />
            </div>
        </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://rsuitejs.com/components/date-picker/#show-week-numbers



Last Updated : 28 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads