jQueryUI datepicker не показывает следующие предыдущие треугольные стрелки

ProgramBox

jQueryUI datepicker не показывает следующие предыдущие треугольные стрелки

Post author:admin
Запись опубликована:20 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery-ui #jquery-ui-datepicker

#javascript #jquery-пользовательский интерфейс #jquery-ui-datepicker

Вопрос:

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

 <a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="">
    <span class="ui-icon ui-icon-circle-triangle-e"></span>
</a>

в моем .ctp (html-файл) я инициализируюсь следующим образом.

 <input name="properties[date_accepted_c]" class="form-control datepicker" data-dateformat="yy-mm-dd">

Теперь с другой стороны я создаю несколько динамических полей, которые, очевидно, являются полями даты, но нет значков стрелок для изменения даты. Я инициализирую его в файле JS.

 $(document).ready(function() {
    $(document).on('focus', ".datepicker", function () {
        if( $(this).hasClass('hasDatepicker') === false )  {
            $(this).datepicker({
                dateFormat : 'yy-mm-dd',
                autoSize: true,
            });
        }
    });
});

Вместо этого он создает этот HTML:

 <a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next">
    <span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>

1. Какую версию datepicker вы используете?

2. Я попробовал ваш код, и у меня это работает. Но вы упустили много информации — вы не показали нам свой исходный HTML, как вы инициализируете первый datepicker или как вы добавляете новые входные данные datepicker. Кроме того, если вы проверите документы, HTML-код jQuery UI datepicker по умолчанию выглядит как второй показанный вами пример, и значки работают. Ваш пользовательский интерфейс jQuery, CSS и изображения в порядке?

3. @Don’t Panic В исходном html я не инициализирую, он инициализируется автоматически, просто помещая класс datepicker в html. позвольте мне добавить html

4. У меня такая же проблема, когда я пытаюсь сделать это локально. Должны быть какие-то иконки, которые нам нужно загрузить. Та же проблема возникает и при локальной загрузке веб-страницы.

Ответ №1:

Я знаю, что это старая тема, но это случилось со мной. Я добавляю причину и то, как я ее решил, на случай, если кто-то другой может столкнуться с этой проблемой.

Вместо загрузки всего пакета из jquery UI я загрузил только CSS и JS файлы для jquery UI. Но я обнаружил, что папка с изображениями и изображения отсутствуют. При вызове из jquery проблема с CDN не появится, поскольку рядом с CDN есть папка с изображением. Итак, вам нужно загрузить папку с изображениями и изменить эти строки в jquery ui CSS (добавить расположение папки с изображениями).

 .ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
    background-image: url("images/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
    background-image: url("images/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
    background-image: url("images/ui-icons_777777_256x240.png");
}

Ответ №2:

Если он не показывает стрелки, это, скорее всего, проблема с загрузкой css. Проверьте chrome на наличие каких-либо исключений.

Я не смог воспроизвести вашу ошибку. Взгляните на этот jsfiddle

Он успешно инициализирует datepicker. Если вы посмотрите на следующую стрелку, вы увидите следующий html:

 <a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next">
    <span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>

На самом деле, единственный способ, которым я мог воспроизвести вашу ошибку, — это удалить css datepicker.

Сведения о DatePicker:

https://code.jquery.com/ui/1.12.1/jquery-ui.js

https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

javascript:

 $(document).on('focus', ".datepicker", function () {
  if( $(this).hasClass('hasDatepicker') === false )  {
    $(this).datepicker({
      dateFormat : 'yy-mm-dd',
      autoSize: true,
    });
  }
});

HTML:

 <p>Date: <input type="text" class="datepicker"></p>

jQuery: 2.1.3

Ответ №3:

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