AEM Forms Date&time field | Community
Skip to main content
A
Arindam15
February 10, 2022
Solved

AEM Forms Date&time field

  • February 10, 2022
  • 2 replies
  • 3439 views

I want to have a date and time picker in my form, But all i can see that, AEM Forms offers a date picker, from which i can only capture the date given by the form filler . I want to have a field which captures the time as well. Is there any specific way to do so?

Would be really great, if i get a way to capture the date and time as well.

Thanks.

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

TIme Picker is not available in OOTB AEM. You need to customize the datepicker component and change the type property of the DatePicker. Also, check for valueFormat property for achieving the desired format.

 

type can be defined as: 

type(string) = date < date, datetime, time

 

By default, it is date. change it to time and check. it should work.

 

https://developer.adobe.com/experience-manager/reference-materials/6-4/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/datepicker/index.html

 

 

2 replies

Pulkit_Jain_
Adobe Employee
Pulkit_Jain_Adobe Employee
Adobe Employee
February 10, 2022

@arindam15 

Drawing reference from an old thread: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/date-picker-with-time-in-adaptive-form/td-p/356954

 

You can implement OOTB date picker component for this use case. Datepicker formats works in accordance to moment.js display formats [1]. Check [2] for more details.

 

[1] : http://momentjs.com/docs/#/displaying/

 

[2] : DatePicker:-/libs/granite/ui/components/coral/foundation/form/datepicker [https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/granite-ui...]

    A
    Arindam15Author
    February 10, 2022

    Thanks Pulkit for your reply,

    However, the issue is not solved. I am using a date picker component, but i can only capture date , not time. I want to capture the time as well.

      Mayank_Tiwari
      Adobe Employee
      Mayank_TiwariAdobe Employee
      Adobe Employee
      February 11, 2022

      Time picker component is not available in Adaptive Forms. If you want to capture the time of submission of the form, then you may capture the same from <afSubmissionTime> tag in the submitted form data, as shown below.

       

       

        A
        Arindam15Author
        February 11, 2022

        Hi All,

        Let me add something, which will make this question a bit more clear.

         

        I don't want to capture the time of submission of the form.

         

        I want to capture the time selected by the form filler.

        Eg : me as a form filler, I selected "20Th March 2021" and time as "14:00:00". All i want to do is capture this data, which is date and the time as well.

        Now with AEM forms , we can capture the date only (DatePicker Component).

        Is there nay way to have a time picker in AEM forms?

          Mayank_Tiwari
          Adobe Employee
          Mayank_TiwariAdobe EmployeeAccepted solution
          Adobe Employee
          February 11, 2022

          TIme Picker is not available in OOTB AEM. You need to customize the datepicker component and change the type property of the DatePicker. Also, check for valueFormat property for achieving the desired format.

           

          type can be defined as: 

          type(string) = date < date, datetime, time

           

          By default, it is date. change it to time and check. it should work.

           

          https://developer.adobe.com/experience-manager/reference-materials/6-4/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/datepicker/index.html

           

           

            W
            Adobe Employee
            workflowuserAdobe Employee
            Adobe Employee
            February 11, 2022

            i was about the post what Mayank has already posted

              Terms & ConditionsAccessibility statement

              Loading footer...