Функции обратного вызова JQuery datepicker и событие размытия - PullRequest
Новая
       10

Функции обратного вызова JQuery datepicker и событие размытия

0 голосов
/ 15 ноября 2018

У меня есть тривиальный калькулятор возраста, который вычисляет возраст пользователя при регистрации. Если возраст был 18 или более, текст в поле результатов будет зеленым, если возраст был меньше 18, текст красным.

Все работает, за исключением того, что я хочу, чтобы поле результата анимировалось в поле зрения после завершения расчета. Элемент результата должен быть вне поля зрения, пока не будут выбраны обе даты.

У меня нет кнопки sumbit, потому что я не уверен, как заставить это работать с экземплярами datepicker. Кроме того, я не знаю, когда на экземплярах DatePicker запускаются события размытия, все работает "под капотом".

Соответствующий HTML (вы увидите, что есть подход jQuery и приближается дата ввода типа HTML, вы можете проигнорировать это) 

<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>

Соответствующий 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);
 }

Это прямолинейно, я хочу, чтобы поле ввода id = "рассчитанное" не отображалось изначально и при каждой инициализации нового вычисления (здесь я не знаю, выбрать ли метод объекта datepicker или мою собственную функцию для событие размытия или фокусировки).

И после того, как разница в дате будет вычислена или поле ввода id = "selected" не пустое, я хочу анимировать этот элемент в поле зрения, добавив класс .inView.

Вот 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");
  }

  }
  });

Все это работает с первой попытки или при обновлении страницы.

Но я хочу, чтобы элемент был вне поля зрения, добавляя класс .outOfView всякий раз, когда новая дата выбирается в любом из полей ввода datepicker.

Или я хочу, чтобы значение id = "рассчитанное" равнялось == "", как только будет выбрана новая дата на любом из средств выбора даты.

Как мне этого добиться, надеюсь, мои намерения и проблема ясны.

Ссылка на codepen:

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

...