shownDate changes do not change Calendar #552

[abtahi-tajwar]

Problem Statement

We need a way to manually change the shown date to a specific month because it is not always relevant to automatically navigate to the selected start date itself. Currently, this package offers an attribute named shownDate which does not respond desirably.

Faced Problem Scenario

This problem was faced by me while I was implementing a date range picker with this package. The purpose of that picker is to let users pick vacation ranges from the calendar. However, I had to check existing leaves and vacations while changing each month which updates a state by calling an API. That API update is re-rendering the selected date and the navigation is coming back to that selected date.

Solution of this Pull Request

In this PR, I have added another attribute named setShownDate which will return a callback function to navigate to a specific month. The callback function will take one date parameter. It will simply move the view to that specific date.

How to use

const [changeShownDate, setChangeShownDate] = useState(null)

<DateRange 
{...props}
setShownDate={func => setChangeShownDate(func)}
/>

<button onClick={() => setChangeShownDate(changeShownDate(new Date('01/25/2015')))}>

After calling the function from state, the calendar will navigate to the specific date.