React-dates: Render date picker within custom container

[chinchiheather]

I am trying to use the date range picker in my app and want a few more buttons within the calendar modal - I want a close button, an OK button and a clear button. I am happy to implement the functionality of these within my app but can't see a way to get these inside the date picker component?

So I wanted to do something like:

               <div>
                 <Button icon={CrossIcon} onClick={onCancel} />
                 <DateRangePicker { ...datePickerProps } />
                 <div>
                   <Button info text="Clear" onClick={this.onClearDates} />
                   <Button primary text="OK" onClick={this.onConfirmDates} />
                 </div>
              </div>

and have the date picker render within my component... Is there any way of achieving this?

[nicotroia]

If you want to add buttons below the calendars, try passing them via renderCalendarInfo

<DateRangePicker
  ...
  renderCalendarInfo={(props) => {
    return (
      <div onClick={...}>Apply</div>
    )
  }}
/>

And style it to look something like

[priyanka-terala]

Nicotroia's mention helped me in added many buttons like "Last 7 Days", "Last Month" and others. But, here I noticed an issue. Once the button, for example, "Last 7 Days" is clicked, the Date Range is being highlighted and dates are also backfilled, but the calendar is not closed. Can someone please suggest how do I achieve this functionality of closing the calendar on clicking these custom buttons?

[akshaynaik404]

I am also not able to find any solution to "close the range picker progrmmatically".

[drico]

In my use case, I need to have both a left pannel, and a bottom pannel.
The problem is there is only one prop renderCalendarInfo for rendering, and another prop calendarInfoPosition to choose where to display the component.