Odtnhj

I have a trivial age calculator which calculates the age of a user upon sign up. If the age was 18 or more, the text in the result field is green, if the age was less than 18, the text is red.

Everything works, except I want the result field to be animated into view once the calculation is done. The result element should be out of view until both dates are picked.

I do not have a sumbit button, because I am not sure how to make that work with the datepicker instances. Also, I do not know when the blur events are fired on the datepicker instances, everything runs "under the hood".

The relevant HTML (you will see there is the jQuery approach and the HTML input type date approch, you can ignore that)

<div class="jq">
<h1>With jQuery</h1>
<span> enter DOB</span>
<input type="text" id="date1"> // get sign date of birth

<span> enter sign up date</span>
<input type="text" id="date2"> // get sign up date
<span> Result</span>
<input type="text" id="calculated" class="outOfView"> // display result (date2.value - date1.value)
 </div>

The relevant CSS:

.red 
color: red; 
transform: scale(5) rotate(360deg);

.green 
color: green;



.outOfView 
 transform: translateY(50px); // this is just a test value
 

 .inView 
 transform: translateY(0);
 

This is straight forward, I want the id="calculated" input field to be out of view initially and whenever initializing a new calculation( here I do not know whether to choose a method of the datepicker object or my own function on a blur or focusout event).

And once the date difference is calculated, or, the id="calculated" input field is not empty, I want to animate that element into view, by adding the class .inView.

Here is the JS:

$(function() 
$("#date1").datepicker( // initializing first datepicker
showAnim: "clip",
changeMonth: true,

changeYear: true,

yearRange: "1930:2010"
);

$("#date1").datepicker(
onSelect: calcDiff, // onselect is a datepicker method, calcDiff is my own function

minDate: null,
maxDate: null
);

$("#date2").datepicker( // initializing/configuring the second datepicker input field
changeMonth: true,

changeYear: true,

yearRange: "1930:2018",
showAnim: "slide",
onSelect: calcDiff,
onClose: move, // onclose is a method of the datepicker object, move is my function where I want to toggle the inView / outOfView classes

minDate: null,
maxDate: null
);

function calcDiff() // this is just the math, this works
var d1 = $("#date1").datepicker("getDate");

var d2 = $("#date2").datepicker("getDate");

var diff = 0;

if (d1 && d2) 
 diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day


var years = Math.floor(diff / 365);

var days = Math.floor(diff % 365);

var months = Math.floor(days % 12);
 // here things get a bit complicated, but this still works
 if (years < 18) 
 $("#calculated").removeClass("green");

 $("#calculated").addClass("red");
 else 
 $("#calculated").removeClass("red");

 $("#calculated").addClass("green");
 

 $("#calculated").val("age was " + years + "y, " + " and " + days + "d");
 
 // here is the problem, this does not work
 function move() 
 if ($("#calculated").val !=="") // this if clause is likely the wrong approach
 $("#calculated").removeClass("outOfView");
 $("#calculated").addClass("inView");
 
 else 
 $("#calculated").removeClass("inView");
 $("#calculated").addClass("outOfView");
 

 
 );

All this works on first try or if I refresh the page.

But I want the element out of view, by adding the class .outOfView whenever a new date is picked on either of the datepicker input fields.

Or, I want the value of the id="calculated" to be =="" as soon a new date is picked on either datepickers.

How can I achieve this, I hope my intent and the problem are clear.

Link to codepen:

https://codepen.io/damPop/pen/oayEdg?editors=1010