Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Time field beside date in dialog for a component

Avatar

Level 7

I have a requirement to show the time field in the dialog form beside the date field. Is this possible and how?

anasustic_1-1707146483031.png

 

 

Currently I have the following configuration in _cq_dialog (time field below the date field):

 

 

 

<dateFrom
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
fieldLabel="Anzeige von"
displayedFormat="DD.MM.YYYY"
name="./dateFrom"
type="date">
<granite:data
jcr:primaryType="nt:unstructured"
allowBulkEdit="{Boolean}true"
cq-msm-lockable="onTime"/>
</dateFrom>
<timeFrom
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
displayedFormat="HH:mm"
displayTimezoneMessage="{Boolean}true"
fieldLabel="Uhrzeit von"
required="{Boolean}false"
name="./timeFrom"
type="time">
<granite:data
jcr:primaryType="nt:unstructured"
allowBulkEdit="{Boolean}true"
cq-msm-lockable="onTime"/>
</timeFrom>
<dateTo
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
fieldLabel="Anzeige bis"
displayedFormat="DD.MM.YYYY"
name="./dateTo"
type="date">
<granite:data
jcr:primaryType="nt:unstructured"
allowBulkEdit="{Boolean}true"
cq-msm-lockable="onTime"/>
</dateTo>
<timeTo
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
displayedFormat="HH:mm"
displayTimezoneMessage="{Boolean}true"
fieldLabel="Uhrzeit von"
required="{Boolean}false"
name="./timeTo"
type="time">
<granite:data
jcr:primaryType="nt:unstructured"
allowBulkEdit="{Boolean}true"
cq-msm-lockable="onTime"/>
</timeTo>
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @anasustic 
Yes, it is possible to show the time field beside the date field in the dialog.

  1. Updated the fieldLabel for the "Uhrzeit bis" (timeTo) field to avoid duplication.
  2. Adjusted the ordering to place the time fields immediately after their respective date fields.

 

 

 

<date
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                                    cq:showOnCreate="{Boolean}true"
                                                    required="{Boolean}true"
                                                    displayedFormat="MM-DD-YYYY"
                                                    fieldLabel="Date"
                                                    name="./date"
                                                    type="datetime">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        metaType="datepicker"
                                                        typeHint="Date"/>
                                            </date>

 

 

RajaReddy_3370_0-1707152421270.png

 

 



View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @anasustic 
Yes, it is possible to show the time field beside the date field in the dialog.

  1. Updated the fieldLabel for the "Uhrzeit bis" (timeTo) field to avoid duplication.
  2. Adjusted the ordering to place the time fields immediately after their respective date fields.

 

 

 

<date
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                                    cq:showOnCreate="{Boolean}true"
                                                    required="{Boolean}true"
                                                    displayedFormat="MM-DD-YYYY"
                                                    fieldLabel="Date"
                                                    name="./date"
                                                    type="datetime">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        metaType="datepicker"
                                                        typeHint="Date"/>
                                            </date>

 

 

RajaReddy_3370_0-1707152421270.png

 

 



Avatar

Level 7

Thank a lot @Raja_Reddy for your reply. It works like you described and showed in your picture. I change the displayFormat property so that editors add date&time in the same field which makes the dialog "less busy".

displayedFormat="MM/DD/YYYY HH:mm"