Time field beside date in dialog for a component

Forum|Forum|1 year ago
February 5, 2024
1 reply
1052 views

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>

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 Raja_Reddy

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

Updated the fieldLabel for the "Uhrzeit bis" (timeTo) field to avoid duplication.
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>

Raja_Reddy

Accepted solution

Community Advisor

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

Updated the fieldLabel for the "Uhrzeit bis" (timeTo) field to avoid duplication.
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>

A

anasusticAuthor

Level 6

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"

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded