When the datepicker is clicked, ensure that the input remains active

I'm facing an issue where the label in a Bootstrap datepicker goes back to the bottom after clicking on the input and selecting a date. However, it stays up after the second click.

I am unsure how to fix this problem, so any help or suggestions would be greatly appreciated.

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

javascriptjqueryhtmlcss

Answer №1

Handling add/remove Class can be improved by utilizing datePicker Events

Take a look at 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);
}

// More CSS styles...


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

Answer №2

There seems to be a timing issue with your input values not being set on blur. Consider utilizing the hide event provided by bootstrap-datepicker for a more precise solution:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rendering a dynamic 3D model with animated sequences in Three.js through CreateFromMorphTargetSequence

When attempting to load a GBL file and play the animation, I encountered the following error message: TypeError: Cannot read property 'length' of undefined at Function.CreateFromMorphTargetSequence function Animate() { if(window.anim_flag) ...

javascriptthree.jsgltf

Tips for retrieving multiple independent response data in Express js app.get callback

What is the optimal way to send two independent MongoDB results in an Express application via HTTP Method? Check out this concise example to clarify: //app.js var express = require('express'); var app = express(); var testController = require(& ...

javascriptmongodbexpressrequestresponse

What strategies can I use to successfully navigate through this component?

I'm looking to display "favorite" items within my favorites component. However, I'm facing a challenge since I can't directly pass the postList component to the favorites component. Essentially, I aim to showcase these favorite items on ano ...

javascriptreactjsreact-reduxreact-hookscomponents

Having difficulty with CSS animation and background issues

I can't seem to get my rotating background to work using CSS keyframe animation. I've tried different things but can't figure out what's going wrong. Below is my code: .main-header { width: 100%; Height: 128px; } .main-header, ...

cssanimation

Zone.js doesn't expire per request when utilized in Node.js, and its value remains present in the stack

I am completely new to express.js and node.js. Currently, we are utilizing the zone.js library in our application to manage ttl values within the stack. From what I understand, a zone is only active for a single request until the response is sent to the en ...

javascriptnode.jsexpressstackzone

Is there a way to implement a collapse/expand feature for specific tags in React-Select similar to the "limitTags" prop in Material UI Autocomplete?

Utilizing the Select function within react-select allows me to select multiple values effortlessly. isMulti options={colourOptions} /> I am searching for a way to implement a collapse/expand feature for selected tags, similar to the props fun ...

javascriptreactjsmaterial-uireact-select

Currently, I'm attempting to figure out a way to create a CSS string in my MVC ASP.NET project. Any ideas or suggestions are greatly appreciated

I am currently exploring solutions to generate a CSS string in my ASP.NET MVC Web Application. Specifically, I am interested in creating this at the selector level. For instance, I might have a class named "TableFormat" with the following CSS properties: ...

javascriptjqueryasp.net-mvcasp.net-mvc-3

What could be causing this JS/jQuery to affect numerous inputs at once?

Everything is working smoothly with the code in the 'phone' input field. It formats the phone number correctly as the user types. However, there seems to be an issue with the event listener being added to another input named 'twofactor' ...

javascriptjquerylaravelvue.js

Unable to adjust the text color to white

As someone who is new to Typescript, I'm facing a challenge in changing the text color to white and struggling to find a solution. I'm hoping that someone can guide me in the right direction as I've tried multiple approaches without success ...

csstypescriptmaterial-ui

Navigating through my PHP output with Jquery

I've been trying to figure this out on my own by looking through different posts, but I'm still stuck. I'm really in need of some help with finding a solution. If anyone has some time to spare, could you please explain how to navigate throug ...

jqueryarraysjsonobjectget

Having trouble triggering a click event with JQuery

I have a hidden link for downloading Audio Files that I want the user to access using a button. However, I am having trouble triggering the click event. Below is the HTML code: <a class="APopupDown" data-icon="home" id="DownloadFile" href="http://yaho ...

javascriptjqueryhtmlclicksimulate

In Wordpress, I am using Php to display posts. How can I create a new list item after every 3 posts, with each subsequent post displayed inside the new list item?

I am new to using PHP and feeling a bit confused with the code below, which is a team slider. In the <ul> tag, there is one <li> containing 3 nested <div>s (each representing a person). Can someone review my code and help me improve it? I ...

phphtmlcsswordpress

Choose specific elements based on their attribute within a class, and then either apply or remove a class

I have a project where I need to store the data information of each element in my navigation menu when a button is clicked. This project is a one-page website with two levels of navigation: Main menu Button at the bottom of each "page" Currently, I hav ...

javascriptjqueryarraysmenugetelementsbyclassname

How can you access and utilize the inline use of window.location.pathname within a ternary operator in

I need assistance with writing a conditional statement within Angularjs. Specifically, I want to update the page to have aria-current="page" when a tab is clicked. My approach involves checking if the tab's anchor href matches the current window' ...

javascriptangularjs

Maintaining the consistent structure of build directories within a Docker container is crucial, especially when compiling TypeScript code that excludes the test

Our application is built using TypeScript and the source code resides in the /src directory. We have tests located in the /tests directory. When we compile the code locally using TSC, the compiled files are deposited into /dist/src and /dist/test respectiv ...

javascriptdockertypescript

Unable to retrieve button value through ajax call

I have my code below and I am trying to retrieve the value of my submit button in the AJAX section without success. Can someone guide me on how to accomplish this task? <script src="http://localhost/ci/js/jquery.js"></script> <script type=" ...

phpjqueryajaxcodeigniter

Enhance the input field with letter control

Here is a snippet of my HTML code for inputs: <form class="form" id="firstForm" novalidate="novalidate"> <div class="tab-content"> <div class="tab-pane active" id="vtab1"> <div class="form-group" ...

jqueryhtml

Invoking Java methods from JavaScript

Looking for a way to dynamically update a webpage without requiring an external request. I have a JavaScript method that updates the page, and a Java UDP server receiving parameters from clients. Is it possible to call this JavaScript method from Java sour ...

javajavascriptmethods

Is there a way to continually monitor for collisions between webpage elements?

After successfully implementing the algorithm, I am currently struggling with finding a way to continuously check if the element has collided with other elements. For example: When the div with id 'water' collides with the div with id 'ora ...

javascriptjquery

How to efficiently structure CSS columns using Div elements within a Bootstrap card

<!-- New Blog Post --> <div class="card mb-4"> <img class="card-img-top" src="https://ichef.bbci.co.uk/news/660/cpsprodpb/948D/production/_109592083_mediaitem109591445.jpg" alt="Card image cap"> ...

htmlcssbootstrap-4