Hello,

In my web application I am using the RichWidgets Input_Calendar to select a date and successfully displaying it in long format (d MMMM yyyy e.g. 1 November 2019) by setting the DateFormat property in the widget to "%e %B %Y".

However if I try to pre-populate the input field from the database the only format I am able to get is one of the server date formats e.g. DD-MM-YYYY (01-11-2019).  I have tried to use various data conversion and format functions but I couldn't get one to work.

How do I get the format of the date when pre-populated from the database to match the format when selected using the widget ?

Cheers, Richard.

Solution

Hello Richard,


I suggest to use DatePicker instead. Using that will fix your current problem.


Even so, you are bound to encounter another error afterwards wherein built-in validation will not recognize the current input as a valid date. (This can also be resolved using DatePicker)


To fix that you need to do the following:

1. Create a temporary variable, i.e. DateView, with a data type of text that will hold the date value of the input.

2. Assign the temporary variable on preparation.

3. On the DatePicker widget you need to add an event handler for OnSelect.

4. Inside the event handler you need to assign the form value for the date attribute. For single date input just assign StartDate.


Hope this helps!

- Emman

Solution

Thanks Emman,

I am trying your solution but I am having a problem with DatePicker.  When I click on the input field to activate the calendar popup it displays briefly and then closes immediately, and I am unable to select a date.

I have tried changing a number of settings but this one has me stumped at the moment - any ideas ?

Cheers, Richard.

Richard Pearce wrote:

Thanks Emman,

I am trying your solution but I am having a problem with DatePicker.  When I click on the input field to activate the calendar popup it displays briefly and then closes immediately, and I am unable to select a date.

I have tried changing a number of settings but this one has me stumped at the moment - any ideas ?

Cheers, Richard.


Hi Richard,

Attaching oml application file having datepicker POC, please check if it can help you.

Thanks,

Archana Gholap


Richard Pearce wrote:

Thanks Emman,

I am trying your solution but I am having a problem with DatePicker.  When I click on the input field to activate the calendar popup it displays briefly and then closes immediately, and I am unable to select a date.

I have tried changing a number of settings but this one has me stumped at the moment - any ideas ?

Cheers, Richard.


That is weird, since that doesn't happen on my end.

Are there any other settings in your input field, like on extended properties? If yes, may I know why?

My assumption right now is that there is another event being triggered upon input click which closes the popup.


- Emman


Emman wrote:

Richard Pearce wrote:

Thanks Emman,

I am trying your solution but I am having a problem with DatePicker.  When I click on the input field to activate the calendar popup it displays briefly and then closes immediately, and I am unable to select a date.

I have tried changing a number of settings but this one has me stumped at the moment - any ideas ?

Cheers, Richard.


That is weird, since that doesn't happen on my end.

Are there any other settings in your input field, like on extended properties? If yes, may I know why?

My assumption right now is that there is another event being triggered upon input click which closes the popup.


- Emman


Hi Emman,

I found that there were a number of issues with the DatePicker but I managed to develop some workarounds:

1.  When selecting the input field with the DatePicker it was flickering in and out of focus for a few iterations and then stopped showing at all.  The workaround I used was to put a calendar icon next to the date input field and set the ButtonWidgetId in the DatePicker to the icon id.  This is not the best solution but it works ok.  I don't know why this is occurring and I don't have any special settings on the date input field including any extended properties.  I didn't experience any problems with Archana's OML file and the RichWidgets Input_Calendar works ok this way on the same field.  But something is clearly causing some type of conflict and the only thing I can think of is that I am using Navigation Tabs on this screen and maybe they don't play nicely together ?  I haven't had time to test this theory yet though.

2.  When performing any Ajax Refresh that includes the date input field (e.g. when performing field validations) the text 'Invalid Date' was inserted into the date field.  The workaround I used was to explicitly set the value of the date field again prior to the Ajax Refresh being performed.  A bit of extra manual effort but it works fine.

Cheers, Richard.

Archana Gholap wrote:

Richard Pearce wrote:

Thanks Emman,

I am trying your solution but I am having a problem with DatePicker.  When I click on the input field to activate the calendar popup it displays briefly and then closes immediately, and I am unable to select a date.

I have tried changing a number of settings but this one has me stumped at the moment - any ideas ?

Cheers, Richard.


Hi Richard,

Attaching oml application file having datepicker POC, please check if it can help you.

Thanks,

Archana Gholap


Hi Archana,

Thanks for providing the OML application which works fine.  It is the same solution suggested by Emman but it doesn't solve the problems I am having.

