how to use date time picker to select particular time and display the time selected in the front end in HH:MM:SS format

[kattakiran1990]

Hi,

Our requirement is to provide a time window for the user to access a offer how can i achieve this functionality using AEM component. kindly suggest.

Thanks in advance  

[Bhuwan_B · Accepted solution]

@kattakiran1990 Try using the type property of the DatePicker. Also check for valueFormat property for achieving the desired format.

https://www.adobe.io/experience-manager/reference-materials/6-4/granite-ui/api/jcr_root/libs/granite...

https://blogs.perficient.com/2018/10/18/a-way-to-handle-dates-in-aem/

[Vijayalakshmi_S]

Hi @kattakiran1990,

You can use the type as datetime or time and control the formatting in HTL (as you might have issues in persistence when using valueFormat as HH:mm:ss)

In HTL : ${'HH:mm:ss' @ format = properties.date}

[Kiran_Vedantam]

Hi @kattakiran1990 

Here is the xml code for you

<createdDate
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
allowBulkEdit="{Boolean}true"
displayedFormat="MM/DD/YYYY HH:mm:ss"
disabled="{Boolean}true"
displayTimezoneMessage="{Boolean}true"
fieldLabel="Created Date"
fieldDescription="MM/DD/YYYY"
name="./jcr:created"
type="date"/>

Hope this helps!

Thanks,

Kiran Vedantam.