Expand my Community achievements bar.

SOLVED

AEM 6.3 - Datepicker in dialog does not prepopulate previously saved value

Avatar

Level 2

Hello Everyone,

I am using resource type 'granite/ui/components/coral/foundation/form/datepicker'

Following is the snippet from dialog xml file:

<multi class="full-width" jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/foundation/form/multifield"
      fieldDescription="Click 'Add Field' for new event info"
      fieldLabel="Manual Event Info">

     <field jcr:primaryType="nt:unstructured" name="./lsaManualEvents"
         acs-commons-nested="JSON_STORE"
         sling:resourceType="granite/ui/components/foundation/form/fieldset">

         <layout jcr:primaryType="nt:unstructured" method="absolute" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>

         <items jcr:primaryType="nt:unstructured">

             <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">

                  <items jcr:primaryType="nt:unstructured">

                           <title fieldLabel="Event Title" jcr:primaryType="nt:unstructured" name="./event_title"          

                                                                                sling:resourceType="granite/ui/components/foundation/form/textfield"/>

                          <subtitle fieldLabel="Event Subtitle" jcr:primaryType="nt:unstructured" name="./event_subtitle"                                                                                 sling:resourceType="granite/ui/components/foundation/form/textfield"/>

                            <building_name fieldLabel="Building" jcr:primaryType="nt:unstructured" name="./building_name"                                                                                 sling:resourceType="granite/ui/components/foundation/form/textfield"/>

                            <room fieldLabel="Room" jcr:primaryType="nt:unstructured" name="./room"                                                                            sling:resourceType="granite/ui/components/foundation/form/textfield"/>


                           <date fieldLabel="Event Date"
                                           jcr:primaryType="nt:unstructured" name="./datetime_start"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                           emptyText="MM/DD/YYYY HH:mm" required="{Boolean}false" type="datetime" displayedFormat="MM/DD/YYYY HH:mm"                                              valueFormat="MM/DD/YYYY HH:mm"/>



                            <link fieldLabel="Full URL" jcr:primaryType="nt:unstructured" name="./website"                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"/>

                  </items>

             </column>

           </items>

      </field>

   </multi>

When I open the dialog, the previously stores date time value is not pre populated. Following is the snapshot:

Screen Shot 2017-11-02 at 2.17.53 PM.png

When I inspect the "Event Date" field, following is the HTML snippet:

<coral-datepicker class="coral-Form-field coral-InputGroup" type="datetime" name="./datetime_start" displayformat="MM/DD/YYYY HH:mm" valueformat="MM/DD/YYYY HH:mm" headerformat="MMMM YYYY" value="" placeholder="MM/DD/YYYY HH:mm" data-foundation-validation="" data-validation="" role="datepicker" aria-disabled="false" aria-invalid="false" aria-readonly="false" aria-required="false" aria-haspopup="true" aria-expanded="false" aria-owns="coral-id-617"><input type="hidden" handle="hiddenInput" value="2017-11-23T13:25:00.000-05:00" name="./datetime_start">

<input is="coral-textfield" class="coral-Textfield coral-InputGroup-input" type="text" handle="input" role="textbox" placeholder="MM/DD/YYYY HH:mm" aria-invalid="false">

<div class=" coral-InputGroup-button" handle="toggleButtonContainer">

  <button is="coral-button" class="coral-Button coral-Button--secondary" size="M" variant="secondary" type="button" icon="calendar" iconsize="S" handle="toggle" aria-haspopup="true" aria-label="Calendar" title="Calendar"><coral-icon class="coral-Icon coral-Icon--sizeS coral-Icon--calendar" icon="calendar" size="S" role="img" aria-label="calendar"></coral-icon><coral-button-label></coral-button-label></button>

</div>

<coral-popover class="coral3-Popover" aria-hidden="true" tabindex="0" closable="off" role="dialog" aria-live="assertive" handle="popover" id="coral-id-617" alignmy="right top" alignat="right bottom" collision="fit" style="display: none;"><div coral-tabcapture="top" tabindex="0"></div><div class="coral-Dialog-header coral-Popover-header" hidden="">

<coral-icon class="coral-Icon coral-Dialog-typeIcon coral-Icon--sizeS" icon="" size="S" handle="icon"></coral-icon>

<div handle="headerContent" class=" coral-Dialog-title coral-Heading coral-Heading--2"><coral-popover-header></coral-popover-header></div>

<button is="coral-button" class="coral-Button coral-Dialog-closeButton coral-Button--minimal" size="M" variant="minimal" handle="closeButton" type="button" icon="close" iconsize="XS" aria-label="Close" title="Close" coral-close="" style="display: none;"><coral-icon class="coral-Icon coral-Icon--close coral-Icon--sizeXS" icon="close" size="XS" role="img" aria-label="close"></coral-icon><coral-button-label></coral-button-label></button></div><div class="coral3-Popover-content"><coral-popover-content></coral-popover-content></div><div coral-tabcapture="intermediate" tabindex="0"></div><div coral-tabcapture="bottom" tabindex="0"></div></coral-popover></coral-datepicker>

