How to disable the past and future dates in react-datetime
Today we’ll show you how to disable the past and future dates in react-datetime. As you know in the previous article we had learned about the integration of the datetime picker in ReactJS.
react-datetime picker github, react-datepicker disable past dates, react-datetime disable past dates, react-dates disable future dates, disable current date and time in react js, Disable previous Dates on schedule calendar of react js, React Datepicker exclude past dates, Exclude future dates from a given date using React, How to Datepicker picks future dates only and disable past date in react datetime.
Checkout more articles on ReactJS
Steps to disable the dates in react-datetime
- Add react-datetime in React app
- Disable the past dates
- Disable the future dates
- Disable the weekends
- Disable the list of custom dates
- Output
1. Add react-datetime in React app
In the first step, we have to add the react-datetime in the React application. If you don’t know how to integrate datetime picker then refer to this link.
2. Disable the past dates
To disable the dates, we have to use the isValidDate property of the react-datetime.
As per the documentation, isValidDate is the function and by default is returning the true value.
Define the dates that can be selected. The function receives (currentDate, selectedDate) and shall return a true or false whether the currentDate is valid or not. See selectable dates.
Check the following code to disable the past dates.
1 2 3 4 5 6 7 8 9 10 11 | // disable past dates const yesterday = moment().subtract(1, 'day'); const disablePastDt = current => { return current.isAfter(yesterday); }; return ( <DatePicker isValidDate={disablePastDt} /> ); |
In the above code, we used the isAfter function to validate the dates.
3. Disable the future dates
Check the below code to disable the future dates.
1 2 3 4 5 6 7 8 9 10 11 | // disable future dates const today = moment(); const disableFutureDt = current => { return current.isBefore(today) } return ( <DatePicker isValidDate={disableFutureDt} /> ); |
4. Disable the weekends
Now let’s try to disable the weekends. Here we use the day() function to achieve the goal.
1 2 3 4 5 6 7 8 9 10 | // disable weekends const disableWeekends = current => { return current.day() !== 0 && current.day() !== 6; } return ( <DatePicker isValidDate={disableWeekends} /> ); |
5. Disable the list of custom dates
At the last, we are going to show you how to disable the list of custom dates. Here we will consider the list of custom dates and try to disable it.
1 2 3 4 5 6 7 8 9 10 11 | // disable the list of custom dates const customDates = ['2020-04-08', '2020-04-04', '2020-04-02']; const disableCustomDt = current => { return !customDates.includes(current.format('YYYY-MM-DD')); } return ( <DatePicker isValidDate={disableCustomDt} /> ); |
6. Output
Let’s combine all code together and check the output in the browser.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import React from 'react'; import DatePicker from 'react-datetime'; import moment from 'moment'; import 'react-datetime/css/react-datetime.css'; function App() { // disable past dates const yesterday = moment().subtract(1, 'day'); const disablePastDt = current => { return current.isAfter(yesterday); }; // disable future dates const today = moment(); const disableFutureDt = current => { return current.isBefore(today) } // disable weekends const disableWeekends = current => { return current.day() !== 0 && current.day() !== 6; } // disable the list of custom dates const customDates = ['2020-04-08', '2020-04-04', '2020-04-02']; const disableCustomDt = current => { return !customDates.includes(current.format('YYYY-MM-DD')); } return ( <div className="App"> <h2>Disable dates in react-datetime - <a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></h2> <p className="title">Disable past dates:</p> <DatePicker timeFormat={false} isValidDate={disablePastDt} /> <p className="title">Disable future dates:</p> <DatePicker timeFormat={false} isValidDate={disableFutureDt} /> <p className="title">Disable weekends:</p> <DatePicker timeFormat={false} isValidDate={disableWeekends} /> <p className="title">Disable the list of custom dates: <small>(2020-04-08, 2020-04-04, 2020-04-02)</small></p> <DatePicker timeFormat={false} isValidDate={disableCustomDt} /> </div> ); } export default App; |
That’s it for today.
Thank you for reading. Happy Coding!
it’s work!! thank you