Rails Auto-populate form field based off of date input

Question

I have a Rails 3.2.18 app where in my form I have a field for age (int) and date of birth (datetime). I will be using a simple jQuery date picker to select the DOB.

Here's what I want to happen.

The first field is the DOB (Date of birth). I want to select that, and as soon as it's selected I'd like to calculate the age and automatically fill the age field based off of that selection.

I think I can do it somehow by creating a method on the model that calculates the age, but I'm not sure how to populate it in the age field. Perhaps some Javascript or something?

Any help would be greatly appreciated.

Below is a method I wrote for another app that calculates age based on DOB and can be used in a view:

def age(dob)
    now = Time.zone.now.to_date
    now.year - patient_dob.year - ((now.month > patient_dob.month || (now.month == patient_dob.month && now.day >= patient_dob.day)) ? 0 : 1)
  end

Answer 1

What you are suggesting is not possible to do in Ruby. You can use JavaScript.

It's not possible to calculate the age, based on user input, without first traveling to the server, calculating the age, and then rendering the result to the client. The model has no knowledge of the date that the user puts in; this is, unless you submit the form, of course.

It's possible to submit the form via Ajax. For example, some sites let you fill in a zip code, and then they prefil the address for you. What is really happening is, behind the scenes, the browser is sending an ajax request to a server that returns an address.

In your case you shouldn't have to do that since calculating the age in JavaScript is very easy. It's also quicker to do it on the client since it saves you the round trip to the server.

Take a look at this answer which shows you how to calculate a persons age based on an input date.

If you are using Rails you will likely be using jQuery. In which case you can do something like this:

$('#date_input').on('change', function () {
  date = $(this).val();
  age = getAge(date);
  $('#age_input').val(age);
});

# This is taken directly from this answer: https://stackoverflow.com/a/7091965/276959
function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;
}

Then, on the server you may want to recalculate the age before you save the data into the database. This is because nothing stops the user from submitting a false age directly. Either by filling it in, or by altering the DOM.

class Person
  before_save :set_age

private

  def set_age
    self.age = # Calculate age here.
  end
end

See this answer on how to calculate age using Ruby, which looks identical to the code you have in your question.

Answer 2

This is a more client side javascript way to achieve this with date accuracy using server.

In your rails view when parent page loads

<%= javascript_tag do%>
    var currDate = new Date('<%= Date.today%>');
<%end%>

In your js file (i assumed date-picker to be the input selected using date picker.)

function calcAge(dateString) {
    var birthDate = new Date(#('date_picker').val());
    var age = currDate.getFullYear() - birthDate.getFullYear();
    var m = currDate.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && currDate.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;
}

Then just need to call calcAge on date selected event and the

return age; 

can change to set value on an input field

$('#ageField').val(age);