[OutSystems UI] Calendar - Initialize the calendar with a range
Forge component by OutSystems R&D

Hello Guys,

I was developing an Mobile application where the user can submit his vacation period and I used a regular calendar with the select interval. After the user picks the dates I have them to the DB, everything is ok until now. 

My problem starts when I try to open the calendar again with the previous selected interval. At this moment I have now away to set the interval again.

  1. Advanced format setting startRange, EndRange, didn't work. 
  2. Tried to use the picker.setStartRange() picker.setEndRange(), couldn't get this to work.

So I don't have any further solutions without customizing the component, which I would like to avoid.

  1. I have some workarounds (hail the hammer) that would do the trick pick the DOM and set the classes manually
  2. Customize the calendar and enable these 2 parameter, as inputs.

Any advice, has someone had this need?

Thank you

Rita Dias

Hey Davide!

Can you please upload the oml with a sample example of what is going on? :)

Hello Rita,

Sorry for the delay.

Attached a demo example, of course with the "missing" functionality. It has a screen with a list of vacation periods and the equivalent detail screen, which I am not able to correctly initialize with the interval previously saved.

Please let me know if i was clear?


Rita Dias

Hey Davide,

Sorry for the delay, yes it was perfectly clear. After looking around the issue you are right and there is no way of doing this without modifying the pattern itself (by cloning it).

While I know you wanted to avoid cloning the pattern, it's the only way that I see this working. We're currently reworking the way that the advanced format works and I can tell you that once we make these changes that the solution that I have attached will still work once we have made the changes that we need.

Hopefully this will be ok and thanks for the feedback!

If you want to know what was changed here's a quick rundown:

We removed the eval from the Init JavaScript node on the OnReady of the Calendar. 

if(str.length > 0) {     var json = JSON.parse(str);       if(json.startRange || json.endRange) { // done to make sure that you create the date in a way that it can be read by the library. My server is with the YYYY-MM-DD date format, please make sure this works for what you have on yours         json.startRange = new Date(json.startRange);         json.endRange = new Date(json.endRange);     }     options = mergeJSON(options, json); }

By doing this we had to force the keys of the AdvancedFormat to be ". So like this:

    ""startRange"": """ +  NewDate(Year(GetLocalVacationById.List.Current.LocalVacation.StartDate), Month(GetLocalVacationById.List.Current.LocalVacation.StartDate), Day(GetLocalVacationById.List.Current.LocalVacation.StartDate)) + """,
    ""endRange"": """ +   NewDate(Year(GetLocalVacationById.List.Current.LocalVacation.EndDate), Month(GetLocalVacationById.List.Current.LocalVacation.EndDate), Day(GetLocalVacationById.List.Current.LocalVacation.EndDate)) + """

What this actually looks like in 'human':
"startRange": "whatever-date-youwanted",
"endRange": "whatever-other-dateyouwanted"


Hi Rita,

We also have similar requirement in our project. But the solution you have posted above(setting adv format options to 

"startRange": "whatever-date-youwanted",
"endRange": "whatever-other-dateyouwanted"

)is not working for us. While putting that, the calendar throws the below errors. Is there any problem in what we have set?

Uncaught TypeError: a.getTime is not a function

    at compareDates (OutSystemsUI.Calendar.js?1CCww9jtVX6969wsm4+fzA:137)

    at Pikaday.render (OutSystemsUI.Calendar.js?1CCww9jtVX6969wsm4+fzA:1607)

    at Pikaday.draw (OutSystemsUI.Calendar.js?1CCww9jtVX6969wsm4+fzA:1472)

    at Pikaday.show (OutSystemsUI.Calendar.js?1CCww9jtVX6969wsm4+fzA:1675)

    at HTMLInputElement.Pikaday.self._onInputFocus (OutSystemsUI.Calendar.js?1CCww9jtVX6969wsm4+fzA:960)

OutSystemsUI.Calendar.js?1CCww9jtVX6969wsm4+fzA:685 Uncaught TypeError: Cannot read property 'querySelectorAll' of null

    at HTMLInputElement.Pikaday.self._onKeyChange (OutSystemsUI.Calendar.js?1CCww9jtVX6969wsm4+fzA:685)


I'm facing the exact same issues.

Have you found a way to solve this problem, Radhika?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.