Effect in jQuery does not work with datepicker

Question

Effect in jQuery does not work with datepicker

Navigation

#1 by (2 votes)

3

I put an input with an effect, which occurs when entering a value in the input, the problem and that the same effect does not work using the data picker in the input. That is when you put a date the effect does not occur, getting text over the date.

Does anyone know how to solve this?

$('.data').datepicker({
  'autoclose': true
});
$('.form_campos').on('focus blur', function(e) {
  $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');

.form-group {
  margin-top: 20px;
  position: relative;
  display: flex;
  height: 45px;
  float: left;
}
.control-label {
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  transform: translate3d(5px, 22px, 0) scale(1);
  transform-origin: left top;
  transition: 240ms;
  z-index: 2;
}
.form-group.focused .control-label,
.form-group-select.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}
.form_campos {
  height: 31px;
  width: 100%;
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  padding: 5px;
  outline: none;
  border: 0 solid #484848;
  border-bottom-width: 1px;
  background: transparent;
}
.form_campos:hover,
.form_campos:focus {
  border-color: #0091FF;
}
.form_disabled,
.form_disabled:hover,
.form_disabled:focus {
  border-color: #D7D7D7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<div class='form-group'>
  <label class='control-label' for='inputNormal'>DATA</label>
  <input type='text' class='efeito_input efeito_input form_campos data' id='inputNormal' name='validade'>
</div>

javascript jquery datapicker

asked by anonymous 10.08.2016 / 22:11

1 answer

How to adjust the gun so it always shoots where the sight is Show modal data by angular ui

score 2 · Accepted Answer

This happens because you lose focus in the input, one of the solutions can be to focus :

$('.data').datepicker({
  'autoclose': true,
}).on('hide', function(e) {
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
});

Here it works, but it makes a slight impression there. See if it fits.

$('.data').datepicker({
  'autoclose': true,
}).on('hide', function(e) {
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
});

$('.form_campos').on('focus blur', function(e) {
  $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');

.form-group {
  margin-top: 20px;
  position: relative;
  display: flex;
  height: 45px;
  float: left;
}
.control-label {
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  transform: translate3d(5px, 22px, 0) scale(1);
  transform-origin: left top;
  transition: 240ms;
  z-index: 2;
}
.form-group.focused .control-label,
.form-group-select.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}
.form_campos {
  height: 31px;
  width: 100%;
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  padding: 5px;
  outline: none;
  border: 0 solid #484848;
  border-bottom-width: 1px;
  background: transparent;
}
.form_campos:hover,
.form_campos:focus {
  border-color: #0091FF;
}
.form_disabled,
.form_disabled:hover,
.form_disabled:focus {
  border-color: #D7D7D7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<div class='form-group'>
  <label class='control-label' for='inputNormal'>DATA</label>
  <input type='text' class='efeito_input efeito_input form_campos data' id='inputNormal' name='validade'>
</div>