JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<form id="form">
  <div class="form-row">
    <div class="form-group col-6">
      <label for="dob" class="small">Date of Birth</label>
      <input class="form-control form-control-sm" type="date" name="dob" value="" />
    </div>
    <div class="form-group col-6">
      <label for="reg" class="small">Registration Date (today)</label>
      <input class="form-control form-control-sm" type="date" name="reg" value="" />
    </div>
  </div>
  <div class="form-group">
    <label for="category" class="small">Category</label>
    <select class="form-control form-control-sm" name="category">
      <option value="" selected>...</option>
      <option value="1">CAT_1 (under 18)</option>
      <option value="2">CAT_2 (18+)</option>
    </select>
  </div>
</form>

CSS

#form {
  padding: 1rem;
}

JavaScript

// document ready
$(function() {

  // our form object constant var
  const $form = $('#form');

  // $registration_date example value for reg input
  let today = moment().format('yyyy-MM-DD');
  $form.find('[name="reg"]').attr('value', today);

  // get age function
  const get_age = (dob, reg) => {

    // convert parameter var values to moment js values
    dob = moment(dob, 'yyyy-mm-dd');
    reg = moment(reg, 'yyyy-mm-dd');
    
    // set age var in years via reg dif to dob
    let age = reg.diff(dob, 'years');
    
    // clear console log
    console.clear();
    
    // console log age
    console.log('Age: ' + age);

    // return age
    return age;

  };

  // form field name dob on input and change event
  $form.on('input change', '[name="dob"]', function(event) {

    // this event delegate target form obj
    let form = event.delegateTarget;

    // get dob and reg current values on change
    let dob = $(this).val();
    let reg = $('[name="reg"]', form).val();

    // get the age from reg date diff
    let age = get_age(dob, reg);

    // if age is under 18
    if (age < 18) {

      // current form change to CAT 1
      $('[name="category"]', form).val(1).change();

    // else 18 or over  
    } else if (age >= 18) {

      // current form change to CAT 2
      $('[name="category"]', form).val(2).change();

    }

  });

});