CODEWITHSUNDEEP
javascriptreactjsreact-datepicker
greatTeacherOnizuka
greatTeacherOnizuka

Reputation: 565

React datepicker set min and max date

I am using react-datepicker in my project.
I need to display only days for a specific month (lets say February 2020). I was under the impression that I could pass iso dates as minDate and maxDate but this does not seem to work.

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"
    />
  );
  };

Upvotes: 5

Views: 61436

Answers (4)

yeoman
yeoman

Reputation: 407

If you're using the SingleDatePicker component instead of the DateRangePicker component, you will need to use isOutsideRange prop as minDate and maxDate don't exist on SingleDatePicker.

<SingleDatePicker
  standardProps...
  isOutsideRange={(day) => {
    if (minDate) return minDate > day ? true : false;
    if (maxDate) return maxDate < day ? true : false;
    return false;
  }}
/>

Upvotes: 0

Nawin
Nawin

Reputation: 626

If you just want to use input type date field follow this

In your render use like this.

<input type="date" name="DOB"  min={minDate} max={today} />

and declare some variable in js like this

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0 so need to add 1 to make it 1!
var yyyy = today.getFullYear();

if (dd < 10) {
    dd = '0' + dd
}

if (mm < 10) {
    mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
var minDate = "1993-05-25"

This will help you to avoid any external installations

Upvotes: 0

zb22
zb22

Reputation: 3231

pass your date (with that format) as string to a new Date() instance like so:

 <DatePicker
    selected={startDate}
    onChange={date => setStartDate(date)}
    minDate={new Date("02-01-2020")}
    maxDate={new Date("02-29-2020")}
    placeholderText="Select a date in February 2020"
/>

Upvotes: 10

Marko Savic
Marko Savic

Reputation: 2384

minDate and maxDate are Date objects not String.

<DatePicker
  selected={startDate}
  onChange={date => setStartDate(date)}
  minDate={new Date(2020, 1, 1)}
  maxDate={new Date(2020, 1, 29)}
  placeholderText="Select a date in February 2020"
/>

MDN Date

React DatePicker Documentation

Upvotes: 3

Related Questions