Twitter Bootstrap Question posted in

After click on datepicker make input stay active-Twitter bootstrap

I’m trying to figure out a problem that arises when you click on the input where the bootstrap datepicker is displayed and after clicking on the day the input fills correctly but the label goes back to the bottom.

But after the second click on the input, the label stays up.

I don’t know how to make this mistake.

Thank you all in advance for your help and answer.

$('.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>
Tags:

2

Answers


  1. 0

    You have a timing-problem. On-Blur the input-value is not set yet. Better use the hide-event provided by bootstrap-datepicker like so:

    $('.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>
    Login or Signup to reply.
  2. 0

    I think it will be better if you handle add/remove Class by using datePicker Events

    Check this example

    $('#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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search