日期选择器模板和我的自定义 javascript 和 css 有问题

Question

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

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

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

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

在 selecting 日期之后是这样的。

您可以看到标签和 selected 日期重叠。这意味着此模板不允许我的 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");

日期选择器模板和我的自定义 javascript 和 css 有问题

Problem with datepicker template and my custom javascript and css

html

javascript

css

jquery

datepicker