how to use date time picker to select particular time and display the time selected in the front end in HH:MM:SS format | Community
Skip to main content
K
kattakiran1990
November 9, 2021
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

  • November 9, 2021
  • 3 replies
  • 2515 views

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  

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

3 replies

Bhuwan_B
Community Advisor
Bhuwan_BCommunity AdvisorAccepted solution
Community Advisor
November 9, 2021

@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/ui/components/coral/foundation/form/datepicker/index.html

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

    Vijayalakshmi_S
    Vijayalakshmi_S
    Level 10
    November 9, 2021

    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
      Community Advisor
      Kiran_VedantamCommunity Advisor
      Community Advisor
      November 10, 2021

      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.

        Terms & ConditionsAccessibility statement

        Loading footer...