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.

Hi,

I will publish a new version to the forge today.Can you please share your OML file so i can take a look why your icons aren't loading?

Thanks,
Niels F.

Hi,

I published a new version of the component.
A new functianlity has been added. You can new disable those input fields with the new input parameter 'DisableDateInputs'

Also, the icons not being displayed in some cases has been fixed too. You should not have that issue anymore!

Greetings,
Niels F.

Hi Niels,

First of all, this is a great component and I would like to thank you for your great contribution to the OutSystems community by creating this.

I have a small issue with the component in that I am using the AutoUpdateInput setting (set to True) so that my underlying input box is automatically updated when I select a date range.  However, as I use this component as part of a selection of filters for a list of table records, the problem is that the input field is automatically pre-filled with today's date as a range (today->today) which is a problem as my list then automatically gets filtered on today's date.  Is there a workaround for this?  If I turn this setting off (AutoUpdateInput), I get a different problem in that if I select a different date range, the OnChange event for the input text box field linked to the date range picker is not fired.

Thanks in advance,

Arlo.