Cheers, Richard.

Richard Pearce wrote:

Emman wrote:

Richard Pearce wrote:

Thanks Emman,

I am trying your solution but I am having a problem with DatePicker.  When I click on the input field to activate the calendar popup it displays briefly and then closes immediately, and I am unable to select a date.

I have tried changing a number of settings but this one has me stumped at the moment - any ideas ?

Cheers, Richard.


That is weird, since that doesn't happen on my end.

Are there any other settings in your input field, like on extended properties? If yes, may I know why?

My assumption right now is that there is another event being triggered upon input click which closes the popup.


- Emman


Hi Emman,

I found that there were a number of issues with the DatePicker but I managed to develop some workarounds:

1.  When selecting the input field with the DatePicker it was flickering in and out of focus for a few iterations and then stopped showing at all.  The workaround I used was to put a calendar icon next to the date input field and set the ButtonWidgetId in the DatePicker to the icon id.  This is not the best solution but it works ok.  I don't know why this is occurring and I don't have any special settings on the date input field including any extended properties.  I didn't experience any problems with Archana's OML file and the RichWidgets Input_Calendar works ok this way on the same field.  But something is clearly causing some type of conflict and the only thing I can think of is that I am using Navigation Tabs on this screen and maybe they don't play nicely together ?  I haven't had time to test this theory yet though.

2.  When performing any Ajax Refresh that includes the date input field (e.g. when performing field validations) the text 'Invalid Date' was inserted into the date field.  The workaround I used was to explicitly set the value of the date field again prior to the Ajax Refresh being performed.  A bit of extra manual effort but it works fine.

Cheers, Richard.

Hello Richard,


I tried placing the form with date input inside a navigation tab, and it works fine as well. It is likely something else that is happening on your screen. Would it be possible for you to share these to us, so we can fix this correctly?


As for the ajax refresh, I did this on my end as well, and what simply happened was it reset to the value in the database. Did you follow the exact implementation that I stated above?


- Emman

Emman wrote:

Hello Richard,


I tried placing the form with date input inside a navigation tab, and it works fine as well. It is likely something else that is happening on your screen. Would it be possible for you to share these to us, so we can fix this correctly?


As for the ajax refresh, I did this on my end as well, and what simply happened was it reset to the value in the database. Did you follow the exact implementation that I stated above?


- Emman

Hi Emman,

Unfortunately I cannot provide an OML due to IP issues, but I've attached screenshots of the input field and the DatePicker widget below if that helps ?  I followed your implementation with the exception that the start date is set from the database only if the user performs a particular action after initial display.

Cheers, Richard.


Hi Richard,


I followed your implementation with the exception that the start date is set from the database only if the user performs a particular action after initial display.


So you mean aside from OnChange you still perform an update of the value? Where else? Also, what is the variable you are assigning on this scenario? Right now the problem is likely that the variable on scenario outside OnChange is outdated or inconsistent, hence the invalid date. (This inconsistency may also trigger an exception to the DatePicker which causes the auto-close issue).


From how I understand this, you will need another local variable that has a datatype of Date which will serve as the Date representation of DateView (which has a datatype of string). Please note that DateView is the one tied to the DatePicker itself, but it simply serve as View for the user and is not the one we actually assign to the record. For that we use the value given by DatePicker during the OnChange event (as an input parameter). So how do we do this? On every OnChange event we also update the Date datatype of DateView and for consistency we always use this variable when updating the one in the record.


Can you verify further on these details? If I get it right, can you try out the solution I also presented above?


Hope this helps!

- Emman

Emman wrote:

Hi Richard,


I followed your implementation with the exception that the start date is set from the database only if the user performs a particular action after initial display.


So you mean aside from OnChange you still perform an update of the value? Where else? Also, what is the variable you are assigning on this scenario? Right now the problem is likely that the variable on scenario outside OnChange is outdated or inconsistent, hence the invalid date. (This inconsistency may also trigger an exception to the DatePicker which causes the auto-close issue).


From how I understand this, you will need another local variable that has a datatype of Date which will serve as the Date representation of DateView (which has a datatype of string). Please note that DateView is the one tied to the DatePicker itself, but it simply serve as View for the user and is not the one we actually assign to the record. For that we use the value given by DatePicker during the OnChange event (as an input parameter). So how do we do this? On every OnChange event we also update the Date datatype of DateView and for consistency we always use this variable when updating the one in the record.


Can you verify further on these details? If I get it right, can you try out the solution I also presented above?


Hope this helps!

- Emman

Hi Emman,

