React-datepicker: MinDate, MaxDate is not working in Month Range Picker

[caothuphu2013]

I have a month range component below:
className="react-datepicker-wrapper"
selected={this.state.startDate}
startDate={this.state.startDate}
endDate={this.state.endDate}
maxDate={this.state.endDate}
showMonthYearPicker
onChange={(date) => onChange(date, 'startDate')}
/>
I found that maxDate is not working in only month range mode.
Please to help me resolve this issue.

[gautam-pahuja]

Hi @caothuphu2013 It should ideally work, there was another issue like this which was resolved:
https://github.com/Hacker0x01/react-datepicker/issues/1685

Can you please create a JSFiddle of your use case and share it with us?

Thanks

[ghost]

I can confirm, it is still not working for month picker

[gautam-pahuja]

@bakaa99 Can you please share a codepen or JSFiddle of what you are doing.

[ghost]

@gautam-pahuja I don't know how to include libraries in there. This is component i am using all across my app. It works fine when using as a datepicker, when i use it for months , the min and max does not work

        <DatePicker
            id={id}
            autoComplete="off"
            dateFormat={showMonthYearPicker ? "yyyy/MM" : "yyyy/MM/dd"}
            showMonthYearPicker={showMonthYearPicker || false}
            placeholderText={placeholder}
            disabled={disabled}
            className={`${error && 'is-invalid'} form-control border-right-0`}
            openToDate={openToDate}
            defaultValue={value}
            value={value}
            minDate={minDate ? minDate : new Date()}
            maxDate={maxDate ? maxDate : null}
            readOnly={readOnly}
            required={validationRules.isRequired}
            // shouldCloseOnSelect={true}
            onSelect={(value) => handleChange(value, id)}
            onChange={(value) => handleChange(value, id)} />

[gautam-pahuja]

Check this: https://codesandbox.io/s/peaceful-water-0kzlf

[ghost]

@gautam-pahuja i does work when both minDate and maxDate are defined,not when only minDate is defined.I don't want maxDate, only minDate

[gautam-pahuja]

@bakaa99 I updated the same sandbox to your use case and that's working as well, can you check?

[ghost]

@gautam-pahuja it'll not work if you change the month, i tried and it wasn't working for me.

[ghost]

@gautam-pahuja were you able to reproduce the issue? do you need any more info from my side?

[gautam-pahuja]

Yes, please. A GIF of what you are trying to do would be nice.

[ghost]

@gautam-pahuja , my requirement is very simple . I should be able to set minDate without a maxDate. I want to set the current month as minimum, so that user should not be able to select any previous month.

[caothuphu2013]

Finally, This issue has not been resolved

[caothuphu2013]

I fixed this issue. You can see by: https://github.com/Hacker0x01/react-datepicker/pull/1805

[Mukulagarwal1980]

After lots of r&d I found the solution for set minDate and maxDate properly for DatePicker component.

It accept only "yyyy-MM-dd hh:mm:ss" format and also it is must be java script 'Date' object. moment type is not supported for minDate and maxDate.

eg.
maxDate = {moment(this.props.maxDate).toDate()}
minDate= {moment(this.props.minDate).toDate()}
or
maxDate = {new Date("2020-05-25")}
minDate = {new Date("2010-05-25")}

These are 100% succeed formats. I am using it.
I hope it will help some one to fix their issue. You don't need to write any validation any more for selected value. Handle it on UI layer of your product. :)