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

AEM Forms Date&time field

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Employee

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/...

 

 

View solution in original post

9 Replies

Avatar

Employee Advisor

@Arindam15 

Drawing reference from an old thread: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/date-picker-with-time-in-a...

 

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...]

Avatar

Level 2

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.

Avatar

Employee

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.

 

Mayank_Tiwari_0-1644556186076.png

 

Avatar

Level 2

Hi, Mayank

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 Feb 2021" and time as "14:00:00". All i want to do is capture this data, which is date and the time.

Now with AEM forms , we can capture the date only.

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

Avatar

Level 2

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?

Avatar

Correct answer by
Employee

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/...

 

 

Avatar

Employee Advisor

i was about the post what Mayank has already posted

Avatar

Employee

Or you may use 3 separate dropdown lists to capture the time, as shown below:

Mayank_Tiwari_0-1644559611838.png

 

Avatar

Level 2

Great the dropdown would do, but customizing the datePicker would be an ideal way to do.

I see, the type and value is set as coorectly as mentioned by you. but still couldn't get the desired outcome. A detailed explaination of the part would help. Or a offline connecting to solve this would also do,

Thanks.