From how I understand this, you will need another local variable that has a datatype of Date which will serve as the Date representation of DateView (which has a datatype of string). Please note that DateView is the one tied to the DatePicker itself, but it simply serve as View for the user and is not the one we actually assign to the record. For that we use the value given by DatePicker during the OnChange event (as an input parameter). So how do we do this? On every OnChange event we also update the Date datatype of DateView and for consistency we always use this variable when updating the one in the record.

That is correct.  I have a date variable that I am using to update the database and the 'SelectedDate' variable has a text data type and is used as view only.

So you mean aside from OnChange you still perform an update of the value? Where else? Also, what is the variable you are assigning on this scenario? Right now the problem is likely that the variable on scenario outside OnChange is outdated or inconsistent, hence the invalid date. (This inconsistency may also trigger an exception to the DatePicker which causes the auto-close issue).

My screen consists of a form and a list of records.  If a user selects a record from the list the fields in the form are populated including the date variable and the view only date (text) variable.  The user can then update the date for the selected record in which case the OnChange action will update the date variable which will be used to update the database when the user saves the record.  Alternatively the user can use the form to insert a new record into the list.  So a pretty standard sort of screen pattern really.

Cheers, Richard.

Hello Richard,


Can you verify if Date and SelectedDate always have the same value each update? Right now, I can still see this as an inconsistency issue. Given that there are a lot of variables to update you might have missed to update some.


Another thing to note by the way, the SelectedDate should have a correct date format on each update through screen action. What this means is that there is an instance where Date and SelectedDate truly has the same value, i.e. #2019-01-01# and "#2019-01-01#", wherein DatePicker itself will transform it to the desired format. In case for the given example you feed it with "1 January 2019" directly it will result to invalid date.


Hope this helps!

- Emman

Hi Emman,

I don't have any instances where I set SelectedDate to the equivalent of "1 January 1990" and the "Invalid date" error occurs even if I have made no changes to either field but have performed an ajax refresh.

A question: if I assign "#2019-01-01#" to SelectedDate in the code rather than the user using DatePicker, will it automatically set the Date field to #2019-01-01# ?  Or is it necessary to assign #2019-01-01# to the Date field separately if "#2019-01-01#" is assigned to SelectedDate in the code in order to keep the values in the two fields in sync ?

Cheers, Richard.

Hello Richard,


I got it now! The invalid date happens because after the ajax refresh the DatePicker re-checks the value in the input widget, which in turn detects the formatted value (remember this is not in proper date format).


To resolve this you need to add a check in the preparation, since it still executes on ajax refresh. The check is whether DateView, in your case SelectedDate, has a value, and if it does then you overwrite it with Date.


A question: if I assign "#2019-01-01#" to SelectedDate in the code rather than the user using DatePicker, will it automatically set the Date field to #2019-01-01# ?


It is necessary, as you said, to explicitly assign the value to Date in order to keep both variables the same (or in sync).


Hope this helps!

- Emman

John Emmanuel Si wrote:

Hello Richard,


I got it now! The invalid date happens because after the ajax refresh the DatePicker re-checks the value in the input widget, which in turn detects the formatted value (remember this is not in proper date format).


To resolve this you need to add a check in the preparation, since it still executes on ajax refresh. The check is whether DateView, in your case SelectedDate, has a value, and if it does then you overwrite it with Date.


A question: if I assign "#2019-01-01#" to SelectedDate in the code rather than the user using DatePicker, will it automatically set the Date field to #2019-01-01# ?


It is necessary, as you said, to explicitly assign the value to Date in order to keep both variables the same (or in sync).


Hope this helps!

- Emman

Hi Emman,

Yes exactly !  This is why for my workaround I am explicitly setting the SelectedDate field again prior to any ajax refresh.  This includes any other ajax refreshes that includes this field in any other screen actions.  It is a bit more coding work, but the fields are behaving as I want them to.

Thanks for all your help and I'll mark your original reply as the solution because that fixed the original problem.

Cheers, Richard

Hello Richard,


To resolve this you need to add a check in the preparation, since it still executes on ajax refresh. The check is whether DateView, in your case SelectedDate, has a value, and if it does then you overwrite it with Date.


This is wrong. On my sample application, although I was doing an ajax refresh, the button that triggers it is on Submit instead of Ajax submit. This is the reason why Preparation executes upon refresh.


Even so, the solution wherein we update SelectedDate with Date value is still correct. Just wanted to clear that up, since using Submit in an action with Ajax Refresh isn't really Ajax.


Hope this helps!

- Emman