При выборе даты на календаре не добавляется класс на инпут

Question

При выборе даты на календаре не добавляется класс "not-empty" на инпут, работает только при вводе с клавиатуры, как решить эту проблему?

$("#point-3").keyup(function() {
  if ($(this).val()) {
    $(this).addClass("not-empty");
  } else {
    $(this).removeClass("not-empty");
  }
});

var inputmask_options;

inputmask_options = {
  mask: "99-99-9999",
  alias: "date",
  showMaskOnHover: false,
  showMaskOnFocus: true,
};

$("#point-3").inputmask(inputmask_options);
$("#point-3").datepicker();

.form-order__point-3 {
  margin-top: 50px;
}

.form-order__point-3 label {
  position: absolute;
  top: 0;
  left: 10px;
  transition: all 0.3s linear;
  font-size: 16px;
  line-height: 25px;
  cursor: text;
}

.form-order__point-3 input {
  margin-bottom: 30px;
  max-width: 320px;
  width: 100%;
  padding: 0 0 5px 0;
  outline: none;
  border-bottom: 2px solid black;
  background-color: transparent;
}

.form-order__point-3 input:required~label::after {
  position: absolute;
  content: "*";
  top: 0;
  right: -8px;
}

.form-order__point-3 input:focus~label,
.form-order__point-3 input.not-empty~label {
  font-size: 14px;
  transform: translateY(-40px);
  transition: all 0.3s linear;
}

.form-order__point-3 {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet" />

<div class="form-order__point-3">
  <input type="text" id="point-3">
  <label for="point-3">Дата</label>
</div>

Answer 1

Попробовал добавить больше событий: при изменении инпута с клавиатуры, при убирании фокуса с неё. И подрезал инпут от лишних пробелов.

$('#point-3').on('keyup change blur', function() {
  if ($(this).val().trim() !== '') {
    $(this).addClass("not-empty");
  } else {
    $(this).removeClass("not-empty");
  }
});


var inputmask_options;

inputmask_options = {
  mask: "99-99-9999",
  alias: "date",
  showMaskOnHover: false,
  showMaskOnFocus: true,
};

$("#point-3").inputmask(inputmask_options);
$("#point-3").datepicker();

.form-order__point-3 {
  margin-top: 50px;
}

.form-order__point-3 label {
  position: absolute;
  top: 0;
  left: 10px;
  transition: all 0.3s linear;
  font-size: 16px;
  line-height: 25px;
  cursor: text;
}

.form-order__point-3 input {
  margin-bottom: 30px;
  max-width: 320px;
  width: 100%;
  padding: 0 0 5px 0;
  outline: none;
  border-bottom: 2px solid black;
  background-color: transparent;
}

.form-order__point-3 input:required~label::after {
  position: absolute;
  content: "*";
  top: 0;
  right: -8px;
}

.form-order__point-3 input:focus~label,
.form-order__point-3 input.not-empty~label {
  font-size: 14px;
  transform: translateY(-40px);
  transition: all 0.3s linear;
}

.form-order__point-3 {
  position: relative;
}

.form-order__point-3 input.not-empty {
 background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet" />

<div class="form-order__point-3">
  <input type="text" id="point-3">
  <label for="point-3">Дата</label>
</div>

Возможно вам ещё нужно обрабатывать событие вставки даты, которое генерирует плагин? если да, то у плагина есть метод onSelect, где можно обработать событие

$('#point-3').on('keyup change blur', function() {
  if ($(this).val().trim() !== '') {
    $(this).addClass("not-empty");
  } else {
    $(this).removeClass("not-empty");
  }
});


var inputmask_options;

inputmask_options = {
  mask: "99-99-9999",
  alias: "date",
  showMaskOnHover: false,
  showMaskOnFocus: true,
};

$("#point-3").inputmask(inputmask_options);
$("#point-3").datepicker({
    onSelect: function(e, selectedDate, $el) {
        console.log(selectedDate);
    },
});

.form-order__point-3 {
  margin-top: 50px;
}

.form-order__point-3 label {
  position: absolute;
  top: 0;
  left: 10px;
  transition: all 0.3s linear;
  font-size: 16px;
  line-height: 25px;
  cursor: text;
}

.form-order__point-3 input {
  margin-bottom: 30px;
  max-width: 320px;
  width: 100%;
  padding: 0 0 5px 0;
  outline: none;
  border-bottom: 2px solid black;
  background-color: transparent;
}

.form-order__point-3 input:required~label::after {
  position: absolute;
  content: "*";
  top: 0;
  right: -8px;
}

.form-order__point-3 input:focus~label,
.form-order__point-3 input.not-empty~label {
  font-size: 14px;
  transform: translateY(-40px);
  transition: all 0.3s linear;
}

.form-order__point-3 {
  position: relative;
}

.form-order__point-3 input.not-empty {
 background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet" />

<div class="form-order__point-3">
  <input type="text" id="point-3">
  <label for="point-3">Дата</label>
</div>

Answer 2

обработайте событие выбора даты. там и добавьте этот класс. само ничего не произойдет.

$("#point-3").datepicker({
  onSelect: function(fd, d, picker){
     picker.$el.addClass('not-empty');
     //$('#point-3').addClass('not-empty');
  }
});

можете ссылку на $("#point-3') в обработчике получить каким-нибудь образом из параметра picker обработчика. Или изучить, какой там контекст вызова у этой функции.

апд: picker.$el - элемент.

БЛОГ НА HUSL

При выборе даты на календаре не добавляется класс на инпут

Ответы (2 шт):