datepicker 模板和我的自定义 javascript 和 css 的问题

Question

我试图在我的网页上包含一个漂亮的日期输入字段。我已经完成了输入字段的样式。它有一个浮动标签，由 'onfocus' 和 'onblur' 事件使用 jquery 方法处理。这一切都很好。我已经展示了图片。

但是当我使用来自该站点 https://gijgo.com/datepicker/ 的日期选择器模板时出现问题。日期选择器工作也没有问题。它能够在我的输入字段中选择日期。但是我的浮动标签出现了问题。标签不会在单击输入框时向上翻转，当我选择一个日期时，它也会与标签重叠，如图所示。

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

最初它看起来像这样，带有红色警告框，这也是一个问题。

选择日期后是这样的。

您可以看到标签和选定的日期重叠。 这意味着这个模板不允许我的 jquery 和 css 工作。我只想知道如何使这个模板与我的自定义样式和事件函数一起工作。或者，如果您知道任何其他可以为我提供浮动标签样式的日期选择器模板，请告诉我。

Answer 1

问题是日期选择器在输入周围包裹了一个额外的div，因此调用parent() 得到的是div 而不是span 的父级。

添加另一个对parent() 的调用，您将获得正确的元素：

  $(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");