Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 1

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  

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
3 Replies

Avatar

Correct answer by
Community Advisor

Avatar

Community Advisor

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)

Vijayalakshmi_S_1-1636487013002.png

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

Avatar

Community Advisor

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.