My current situation
I would like to change the separator shown in the Input box of the DatePickerRange widget from "to" to "~".
I've read that this can be done using Flatpickr settings, but it's not working as expected and seems quite complicated.
Here’s what I’ve tried so far:
I followed instructions from some forum posts.
I also downloaded the example .oml file shared in the post, but it’s not easy to test and adapt.
I'm currently using Service Studio 11.55.20 (O11) as of 2025, and would appreciate a working solution or a clear explanation on how to do this customization properly.
Any help would be greatly appreciated. Thank you in advance!
p.s : I copied the JavaScript files from the example in the post.
a. Flatpickrb. FlatpickrLocalec. FlatpickrMonthPlugin
Should I use these?
Hi @TravelerAutumn, I am attaching an OML, what I have done is, first given a name to the DataPickerRange (naming is important to get the widget id), then in the OnSelect event handler action, first I have first updated the local variable bound to the DatePickerRange input to replace 'to' with '~', then I have used to JS to update the input which is actually displayed on the screen.
This is the JS:document.getElementById($parameters.DatePickerId).children[0].children[0].children[1].value = $parameters.Value;
Please note that it is best practice to use the widget id for accessing HTMl elements as during run time the id's are generated dynamically.
ThanksGitansh Anand
Thank you. I admire your ability.
Can you answer my additional questions?
1. When I run the screen, the result is 'to', and when I select a date on the calendar, it is converted to '~' as you intended.
When I try the same thing when rendering the screen, input becomes null.
2. Is it difficult to use 'Flatpickr'?
Hi, for your first question when you say render your screen do you mean refresh because refreshing sets the variables to their default values, if you are refreshing the screen then you just need to update the variable and call the same JS again, just keep in mind JS should run in or after the OnReady event of the screen because the JS requires the widget id. And for your second question using it in OutSystems is not that hard if you go thorough documentation of Flatpickr, most of Flatpickr configurations are already available in OutSystems but if you want to extend it here is a forum post where I have shared an OML for how to do that, Date Picker Range with Time.
I tried it in OnRender using the method I used in DatePickerOnSelect. When the screen first runs, the input Text is blank.
Hi, first of all OnRender event is triggered every time their is some change on the screen, so it would be better if you use OnReady as this runs only once. And what date are you setting in this action, because in the DatePickerOnSelect event, it provides the values but if you are doing it yourself, you need to fetch the dates form DB it if is stored there and set the dates manually.
You should also set the InitialStartDate and InitialEndDate in OptionalConfig of DatePickerRange.
I am attaching an OML for reference, please note that I have used hard coded value for demo purpose only.
Your idea has given me a lot of hints.
Thank you very much.
I will try to use 'Flatpickr' tomorrow.
Hi @TravelerAutumn , hope your doing fine.
Please go through the below link , You may find your solution.
https://www.outsystems.com/forums/discussion/97228/date-picker-range-change-to/
Hope it helps.
Thanks and Regards!
I can't test the oml file properly due to dependency errors,
and it's too complicated to check. :(
try not to refresh the dependencies, go through the code and the logic first.
Hi,
Have you tried to change the code in the script?
The real problem is to refactor the code from the OutsystemsUI module to your module for customization.
Thanks for your interest. It's only been two weeks since I started studying and making this (outsystems), so customizing things like this is very difficult.
The problem isn't that I don't know JavaScript, it's that I don't have a feel for how to apply it to this platform.
Hi @TravelerAutumn,
Please refer to the documentation; it is similar to your problem.
Hope this resolve your issue.
Thanks.