Datepicker模板以及我的自定义JavaScript和CSS的问题

本文介绍了Datepicker模板以及我的自定义JavaScript和CSS的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在网页上添加一个漂亮的日期输入字段.我已经完成了输入字段的样式设置.它具有一个浮动标签，该标签通过使用jquery方法的"onfocus"和"onblur"事件进行处理.而且一切正常.我已经显示了图像.

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.

但是，当我从此站点使用日期选择器模板时出现问题 https://gijgo.com/datepicker/.日期选择器的工作也没有问题.它可以在我的输入字段中选择日期.但是我的浮动标签出现了问题.标签不会在单击输入框时出现问题，而且当我选择一个日期时，它会与标签重叠，就像图像中显示的那样.

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/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/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.

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

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.

问题

Datepicker模板以及我的自定义JavaScript和CSS的问题

问题描述

推荐答案