Set Date Field Values In Repeat Group Based On Custom Logic

In this guide, we will explain how to set the date field values in a Repeat Group.

Drag and drop a JavaScript, a Repeat Group element and 3 Date elements inside the Repeat group. Rename the Date elements as shown below.

Click the pencil icon in the JavaScript element and Paste the code.

Please use the below code:

// Add days to a date function
function addDays( date, days ) {
  var res = new Date( date );
  res.setDate( res.getDate() + days );
  return res;
}
// Main function to set the date field values
function set_final_date( options ) {
  // Get initial date that was set by the user
  var initial_date = new Date( options.date_field_1.get( 'value' ) );
  // Set additional dates
  var date_2 = addDays( initial_date, 90 );
  var date_3 = addDays( initial_date, 180 );
  // Check initial date
  if ( initial_date ) {
    // Set new date value
    options.date_field_2.set( {
      value: date_2
    } );
    // Set new date value
    options.date_field_3.set( {
      value: date_3
    } );
  }
}
// Set date field ids
var date_field_1_id = '8d62-fc9c-c783';
var date_field_2_id = 'd916-4ca4-2c3d';
var date_field_3_id = '6348-ae4d-f83d';
window.formyoula.form_fields[ date_field_1_id ].on( 'all', function() {
  // Update date fields
  set_final_date( {
    date_field_1: this,
    date_field_2: window.formyoula.form_fields[ date_field_2_id ],
    date_field_3: window.formyoula.form_fields[ date_field_3_id ]
  } );
} );
// Set repeat id to listen to
var repeat_id = '8208-e91d-d378';
// Listening to all field changes in an existing repeat group item list
formyoula.form_fields[ repeat_id ].on( 'all', function( event, data ) {
  // Check if field updates are available
  if ( !data || _.isEmpty( data.updated_sub_component ) ) return;
  // Get actual field that was changed
  var component = data.updated_sub_component;
  // Check if repeat field component changes should be tracked
  if ( component.get( 'component_id' ) == date_field_1_id ) {
    // Update date fields
    set_final_date( {
      date_field_1: component,
      date_field_2: data.updated_repeat_item.findWhere( {
        component_id: date_field_2_id
      } ),
      date_field_3: data.updated_repeat_item.findWhere( {
        component_id: date_field_3_id
      } )
    } );
  } else if ( component.get( 'component_id' ) == date_field_2_id ) {
    set_final_date( {
      date_field_1: data.updated_repeat_item.findWhere( {
        component_id: date_field_1_id
      } ),
      date_field_2: component,
      date_field_3: data.updated_repeat_item.findWhere( {
        component_id: date_field_3_id
      } )
    } );
  } else if ( component.get( 'component_id' ) == date_field_3_id ) {
    set_final_date( {
      date_field_1: data.updated_repeat_item.findWhere( {
        component_id: date_field_1_id
      } ),
      date_field_2: data.updated_repeat_item.findWhere( {
        component_id: date_field_3_id
      } ),
      date_field_3: component
    } );
  }
  // Trigger repeat save
  formyoula.form_fields[ repeat_id ].trigger( 'repeat:save' );
} );

Update the Field Ids in the code according to your form elements.

Save the Changes and try the form.

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