Проблема с шаблоном datepicker и моими пользовательскими javascript и css - PullRequest
Новая
       99

Проблема с шаблоном datepicker и моими пользовательскими javascript и css

0 голосов
/ 14 июля 2020

Я пытаюсь добавить красивое поле ввода даты на свою веб-страницу. Я уже сделал стиль своего поля ввода. Он имеет плавающую метку, которая обрабатывается событиями onfocus и onblur с использованием методов jquery. И все работает нормально. Я показал изображения.

enter image description here

But problem arises when I use a datepicker template from this site 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" />

Первоначально это выглядит так с красным предупреждением, что также является проблемой. enter image description here

And after selecting date it is like this. введите описание изображения здесь

Вы можете видеть, что метка и выбранные даты перекрываются. Это означает, что этот шаблон не позволяет моим jquery и css работать. Я просто хочу знать, как заставить этот шаблон работать с моими пользовательскими функциями стилей и событий. Или, если вы знаете какой-либо другой шаблон datepicker, который может дать мне стиль плавающей метки, дайте мне знать.

1 Ответ

1 голос
/ 14 июля 2020

Проблема в том, что datepicker оборачивает дополнительный 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");
...