Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set min and max date on react day picker

How do i set maximum or minimum date? Like for instance, i want to limit my daypicker only for the last 2 month (min date) until today (max date). So the user can't choose tomorrow's date. Thanks

http://react-day-picker.js.org/docs/

like image 404
Riza S Avatar asked Aug 22 '17 20:08

Riza S


People also ask

How do you set the minimum and maximum date in input type date react?

Then change the format that suit the input field format by using momentjs. const min_date = new Date(+new Date(birthday)-minsec);const max_date = new Date(+new Date(birthday)+minsec);setMinDate(moment(min_date). format('YYYY-MM-DD'));setMaxDate(moment(max_date).

How do you set a min date in react?

My code: const DatePickerMod = () => { const [startDate, setStartDate] = useState(null); return ( <DatePicker selected={startDate} onChange={date => setStartDate(date)} minDate={'02-01-2020'} maxDate={'02-29-2020} placeholderText="Select a date in February 2020" /> ); }; javascript.


2 Answers

You need to use the disabledDays property. It can be passed a set of modifiers as detailed at http://react-day-picker.js.org/docs/modifiers

The following should do what you need:

var twoMonthsAgo = new Date();
twoMonthsAgo.setMonth(twoMonthsAgo.getMonth() - 2);

<DayPicker disabledDays={
{ 
    before: twoMonthsAgo, 
    after: new Date()
}} />
like image 87
twoleggedhorse Avatar answered Dec 04 '22 12:12

twoleggedhorse


From the docs, React Day Picker Modifiers, it looks like you can pass a prop of fromMonth, which you can calculate to be the month two months before today's date. You can also pass a disabledDays prop that will disable days according to your parameters.

const lastMonth = new Date();
lastMonth.setMonth(lastMonth.getMonth() - 2);
<DayPicker
  fromMonth={lastMonth} 
  disabledDays={{ after: today }}
/>

You may need to tweak that a bit, but it should show you where to go from.

like image 30
mindlis Avatar answered Dec 04 '22 12:12

mindlis