379
Views
11
Comments
Solved
[OutSystems UI] OutSystems UI - DatePicker - Format the Input DateTime to exclude the hyphen
outsystems-ui
Reactive icon
Forge asset by OutSystems

Hi, 


I'm using the datepicker component from OutSystems UI and want the date format of the input field to read as "dd/mm/yyyy HH:MM", as it currently has a hyphen between the date and time i.e., "dd/mm/yyyy - HH:MM". Is there a way to change it?

Thanks

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

Hello @John Ronis, 

At this point, since this option is not available yet on the SetFlatpickrConfigs client action, the way I remembered and that worked was to override the following method by placing the following script in the DatePicker's Initialized event:

The result is:


Hope it helps.

Cheers,
GM

2022-06-20 10-22-18
Nabeel Khan

Hi John,

You can change the DateFormat in Interaction/DatePicker Properties from "DD/MM/YYYY" to "DD/MM/YYYY H:MM" 

Hope this will help.

Regards,

Nabeel Khan.

UserImage.jpg
John Ronis

Hi Nabeel, 

Thank you for your reply, 

But if I change the date format to "DD/MM/YYYY H:MM" then it will show the time twice. I can remove the second time by remove the TimeFormat property, but then I lose the ability to select a time in the picker. So this solution doesn't work for me. 

1. with DateFormat "DD/MM/YYYY H:MM "

2. With TimeFormat empty

2023-01-26 16-03-24
Ana Agostinho

Hello John Ronis,

I believe you should change the date format (not include just the date, but if you want to have the time too, put DD/MM/YYYY HH:MM instead). 

Also, if you don't know, the Date Picker Pattern is based on the flatpickr library. For more advanced options, you can refer to this library. 

Best regards, 
Ana

UserImage.jpg
John Ronis

Hi Ana, 


Thank you for your reply, 

This date time format doesnt quite work "DD/MM/YYYY HH:MM", should just have the 1 "H". But similar to Nabeel's answer above, that does show the correct date time format I want, but if I still want the user to be able to select a time then I must have the TimeFormat property of the DatePicker widget filled, and this adds the time again in the input field which I don't want. 

1. with time format DD/MM/YYYY HH:MM and TimeFormat set to empty. 


2024-11-25 22-05-29
Sergio Aznar Guallar

Hi John,

you can try setting the format date in service center, and then in the date picker don't format it. check screenshots:

It let me select date and time

let me know if it works for you


Kind regards,

Sergio

UserImage.jpg
John Ronis

Hi Sergio, 

Thanks for the reply,

This doesn't work for me either as the date format I have is ok, it's the hyphen that the date picker adds between the date and the time that I want to remove. 

i.e., datepicker format is DD/MM/YYYY - HH:MM and I want DD/MM/YYYY HH:MM with the ability to pick a date and time in the picker. 

2024-11-25 22-05-29
Sergio Aznar Guallar

Oh alright,

Can i ask why you dont need show the hyphen? :D

2024-11-25 22-05-29
Sergio Aznar Guallar

Maybe you can aproach by using the substring function in the input value

UserImage.jpg
John Ronis

Hi Sergio, 

I have a requirement that the date formatting across the application should be consistent. The input component is linked to a local variable that is of a datetime data type, the date picker is still adding the hyphen and time after this datetime, regardless of the date format I specify. 

Thanks


2022-06-20 10-22-18
Nabeel Khan

Hi John,

I have got a solution for you.

If you don't want a hyphen between date and time, so instead of taking date picker you have to take input box with data type date time, I am attaching some screenshots for your reference.

I hope this helps.

Good Luck and Kind Regards,

Nabeel Khan.

Screenshot (3).png
Screenshot (5).png
Screenshot (8).png
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @John Ronis, 

At this point, since this option is not available yet on the SetFlatpickrConfigs client action, the way I remembered and that worked was to override the following method by placing the following script in the DatePicker's Initialized event:

The result is:


Hope it helps.

Cheers,
GM

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