Fix Min/Max DatePickerRange date

[mmartinsky]

Fixes #551, #557

Also added example usage to Demo.

Added isRequired to id props, since the downstream
component has them required anyway

[alexcjohnson]

Thanks for the fix @mmartinsky! I'd like to see if we can avoid .isRequired on those ids though, most of the time users won't care about that and it would just be a pain to generate them.

The solution that comes to mind is making a uuid for each one and storing that in state during the constructor; then in render, if (start|end)_date_id is missing, use the one from state instead. Seem reasonable? I wouldn't want the uuid inside render because I don't want it to change with every render.

We've used uniqid for similar purposes elsewhere.

[mmartinsky]

The previous commit passed all 3 python ones, not sure how I can retrigger builds - can you please take a look @alexcjohnson ?

[alexcjohnson]

@mmartinsky I wouldn't worry about those test failures - the python one is an intermittent error we know about (@byronz you were talking about StaleElementReferenceException this morning 😅 ) and the percy ones I've approved (though we really should get those date-dependent ones out of percy and just programmatically test for the current month so this stops happening). Let's just get the code where it needs to be and then if there's still a failure we can sort it out.

[alexcjohnson]

I think we need to do props.start_date_id || this.state.start_date_id here rather than in the constructor - just in case a user decides to change props.start_date_id later on. No idea why someone would do that, but if they did it would not make it to the <DateRangePicker> this way.

[Vishalghyv]

Hi I tried to fix the issue,
the function isOutsideRange(date) in src/components/DateRangePicker.js
isOutsideRange(date) {
const {min_date_allowed, max_date_allowed} = this.state;

    return (
        (min_date_allowed && date.isBefore(min_date_allowed)) ||
        (max_date_allowed && date.isAfter(max_date_allowed))
    );
}

shouldn't this be
isOutsideRange(date) {
const {max_date_allowed, min_date_allowed} = convertToMoment(
this.props,
['max_date_allowed', 'min_date_allowed']
);

    return (
        (min_date_allowed && date.isBefore(min_date_allowed)) ||
        (max_date_allowed && date.isAfter(max_date_allowed))
    );
}

i tried a lot but this was the only things i found
could anyone please tell me how to test cause if i pip install dash
there will be no src folder created,
this is my first open project so i would be very thankful for any advice (it's bit tough and confusing)

[Vishalghyv]

Also i found something else that might be helpful
the function onDatesChange({startDate: start_date, endDate: end_date}) ,
in src/components/DatePickerRange.react.js
onDatesChange({startDate: start_date, endDate: end_date}) {
const {setProps, updatemode} = this.props;

    const oldMomentDates = convertToMoment(this.state, [
        'start_date',
        'end_date',
    ]);

    if (start_date && !start_date.isSame(oldMomentDates.start_date)) {
        if (updatemode === 'singledate') {
            setProps({start_date: start_date.format('YYYY-MM-DD')});
        } else {
            this.setState({start_date: start_date.format('YYYY-MM-DD')});
        }
    }

    if (end_date && !end_date.isSame(oldMomentDates.end_date)) {
        if (updatemode === 'singledate') {
            setProps({end_date: end_date.format('YYYY-MM-DD')});
        } else if (updatemode === 'bothdates') {
            setProps({
                start_date: this.state.start_date,
                end_date: end_date.format('YYYY-MM-DD'),
            });
        }
    } 
}

shouldn't this be
onDatesChange({startDate: start_date, endDate: end_date,min_date_allowed:min_date_allowed,max_date_allowed:max_date_allowed}) {
const {setProps, updatemode} = this.props;

    const oldMomentDates = convertToMoment(this.state, [
        'start_date',
        'end_date',
    ]);

    if (start_date && !start_date.isSame(oldMomentDates.start_date)) {
        if (updatemode === 'singledate') {
            setProps({start_date: start_date.format('YYYY-MM-DD')});
        } 
        else if(date.isBefore(min_date_allowed)) {
            this.setState({start_date: start_date.format('YYYY-MM-DD')});
        }
    }

    if (end_date && !end_date.isSame(oldMomentDates.end_date)) {
        if (updatemode === 'singledate') {
            setProps({end_date: end_date.format('YYYY-MM-DD')});
        } 
        else if (updatemode === 'bothdates' && date.isAfter(max_date_allowed)) {
            setProps({
                start_date: this.state.start_date,
                end_date: end_date.format('YYYY-MM-DD'),
            });
        }
    } 
}

I still don't know how can i test it , so please could you help

[mmartinsky]

@Vishalghyv Yeah, that's the crux of this PR - it was mistakenly looking at state vs. props in https://github.com/plotly/dash-core-components/pull/561/files#diff-63268a7882b62c59b51c626fe11e9ca1R77.

If you want to test it, you can clone my fork and run npm start - this will run the demo app, and you can see the disabled dates as shown in the picture. If you mean automated testing, npm run test-unit for JS Jest tests, or npm run test:py for python tests

[Vishalghyv]

@mmartinsky That means i did found the crux of the problem :) :)))))

[alexcjohnson]

Beautiful. Thanks so much for the contribution & iteration @mmartinsky! 💃