Problem with datepicker template and my custom javascript and css

问题

I am trying to include a nice looking date input field on my webpage. I have already done the styling of my input field. It has a floating label which is handled by 'onfocus' and 'onblur' events using jquery methods. And that all is working fine. I have shown the images.

But problem arises when I use a datepicker template from this site https://gijgo.com/datepicker/ . There is also no problem with the date picker working. It is able to select date on my input field. But problem arises with my floating label. The label won't goes upside on clicking input box and also when I select a date it overlaps with the label just like this shown in image.

// Datepicker from website https://gijgo.com/datepicker/.
$('.datepicker').datepicker({
  showRightIcon: false
});


// Floating label onfocus and onblur handling.
function floatOnFocus(evt) {
  $(evt).parent().find('.place').css("font-size", "88%");
  $(evt).parent().find('.place').css("top", "-11px");
  $(evt).parent().find('.place').css("color", "#1b75cf");
  $(evt).parent().find('.place').css("background-color", "white");

}

function makeInpFocus(evt) {
  $(evt).parent().find('#inpbox').focus();
}

function floatOnBlur(evt) {
  if ($(evt).val() == "") {
    $(evt).parent().find('.place').css("font-size", "100%");
    $(evt).parent().find('.place').css("top", "7px");
    $(evt).parent().find('.place').css("color", "grey");
    $(evt).parent().find('.place').css("background-color", "transparent");
  }
}
// Floating label onfocus and onblur handling end.

.maindiv {
  position: relative;
}

.place {
  position: absolute;
  left: 9px;
  top: 7px;
  height: 56%;
  font-size: 100%;
  color: grey;
  transition-duration: 0.2s;
  white-space: nowrap;
}

<!-- Input field without datepicker template, Custom CSS and jquery functions are working.-->
<div class="maindiv">
  <span class="place" onclick="makeInpFocus(this)">Test Date</span>
  <input type="text" name="testDate" id="inpbox" onfocus="floatOnFocus(this)" onblur="floatOnBlur(this)" placeholder="">
</div>


<!-- Input field with datepicker template, Custom CSS and jquery functions are not working.-->
<div class="maindiv">
  <span class="place" onclick="makeInpFocus(this)">Test Date</span>
  <input class="datepicker" type="text" name="testDate" id="inpbox" onfocus="floatOnFocus(this)" onblur="floatOnBlur(this)" placeholder="">
</div>
<br>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />

Initially it appears like this with red warning box which is also a problem.

And after selecting date it is like this.

You can see label and selected dates are overlapped. This means this template is not allowing my jquery and css to work. I just want to know how I can make this template work with my custom styling and event functions. Or if you know any other datepicker template that can give me a floating label style then please let me know.

回答1:

The problem is that the datepicker is wrapping an extra div around the input, so calling parent() is getting that div not the parent of the span.

Add another call to parent() and you will get the correct element:

  $(evt).parent().parent().find('.place').css("font-size", "88%");
  $(evt).parent().parent().find('.place').css("top", "-11px");
  $(evt).parent().parent().find('.place').css("color", "#1b75cf");
  $(evt).parent().parent().find('.place').css("background-color", "white");

来源：https://stackoverflow.com/questions/62890938/problem-with-datepicker-template-and-my-custom-javascript-and-css

标签

javascript

html

jquery

css

datepicker