Date Field Validation And Conditional Logic

Use case: Show a field only if a date entered in two date time fields are past dates or the current date. Screenshots: If the date is in the future:

image

If date is today or past

image

Javascript:

// Component-631e-5d47-14c5 component id of field that will be show hide based on date condition
// Hide the field initially
$('#component-631e-5d47-14c5').hide();
// Main function for validation and field control
function date_validator_and_field_control() {
  // Get value of date time field 1
  var date_entered1 = moment(formyoula.form_fields['054b-03d1-d44d'].get('value')).format('YYYY-MM-DD');
  // Get value of date time field 2
  var date_entered2 = moment(formyoula.form_fields['bf61-504a-d788'].get('value')).format('YYYY-MM-DD');
  // Get current date time
  var today = moment().format('YYYY-MM-DD');
  // Check if date entered in first field is before today or today
  var condition1 = moment(date_entered1).isBefore(today) || moment(date_entered1).isSame(today);
  // Check if date entered in second field is before today or today
  var condition2 = moment(date_entered2).isBefore(today) || moment(date_entered2).isSame(today);
  // Check if both date are entered
  if (date_entered1 && date_entered2) {
    // If both dates are either today or before today
    if (condition1 && condition2) {
      // Show the field
      $('#component-631e-5d47-14c5').show();
    } else {
      // Else hide the field
      $('#component-631e-5d47-14c5').hide();
      console.log(today, date_entered2, date_entered1);
    }
  }
}
// 054b-03d1-d44d date field 1
formyoula.form_fields['054b-03d1-d44d'].on('input:set:success', date_validator_and_field_control);
// bf61-504a-d788 date field 2
formyoula.form_fields['bf61-504a-d788'].on('input:set:success', date_validator_and_field_control);

JSON attached

Date time conditional logic (1).json6.0KB