We are developing an XPages room booking application to run on the web and have some fields: Start Date, End Date, Start Time and End Time all contained in a custom control and are part of an XPage.
All 4 fields are bound using Simple Data Binding to the appropriate fields on the underlying document being created. The Start And End date fields are Edit Box controls with a display type of Date/Time and are set to show Date only in short format.
The Start and End Time fields are also Edit Box controls with display type of Date/Time and set to show Time only.
All 4 fields have “Use Date/Time picker pop-up” selected.
On the Start Date field, onChange event, we have some client side JS that takes the value selected in the field on the picker pop-up, and adds it to the End Date field. We use the following in the Client Tab for the event:
document.getElementById(“#{id:End_Date}”).value=document.getElementById(“#{id:Start_Date}”).value
And in the Server tab the “No Submission” option is checked.
A similar setup is used on the Start Time field, with the Client Side JS set to add 4 hours to the chosen time and populate the End Time field.
Forgetting the issue with the Date Time picker fields not working properly in IE8 for the moment (excellent solution/work-around here: http://www-10.lotus.com/ldd/nd85forum.nsf/5f27803bba85d8e285256bf10054620d/579744cf7198e21785257731006c9cea?OpenDocument)
We are running this application in Chrome for the time being. The Client Side JS fires perfectly fine when you are in the browser, and the relevant End field gets updated. However, when you actually submit the page to save the changes, it reloads with the End Date and End Time fields blank. If we use the date/time picker and manually choose a value in those fields, it is retained when the page is submitted. To make matters worse, if you turn off the “Use Date/Time picker popup” on the End Date and End Time fields, so they are just Edit Boxe controls with the display date type set to Date/Time, the above approach works.
This leads me to think that when you use the picker popup on a field, the code that runs to add the selected value to the field is setting some sort of hidden field on the document. And when we run our client side JS in the onChange event of the Start Date and Start Time fields, this hidden field isn’t getting set, which is why the for submits and loses the values in the 2 End fields.
We want to keep the fields as they are with the Date/Time pickers as the user might want to override the value we insert in to them with javascript. I have tried using the solution posted above where we use a dojo Date Text box and the popup appears as soon as you click in to the field but we have the same problem.
Does anyone know how to set these date fields correctly using JavaScript??
Thanks in advance for your help