[DateRangePicker] Inline/Embedded DateRangePicker

[DateRangePicker] Inline/Embedded DateRangePicker

  
Forge Component
(3)
Published on 27 Jun by Niels Favreau
3 votes
Published on 27 Jun by Niels Favreau

Hi,

This DateRangePicker is perfect but there are some components I would like to modify to suit my application. 

The things that I want to modify is:

  • Have 1 calendar for user to use instead of 2.
  • Display the DateRangePicker calendar inline/embedded rather than in a generated pop-out bubble. The below screenshot is an example of a inline/embedded datepicker.


Is it possible to do these changes? If so, could someone please provide some guidance


Cheers,

Dalen

Hi Dalen,

To only display 1 calendar you can set the input parameter 'SingleDatePicker'  on true.

Regarding your second question, It's currently not supported for inline use.

Hi Niels,

When I changed the 'SingleDatePicker' parameter to true, the input only showed 1 datepicker but I was not able to select a date range. Any idea on how to add the date range feature to 1 datepicker?

Also, is there an ETA for the new version with inline support? If it's not anytime soon, could you please provide some tips on what I can do to implement the calendar inline?


Kind Regards,

Dalen 

Hi Dalen,

SingleDatePicker disables indeed the usage of 'rangepicker'. Are you sure a single datepicker with range selector is the best UI/UX choice?
However you can tweak the rangepicker with css to make it possible.

Assuming Input paramater 'Drops' = Down and 'opens' = right and 'SingleDatePicker' = False

You can add this CSS to your page:


.calendar.right thead>tr:nth-child(2) {
    display: none;
}
.calendar.right tbody {
    display: none;
}
.daterangepicker .calendar.right .daterangepicker_input {
    position: absolute;
    top: 45px;
    left: 175px;
    width: 260px;
}
.calendar.left .calendar-table {
    margin-top: 45px;
    min-height: 250px;
}
.calendar.right .calendar-table {
    position: absolute;
    margin-top: 285px;
    left: 200px;
}

My result:


This is CSS i wrote myself, since the bootstrap daterangepicker isn't supporting it.
Based on the configuration of your daterangepicker, you will have to tweak the css I just gave you. Since it was based on my configuration.
If you can't make it work, give me your configuration and ill try to do it for you.

About the inline display, I'm still trying some things out ;) I'll let you know whenever I made something.