Overlaying OOTB Date Picker

[Nitish_Jain01]

Hi All,

We have a requirement to customize the OOTB datepicker to add preset values to the datepicker. We used a jquery plugin which had preset values. We made changes to the ‘render.jsp’ by overlaying the node ‘libs/granite/ui/components/foundation/form/datepicker/render.jsp’.

We were able to customize the OOTB datepicker and render a new one with presets. Please find the screenshot below for reference.

The issue we are facing is we are not able to save the value in the jcr:node. For instance, if we were to set the On Time for a page, this value does not get persisted on click of ‘Save’. On click of ‘Save’, the form gets refreshed but the value of On Time is not saved and the field becomes empty.

Please help us in finding a solution. This is a critical requirement for the business.

Thanks.

[smacdonald2008]

This component does not have a dialog - its for use within a form - such as: 

.

So an end user would choose a value and submit it - nothing is saved in the form. 

How do you want to use your modified date picker component.

Are you trying to build a date picker for use within a component that has a dialog and where an author sets during design time? 

[Nitish_Jain01]

Hi smacdonald2008,

Thanks for the reply. Client wants to customize across Touch UI like when we open Assets or Sites and then do "View Properties", there's On Time and Off Time fields for which Date picker is used. They want this Date time picker along with Presets to appear there.

[Nitish_Jain01]

Adding screen shot from Site from location: http://localhost:4502/sites.html/content/geometrixx/en

[Nitish_Jain01]

It can be said that Client expectation is whenever during authoring, they see Date field, new Datepicker with presets should come.

[smacdonald2008]

I see - the default control is saving. 

Have you completely replaced the code in the control with new code? 

[smacdonald2008]

This is an interesting use case - typically when a dev overlays a component - it goes under /apps and the values in the components dialog is saved. You are trying to overlay a component that is used in the AEM admin ui. Something you did with your code broke the  default date picker ability to save the field value when the Save button is clicked. Have you looked at the code that is invoked when the Save button is clicked. 

[smacdonald2008]

I am checking with internal AEM ppl on this use case.  

[smacdonald2008]

Taking with one of our experts - Ankur - sounds like the issue is there is a JS submit file that needs to be modified too. YOu need to overlay it also and set the new field there. ANkur will reply soon on the file. 

[AnkurAhlawat]

Hi Nitish,

Me 2 face similiar kind of issues while overlaying touch ui form component to add fields. The only reason your values are not getting saved is because they are not getting passed in submit method of form js. Try to pass your filed value in submit method i think for form this js file is used  ./libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/form/form.js

Set values over here if it succeed then overlay this file also.

[Nitish_Jain01]

Thanks All for suggestions. We will look into it. 

Just to add, we need to overlay the existing datepicker and yes we have overlayed it under /apps. Currently it picks the name dynamically as the requirement is whenever the Date picker comes on Touch UI screen (Asset, Sites, workflows, components) it comes the overlay one with presets.