Проблема с JQueryUI DatePicker - PullRequest
Новая
       50

Проблема с JQueryUI DatePicker

0 голосов
/ 07 ноября 2019

У меня возникают проблемы с циклом прохождения группы элементов в классе с использованием JQueryUI DatePicker, и я не могу понять, где моя проблема, поскольку консоль просто сообщает мне, что элемент, который не должен быть неопределенным, не определен. 


$(document).ready(function () {
        $('.date').toArray().forEach(function (field) {

            $(field).datepicker({
                showOn: '',
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true,
                yearRange: "c-100:c+100",
                beforeShow: function () {
                    setTimeout(function () {
                        $(field).css('z-index', 999999);
                    }, 0);
                }
            });

            let class_to_use = '.'+$(field).attr('id');

            let icon = $(class_to_use);
            console.log(icon); // fine, not undefined, it is the correct element
            icon.click(function () {
                console.log('clicked'); 
                $(field).datepicker("show")
                // but on click I get...
                // Uncaught TypeError: Cannot read property 'left' of undefined
             });
        });

    });

Этот ввод является модальным, если это имеет значение, что я делаю неправильно?

Вот HTML, отображаемый для одного из элементов, есть несколько, поэтому яделает цикл: 

<i class="id_date fa fa-calendar-alt prefix prefix-smaller form-icon-adjust" style="cursor: pointer; color: var(--sidebar-bg-color)"></i>
<div class="md-form form-icon-margin ">

<input type="text" name="date" class="form-control date" required id="id_date">

1 Ответ

0 голосов
/ 07 ноября 2019

Вы можете просто использовать опцию button и стилизовать кнопку в соответствии со своими потребностями. Вам не нужно сражаться, чтобы поставить свои собственные. 

$(function() {
  $('.date').each(function(i, el) {
    var field = $(el);
    $(field).datepicker({
      showOn: 'button',
      dateFormat: 'yy-mm-dd',
      changeMonth: true,
      changeYear: true,
      yearRange: "c-100:c+100"
    });
    var btn = field.next("button");
    var icon = $("<i>", {
      class: "fa fa-calendar-alt"
    });
    btn.addClass("id_date prefix prefix-smaller form-icon-adjust").css({
      cursor: "pointer",
      color: "var(--sidebar-bg-color)"
    }).html(icon);
  });
});
.date-control .id_date {
  float: left;
  width: 30px;
  height: 32px;
  margin: 1px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="md-form form-icon-margin date-control">
  <input type="text" name="date" class="date" required id="id_date">
</div>
...