So, I am working on a fantasy game MERN stack application. In this game, I need to hide the edit team button on specific timings every day (with gaps between the days of the month). Like, I need to hide the 'edit team' button (or stop the user from editing his/her team) from 6pm to 9pm and open it again at 9pm on each day from January 20 to January 23. From January 24 to January 26, I want to lock or hide the edit button from 3 pm to 5 pm and then open it at 5 pm and lock it again from 6 pm to 9 pm and again open it at 9pm. Then, from January 27 onwards, I want to lock it just from 6 pm to 9pm. And the pattern continues until the end of February. So, how can I implement it?

CodePudding user response：

This can be accomplished using React alone. Assuming you have a component for your button, you can check the browser's time and render the button when it falls in the correct ranges using >=, <= operators.

For e.x.

const Button = () => {
    return <>
        {
         new Date().getDay() >= 20 && new Date().getDay() <= 23 /*Days of mnth*/ &&
         new Date().getHours() > 18 && new Date().getHours() < 21 /*Hours*/
       && <button>Edit Team</button>
        }
    </>

}

However, this could lead to spoofing the time in the browser, so instead, you could configure your server time to restrict access to the editing page in node.js.

app.get("/edit-team", (req, res) => {
    if (new Date() > new Date('January 23, 2022')) {
        res.sendFile('index.html')
    }
})

Feel free to reach out if this is too convoluted.