83
Views
8
Comments
Solved
[OutSystems UI] How to set a default date in the picker without setting it in the field?
outsystems-ui
Reactive icon
Forge component by Gonçalo Martins
Application Type
Reactive

We would like to have a form in which a datetime field is required, but we don't want it set because we want the user to explicitly set it.  We would like to default the datetime picker to the top of the very next hour without the actual field being set.  We can default the picker to be today at noon, but not the next hour from the current date.


Can this be added as a feature, or does anybody know how this can be done?

Solution

Hello @João Ferreira 

Basically, you want to add an event to run once the date picker is open right?
In order to do that you can use the extensibility via client actions to add the associated flatpickr event to trigger that event and in the callback, you pass you can do that logic:

Note: Besides adding the event don't forget to remove it on the on-destroy event.


EDIT: Attached is a working example to showcase it


Hope it helps!

Cheers,
GM

DatePickerTestsForum.oml

Hi,

one approach would be to introduce a second variable. A possible way

Create a Form data structure, e.g. with the following fields.

* Name of type Text

* Birthday of Type Date

* ScreenBirthday of Type Date

Add this form structure as local variable to your screen.

I assume that you want to prefill data from an aggregate. So add an OnAfterFetch to that aggregate

In the handler fill Name and Birthday to the values retrieved by the aggregate

Add a condition to fill the ScreenBirthday with the queried Birthday from the aggregate if it is NOT a nulldate, otherwise set it to the current date + 1 hour (AddHours(CurrDateTime(),1).

Add the Form to the screen. Bind the input of the Name textinput to Name and the input for the Birthday to the ScreenBirthday property.

Add an OnChange handler to the ScreenBirthday input and here you set the Birthday value of the formdata to ScreenBirthday.

In the Save event you have to do a manual validation of the Birthday field. So before the Form.IsValid check if Birthday is a NullDate. If so set the Widget Validity of the ScreenBirthday to false.

Hope that helps,

Stefan

Thanks for getting back to us. I went through the exercise you laid out and it doesn't quite solve our use case. Let me clarify our requirements:


1) We are using the Date Picker widget for the overall style instead of the regular input widget set to a date type.
2) The field is not a mandatory field so we don't want it to populate anything at all if the user doesn't click on it and there is not a saved reminder date time in the database.
3) If the user does have a date time saved in the database then it will populate that date time on render of the screen.
4) If the user does NOT have a date time saved in the database and wants to set one than upon clicking it the pop up will default to the current date but with the time set to the top of the upcoming hour.


Right now we can only get the field to autofill itself to the current date time at the top of the upcoming hour, but this makes that field no longer blank. Making the user think it's required. If we leave the initial field blank, when they do click on it the pop up automatically goes to the current date at 12 pm. We would like to be able to change that time that is on the pop up.

Yes, sorry about that @Stefan Weber I misspoke, saying that the field is required.  Spencer is my colleague so he knows more about it than I do.  The field is NOT required so we are starting the form with it blank in the case of a new record.  We want the user to explicitly set the field if they want it, but we need the datepicker popup to be defaulted to the top of the next hour.  The only thing it currently can default to is 12:00 pm.

Thank you Spencer and Mike for clarification. Iam not aware of a way to modify the default behaviour of the native browser date / time picker or its default settings. The OutSystems way you could use is to divide the datetime field up in date and a time field and use DatePicker and TimePicker widgets from OutSystems UI (in the Interaction flow). Both allow setting an initial value for date/time and lots of additonal config options.

Stefan

Hi @Mike Neyman

Did you guys find a solution for this? 

I also have a scenario where we want to keep the form input empty and change the default time when you open the DatePicker widget.


Thanks in advance,
João

Solution

Hello @João Ferreira 

Basically, you want to add an event to run once the date picker is open right?
In order to do that you can use the extensibility via client actions to add the associated flatpickr event to trigger that event and in the callback, you pass you can do that logic:

Note: Besides adding the event don't forget to remove it on the on-destroy event.


EDIT: Attached is a working example to showcase it


Hope it helps!

Cheers,
GM

DatePickerTestsForum.oml

Hello @João Ferreira,

The solution we came up with for this was to create a wrapper component (extension of the datepicker), where we would display a standard input when the datepicker was empty, which is bound to the field.  Then, when we clicked on the input, we toggle the visibility for the datepicker component and programmatically open the picker.  This enables us to set the default value to whatever we would like it to be while still maintaining the expected behavior of the user.  This same behavior is repeated throughout our application.


It would be wonderful if the datepicker component supported exactly what we wanted the behavior to be, and we will continue to check back to see if it does, but in the meantime we have created a workaround that is adequate.

Hello @Mike Neyman 

Could you share that example so we can try to understand exactly what you need and provide something other community members might benefit from?

Best Regards,
GM

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