Time field beside date in dialog for a component

[anasustic]

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

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>

[Raja_Reddy · Accepted solution]

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>

[anasustic]

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"