209
Views
4
Comments
Solved
[OutSystems UI] Disable dates on Date Picker in Outsystems UI Version 2.9.0
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Hi All,

        We have DisabledDaysList as input parameter on Interaction\DEPRECATED_DatePicker. But we don't have any input paramters to disable dates on Interaction\DatePicker.

       On Latest version of OutsystemsUI 2.14.0 or later, we have client action to disable dates on Interaction\DatePicker. 
       

      On my case, If I do update on OutsystemsUI, it may affect client's applications on production. If I use Interaction\DEPRECATED_DatePicker, the look and feel differ from application standard.
  

       Any suggestions to use Interaction\DatePicker from OutsystemUI 2.9.0 to disable specific dates?

Thanks in advance,

Bala.


2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Balamurugan Pandiyan 

Is there any reason not to use the new one? The differences in terms of UI are minimal and all styling matches the design system foundations - that will be the ideal scenario looking into the future.

In terms of date format, you have an input parameter with that name and on its description, you can see exactly that format as an example:

With this, I got the result you mentioned:

Note: Make sure the DEPRECATED_DatePicker block is after the input to which it's bound. 

Cheers,
GM

UserImage.jpg
Kay Lun


Hi Bala,

I think there's 2 way that could solve your problem.

1. Replace the datepicker with a suitable forge component

This is easier, you could search and play around with different component and find the best one suit your project with disable date option. Shouldn't take long.


2. Clone the OutSystemsUI 2.9 and integrate the disable date option on you own, then re-use the widget in your project. (Not recommended, need high level skills)

Which is not easy to do, cuz at the end of the day, the datepicker widget is just a block that OS did all the magic for you, so you could use them without pain. If you look into that widget, it's just a widget that implemented with flatpickr JS library.

And flatpickr provide options to disable dates and even date range (doc here), and you will find the option config of the datepicker inside the structure (screenshot below), depends on what you need, you could simply create a new structure let's say DisableDate with attribute date (Date Type), and then create a new structure attribute in DatePicker_OptionalConfigs called DisablingDates (List DisableDate Type).

Then the disabled date option should appear in the datepicker as of the input parameter in OptionalConfig. And since OS already serialize the configs into flatpickr library, you just have to assign the new option you just created into the config which will be Internal_Configs.DisablingDates (second screenshot below).

Hope this help.


2022-11-12 11-28-30
Gonçalo Martins
Staff

Hi @Balamurugan Pandiyan 

Nothing changed in terms of look and feel on any version you mentioned in terms of the Date Picker that now is deprecated but you can still use it without any problems since it will not be deleted. 
Can you be more specific with the visual changes you mentioned?
This being said, you can simply use the latest version of OutSystems UI where both versions of the DatePicker are available and choose the new one that follows all the rules from the OutSystems UI design system and take advantage of all the client actions available since this is the version that will be continuously evolved.

Cheers,
GM

2022-11-29 07-50-38
Balamurugan Pandiyan

Hi @Gonçalo Martins 

Thanks for the quick response.

I have used deprecated version of date picker in local. Here is the difference on look and feel


And also I can't able to use date format "MM/DD/YYYY" on deprecated. Can you help me out ?


Thanks,

Bala.

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Balamurugan Pandiyan 

Is there any reason not to use the new one? The differences in terms of UI are minimal and all styling matches the design system foundations - that will be the ideal scenario looking into the future.

In terms of date format, you have an input parameter with that name and on its description, you can see exactly that format as an example:

With this, I got the result you mentioned:

Note: Make sure the DEPRECATED_DatePicker block is after the input to which it's bound. 

Cheers,
GM

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