[Date Input] minDate/maxDate doesn't work outside of default range

[jchomicki]

Bug report

• Package version(s): datetime 1.12.0
• Browser and OS versions: Chrome 57.0.2987.133 (64-bit)

Steps to reproduce

1. Create a Date Input with maxDate={new Date(2020, 5, 5)} and minDate={new Date(1990, 5, 5)}
2. Try changing value to 2019-04-20

Actual behavior

Dropdown fails to open or is disabled and an error is thrown in the console:

datePicker.tsx?0de8:169 Uncaught Error: [Blueprint] <DatePicker> value prop must be within minDate and maxDate bounds
    at DatePicker.validateProps (eval at <anonymous> (app.js?v=local:2629), <anonymous>:185:19)
    at DatePicker.AbstractComponent.componentWillReceiveProps (eval at <anonymous> (app.js?v=local:430), <anonymous>:37:14)
    at DatePicker.componentWillReceiveProps (eval at <anonymous> (app.js?v=local:2629), <anonymous>:168:52)
    at eval (eval at <anonymous> (app.js?v=local:5858), <anonymous>:611:23)
    at measureLifeCyclePerf (eval at <anonymous> (app.js?v=local:5858), <anonymous>:75:12)
    at ReactCompositeComponentWrapper.updateComponent (eval at <anonymous> (app.js?v=local:5858), <anonymous>:610:9)
    at ReactCompositeComponentWrapper.receiveComponent (eval at <anonymous> (app.js?v=local:5858), <anonymous>:547:10)
    at Object.receiveComponent (eval at <anonymous> (app.js?v=local:1161), <anonymous>:125:22)
    at Object.updateChildren (eval at <anonymous> (app.js?v=local:13710), <anonymous>:109:25)
    at ReactDOMComponent._reconcilerUpdateChildren (eval at <anonymous> (app.js?v=local:13878), <anonymous>:208:32)

Expected behavior

Setting the min/maxDate outside of the default 20 year window should be allowed.

[giladgray]

this is related to #977 (converting validation errors to warnings) but probably needs some design thinking for how we handle dates outside of the valid window.

[giladgray]

I cannot reproduce this in the docs DateInput example. renders as expected, no errors and correct date ranges:

const MAX = new Date(2020, 5, 5);
const MIN = new Date(1990, 5, 5);
<DateInput {...this.state} value={new Date(2019, 4, 20)} maxDate={MAX} minDate={MIN} />

also tried with defaultValue and clicking on 2019-4-20.

@jchomicki would you be able to share the exact code you use to create the DateInput?

[giladgray]

aha the issue is in how @mfedderly implemented the DateTimePicker composition in #922. we need to set <DateTimePicker datePickerProps={this.props}> instead of simply spreading this.props.

[TheAifam5]

The problem still exist when user types the date manually.

I use default value of minDate and when user types:
02/02/2

and next number crashes whole page.

I using the latest react and blueprintjs (checking for updates like every day :D)

[silviodeligios]

I have the same issue

[patrickk]

Why was this closed? @giladgray

[adidahiya]

@TheAifam5 @silviodeligios @patrickk it was closed for reasons similar to this: #3407 (comment)

we can continue discussion in #3861 if you'd like