113
Views
4
Comments
Solved
Small Calendar/Datepicker for Reactive and mobile?
Application Type
Mobile, Reactive

I'm looking for a way to constantly show the calendar from the datepicker widget in reactive and mobile. 

I have searched the forums and forge but did not find any solutions yet.

I've attached a screenshot of what it should be.

Thanks in advance!

UserImage.jpg
An Janet Gomez
Solution

Same as you, I also have the same issue before, but I found a solution, I hope it will work on your end. By the way, I just applied my solution on mobile, since I am working on a mobile project but I'm sure it will work also on reactive.

I just used the default date picker widget of Outsystems.

1. On your module add SetFlatpickrConfigs and BooleanTypes as a dependency.


2. Try to add it on your Screens/Block OnReady event and set the Inline propety to Entities.BooleanTypes to True.


3. This will work on both Date picker and Date Picker Range widget



https://github.com/Pikaday/Pikaday - you can check this out also.


*For the hiding of the input parameter/input field, you just need to add a class on the altInputClass property like this one: 

.flatpickr-calendar-hidden-input { display: none;}





 

I hope it helps :)

2024-11-14 08-23-36
Melvin September

It worked for both
Thanks!

UserImage.jpg
An Janet Gomez

You want the date picker calendar to be visible all the time on the screen, is this what you are searching for? 

2024-11-14 08-23-36
Melvin September

Yes always visible, without the input parameter, and without flickering when a date is selected

UserImage.jpg
An Janet Gomez
Solution

Same as you, I also have the same issue before, but I found a solution, I hope it will work on your end. By the way, I just applied my solution on mobile, since I am working on a mobile project but I'm sure it will work also on reactive.

I just used the default date picker widget of Outsystems.

1. On your module add SetFlatpickrConfigs and BooleanTypes as a dependency.


2. Try to add it on your Screens/Block OnReady event and set the Inline propety to Entities.BooleanTypes to True.


3. This will work on both Date picker and Date Picker Range widget



https://github.com/Pikaday/Pikaday - you can check this out also.


*For the hiding of the input parameter/input field, you just need to add a class on the altInputClass property like this one: 

.flatpickr-calendar-hidden-input { display: none;}





 

I hope it helps :)

2024-11-14 08-23-36
Melvin September

It worked for both
Thanks!

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