Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Issue with date field format

Avatar

Level 2

I have added datepicker field to dialog for DOB option. When submitting the field the value is getting stored in the following format 2023-02-28T00:00:00.000+05:30.

srk381_0-1677090479722.png

But I would want to display only the date (Ex: 2023-02-28) without time and timezone info in it.

 

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

 

Added additional field to dialog with properties as shown in above article:

 

DOB is the actual DOB field and DOB0 is the additional field added with name property including @TypeHint

srk381_2-1677091003511.png

 

The Properties for the DOB0 are as follows:

srk381_3-1677091127031.png

 

Properties for DOB are as follows:

srk381_4-1677091156872.png

But while submitting the date field from dialog, it shows an error message as "invalid payload".

srk381_5-1677091526457.png

 

 

When I change the valueFormat property to from YYYY/MM/DD to YYYY-MM-DD, the value is getting saved again in following format:

2023-02-28T00:00:00.000+05:30.

 

Can someone help me on how can I show only date without time for datepicker field please? Thanks!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @srk381 ,
Can you please try something like this

krishna_sai_0-1677125272637.png


and saved property looks like this

krishna_sai_1-1677125339310.png


Hope this works.
Thanks,

Krishna

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @srk381 ,
Can you please try something like this

krishna_sai_0-1677125272637.png


and saved property looks like this

krishna_sai_1-1677125339310.png


Hope this works.
Thanks,

Krishna

Avatar

Community Advisor

@srk381 

use it as below.

<duedate
  granite:rel="project-duedate"
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
  displayedFormat="YYYY-MM-DD"
  fieldLabel="Due Date"
  minDate="today"
  name="taskDueDate"
  type="datetime"/>
  <duedatetypehint
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
  name="taskDueDate@TypeHint"
  type="datetime"
  value="Calendar"/>
Thanks,
Siva