Could someone please help me here?

Thank you for your time.

Best Regards,

Ananta

1 Accepted Solution

Avatar

Correct answer by
Level 6

tested "granite/ui/components/coral/foundation/form/datepicker"  worked perfectly in AEM 6.3

               <date

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"

                        displayedFormat="MMMM DD, YYYY hh:mm a"

                        displayTimezoneMessage="{Boolean}true"

                        fieldDescription="Date Test."

                        fieldLabel="date"

                        name="./isReadOnlyonTime"

                        renderReadOnly="{Boolean}false"

                        type="datetime"/>

1339752_pastedImage_2.png

View solution in original post

14 Replies

Avatar

Level 6

Can you pls try this  snippet

                                        <ondate

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"

                                                displayedFormat="MMMM DD, YYYY hh:mm a"

                                                displayTimezoneMessage="{Boolean}true"

                                                fieldLabel="On Time"

                                                name="./onTime"

                                                renderReadOnly="{Boolean}true"

                                                type="datetime">

                                                <granite:data

                                                    jcr:primaryType="nt:unstructured"

                                                    allowBulkEdit="{Boolean}true"

                                                    cq-msm-lockable="onTime"/>

                                            </ondate>

Reference:

aem-core-wcm-components/.content.xml at master · Adobe-Marketing-Cloud/aem-core-wcm-components · Git...

Avatar

Level 2

Thank you mjb54261515​ for your prompt reply. I tried the suggested changes but it still doesn't work.

Avatar

Level 10

Can you put this into a small component and package it up and place in Google Drive - for the community to help - a package would be best.

Avatar

Correct answer by
Level 6

tested "granite/ui/components/coral/foundation/form/datepicker"  worked perfectly in AEM 6.3

               <date

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"

                        displayedFormat="MMMM DD, YYYY hh:mm a"

                        displayTimezoneMessage="{Boolean}true"

                        fieldDescription="Date Test."

                        fieldLabel="date"

                        name="./isReadOnlyonTime"

                        renderReadOnly="{Boolean}false"

                        type="datetime"/>

1339752_pastedImage_2.png

Avatar

Level 10

mj babu   - can you please post a small AEM package with a component in it that uses a dialog so the community member can test. 

Avatar

Administrator

smacdonald2008 I guess we should make helpx out of this.

mjb54261515​  Thanks a lot.



Kautuk Sahni

Avatar

Level 10

Yes, we can fold into Movie HTL 6.3 example

Avatar

Level 2

Thanks mjb54261515​, kautuksahni​ and smacdonald2008​ for your inputs. If you refer to my initial post, I am using the datepicker inside a multifield and that is when the datepicker does not populate the previous saved value. Could you please give your advice in this scenario?

Best Regards,

Ananta

Avatar

Level 10

It should work the same way. If not - its a bug - in which case - the recommend way to proceed is to log a ticket so this can be fixed.

Avatar

Level 2

smacdonald2008kautuksahnimjb54261515

After investigating further, I got it working as follows:

<multi class="full-width" jcr:primaryType="nt:unstructured"

    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

    fieldDescription="Click 'Add Field' for new event info" composite="{Boolean}true"

    fieldLabel="Manual Event Info">

        <field jcr:primaryType="nt:unstructured" name="./lsaManualEvents"

        sling:resourceType="granite/ui/components/coral/foundation/container">

            <items jcr:primaryType="nt:unstructured">

                <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">

                    <items jcr:primaryType="nt:unstructured">

                        <title fieldLabel="Event Title" jcr:primaryType="nt:unstructured" name="./event_title"                  sling:resourceType="granite/ui/components/foundation/form/textfield"/>

                        <subtitle fieldLabel="Event Subtitle" jcr:primaryType="nt:unstructured" name="./event_subtitle" sling:resourceType="granite/ui/components/foundation/form/textfield"/>

                        <building_name fieldLabel="Building" jcr:primaryType="nt:unstructured" name="./building_name" sling:resourceType="granite/ui/components/foundation/form/textfield"/>

                        <room fieldLabel="Room" jcr:primaryType="nt:unstructured" name="./room" sling:resourceType="granite/ui/components/foundation/form/textfield"/>

                        <date fieldLabel="Event Date"

                            jcr:primaryType="nt:unstructured" name="./datetime_start"

                            sling:resourceType="granite/ui/components/coral/foundation/form/datepicker" type="datetime" displayedFormat="YYYY-MM-DD HH:mm" required="{Boolean}true" valueFormat="YYYY-MM-DD[T]HH:mm:ss.000Z"/>

                        <link fieldLabel="Full URL" jcr:primaryType="nt:unstructured" name="./website"                     sling:resourceType="granite/ui/components/foundation/form/textfield"/>

                    </items>

                </column>

            </items>

        </field>

</multi>

Avatar

Community Advisor

Hi there, I also faced this similar issue.
Then I used 

sling:resourceType="granite/ui/components/foundation/form/datepicker"

instead of 

sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"

 And this is able to prepopulate the previous value.