How to Use ACS Commons Multifield With Datepicker

This article details on how to create a component that contains multiple fields, Date being one of them

ACS Commons allows 2 ways to store the data into the repository.

1. JSON Store
2. NODE Store

Using JSON_STORE
Details:
1. cq_dialog.xml

<scheduleEvents jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/multifield” class="full-width">  
    <field jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/fieldset” acs-commons-nested=“JSON_STORE" name="./scheduleEvents”>  
    <layout jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns” method="absolute”/>  
    <items jcr:primaryType="nt:unstructured”>  
      <column jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/container”>  
         <items jcr:primaryType="nt:unstructured”>  
            <eventDate jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/datepicker” type=“date" displayedFormat="YYYY-MM-DD” fieldLabel="Event Date” fieldDescription="Scheduled date of the event.” name="./eventDate”/>  
         </items>

Note acs-commons-nested=“JSON_STORE”

2. Backend code snippet

@ValueMapValue(name="scheduleEvents")  
protected String[] scheduleEventsArray = null;  
...  
if (scheduleEventsArray != null && scheduleEventsArray.length > 0) {  
  for( String section : scheduleEventsArray ) {  
    Map<String, String> props = (Map<String, String>) new Gson().fromJson(section, Map.class);  
      eventDate = props.get("eventDate”);

Using NODE_STORE
Details:
1. cq_dialog.xml

<scheduleEvents jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/multifield” class="full-width">  
    <field jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/fieldset” acs-commons-nested=“NODE_STORE" name="./scheduleEvents”>  
    <layout jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns” method="absolute”/>  
    <items jcr:primaryType="nt:unstructured”>  
      <column jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/container”>  
         <items jcr:primaryType="nt:unstructured”>  
            <eventDate jcr:primaryType=“nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/datepicker” type=“date" displayedFormat="YYYY-MM-DD” fieldLabel="Event Date” fieldDescription="Scheduled date of the event.” name="./eventDate”/>  
         </items>
b. Note acs-commons-nested=“NODE_STORE”

2. Backend code snippet
Resource eventsResource = resource.getChild( "scheduleEvents" );  
Iterator<Resource> allEventsResources = eventsResource.listChildren();  
  while ( allEventsResources.hasNext() ){  
     Resource eventResource = allEventsResources.next();  
      valuemap = eventResource.getValueMap();  
       eventDate = valuemap.get("eventDate", Calendar.class);

Source: https://techinpieces.com/how-to-use-acs-commons-multifield-with-datepicker-skip-to-end-of-metadata/