После нажатия на указатель даты сделайте ввод активным - PullRequest
Новая
       1

После нажатия на указатель даты сделайте ввод активным

1 голос
/ 10 марта 2020

Я пытаюсь выяснить проблему, которая возникает, когда вы щелкаете по входу, где отображается указатель даты bootstrap, и после нажатия на день, когда ввод заполнен правильно, но метка возвращается к основанию.

Но после второго щелчка по входу метка остается.

Я не знаю, как сделать эту ошибку.

Заранее всем спасибо за помощь и ответ . 

$('.form-group').each((i, e) => {
  $('.form-control', e)
    .focus(function() {
      e.classList.add('not-empty');
    })
    .blur(function() {
      this.value === '' ? e.classList.remove('not-empty') : null;
    });
});
$('#sandbox-container input').datepicker({
  format: "dd.mm.yyyy",
  calendarWeeks: true,
  autoclose: true,
  todayHighlight: true
});
/* === Form Control === */

.form-group {
  position: relative;
  margin-bottom: 10px;
}

.form-group input {
  border-radius: 0;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.form-group input:focus {
  box-shadow: none;
}

.form-group>.lForm-label {
  font-size: 10px;
  color: #9C9AB3;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  pointer-events: none;
  position: relative;
  z-index: 5;
}

.form-group input {
  width: 100%;
}

.form-group>.lForm-label {
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1.4) translateY(20px);
  transform: scale(1.4) translateY(20px);
}

.form-group.not-empty>.lForm-label {
  -webkit-transform: none;
  transform: none;
}

.form-group input {
  border: 0;
  border-bottom: 1px solid #9C9AB3;
}

.form-group input::placeholder:hover {
  display: none !important;
}

.form-group input,
.form-group input:focus,
.form-group input:focus:hover {
  color: #9C9AB3;
  background: none;
  outline: none;
}

.form-group input:focus,
.form-group input:focus:hover {
  border-bottom: 1px solid #fdd365;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.en-CA.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.js"></script>

<div class="form-group col-md-6">
  <label for="birthDateId" class="form-control-label lForm-label">Date of birth</label>
  <div id="sandbox-container">
    <input type="text" name="dateofbirth" id="birthDateId" class="form-control" value="">
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 10 марта 2020

Я думаю, будет лучше, если вы обработаете добавление / удаление класса с помощью datePicker Events

Проверьте этот пример 

$('#sandbox-container input').datepicker({
  format: "dd.mm.yyyy",
  calendarWeeks: true,
  autoclose: true,
  todayHighlight: true
}).on('show', function(e) {
  $(this).parents(".form-group").addClass('not-empty')
}).on('hide', function(e) {
  if(!$(this).val())
    $(this).parents(".form-group").removeClass('not-empty')
});
/* === Form Control === */

.form-group {
  position: relative;
  margin-bottom: 10px;
}

.form-group input {
  border-radius: 0;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.form-group input:focus {
  box-shadow: none;
}

.form-group>.lForm-label {
  font-size: 10px;
  color: #9C9AB3;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  pointer-events: none;
  position: relative;
  z-index: 5;
}

.form-group input {
  width: 100%;
}

.form-group>.lForm-label {
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1.4) translateY(20px);
  transform: scale(1.4) translateY(20px);
}

.form-group.not-empty>.lForm-label {
  -webkit-transform: none;
  transform: none;
}

.form-group input {
  border: 0;
  border-bottom: 1px solid #9C9AB3;
}

.form-group input::placeholder:hover {
  display: none !important;
}

.form-group input,
.form-group input:focus,
.form-group input:focus:hover {
  color: #9C9AB3;
  background: none;
  outline: none;
}

.form-group input:focus,
.form-group input:focus:hover {
  border-bottom: 1px solid #fdd365;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.en-CA.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.js"></script>

<div class="form-group col-md-6">
  <label for="birthDateId" class="form-control-label lForm-label">Date of birth</label>
  <div id="sandbox-container">
    <input type="text" name="dateofbirth" id="birthDateId" class="form-control" value="">
  </div>
</div>
0 голосов
/ 10 марта 2020

У вас есть проблемы со временем. On-Blur входное значение еще не установлено. Лучше использовать скрытое событие, предоставляемое bootstrap -datepicker , например: 

$('.form-group').each((i, e) => {
  $('.form-control', e)
    .focus(function() {
      e.classList.add('not-empty');
    })
    .blur(function() {

      //this.value === '' ? e.classList.remove('not-empty') : null;

    });
});
$('#sandbox-container input').datepicker({
  format: "dd.mm.yyyy",
  calendarWeeks: true,
  autoclose: true,
  todayHighlight: true
}).on('hide', function (ev) {
  if(ev.target.value === '') 
    $(ev.target).parents('.form-group').removeClass('not-empty') 
})
/* === Form Control === */

.form-group {
  position: relative;
  margin-bottom: 10px;
}

.form-group input {
  border-radius: 0;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.form-group input:focus {
  box-shadow: none;
}

.form-group>.lForm-label {
  font-size: 10px;
  color: #9C9AB3;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  pointer-events: none;
  position: relative;
  z-index: 5;
}

.form-group input {
  width: 100%;
}

.form-group>.lForm-label {
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1.4) translateY(20px);
  transform: scale(1.4) translateY(20px);
}

.form-group.not-empty>.lForm-label {
  -webkit-transform: none;
  transform: none;
}

.form-group input {
  border: 0;
  border-bottom: 1px solid #9C9AB3;
}

.form-group input::placeholder:hover {
  display: none !important;
}

.form-group input,
.form-group input:focus,
.form-group input:focus:hover {
  color: #9C9AB3;
  background: none;
  outline: none;
}

.form-group input:focus,
.form-group input:focus:hover {
  border-bottom: 1px solid #fdd365;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.en-CA.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.js"></script>

<div class="form-group col-md-6">
  <label for="birthDateId" class="form-control-label lForm-label">Date of birth</label>
  <div id="sandbox-container">
    <input type="text" name="dateofbirth" id="birthDateId" class="form-control" value="">
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...