Level 3

Overlaying OOTB Date Picker

Forum|Forum|8 years ago
February 15, 2017
10 replies
4110 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

smacdonald2008

Level 10

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?

N

Nitish_Jain01Author

Level 3

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.

N

Nitish_Jain01Author

Level 3

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

N

Nitish_Jain01Author

Level 3

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

smacdonald2008

Level 10

I see - the default control is saving.

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

smacdonald2008

Level 10

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

Level 10

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

smacdonald2008

Level 10

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-1

Level 6

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.

N

Nitish_Jain01Author

Level 3

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded