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.

  1. Drag and drop a JavaScript, a Repeat Group element and 3 Date elements inside the Repeat group. Rename the Date elements as shown below.
image
  1. Click the pencil icon in the JavaScript element and Paste the code.
image

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' );
} );
  1. Update the Field Ids in the code according to your form elements.
image
  1. Save the Changes and try the form.
image

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