Как добавить стрелки в Datepicker?

Question

Я создал форму и хочу использовать пользовательский интерфейс Datepicker, чтобы помочь людям выбрать дату.Datepicker работает просто отлично, но не содержит [видимых] подсказок о том, как переходить из месяца в месяц.Я знаю, что нажатие в верхних углах перемещает календарь на следующий или предыдущий месяц, и я хочу поставить визуальную подсказку в угловых полях, чтобы помочь моим пользователям.Как мне прикрепить изображения к дисплею?

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

---

Изменено

Мне кажется, что браузеры не находят изображения (хранятся в/ images /) ЗА ИСКЛЮЧЕНИЕМ, когда CSS включен в заголовок в тегах скрипта.Смотрите структуру файла ниже.Поведение Chrome другое.На данный момент меня не волнует проблема Chrome.

Что я сделал после того, как задал вопрос:

Я попытался использовать jsfiddle без особого успеха.http://jsfiddle.net/akakie/Pmpd8/

Я разместил три примера в Интернете.Просмотреть исходный код, чтобы увидеть код.(Извините. Я ограничен 2 ссылками.)

• http://communityband.org/t-date-included.php (включая CSS)
• http://communityband.org/t-date-link.php (CSS <link>)
• http://communityband.org/t-date-import.php (CSS от @import())

Различия в том, как извлекается CSS.

• CSS для DatePickerвключен в заголовок документа в пределах <style>code from jquery-ui.datepicker.css pasted here</style>.
• CSS, полученный с помощью <link rel="stylesheet" href="/css/jquery-ui.datepicker.css" type="text/css" />

• Результаты варьируются браузером:

  • С Firefox4 или Safari 5 или IE 8: версия 1 работает как надо, стрелки и все.CSS для DatePicker включен в заголовок документа в <style>code from jquery-ui.datepicker.css pasted here</style>.

  • Версии 2 и 3 не находят изображения.Другое форматирование правильное.

  • В Chrome макет правильный (календарь отображается в полном размере и работает), но не отображаются ни цвет, ни стрелки.

Структура файла

WebRoot

• / css

  • / reset.css
  • / basefont.css
  • jquery.ui.datepicker.min.js

• / images

  • / ui- [xxx] .png (несколько изображений)

• / js

  • / libs
    • / jquery-1.6.1.min.js
    • / jquery.ui.datepicker.min.js

Answer 1

Похоже, вам не хватает файла CSS или изображений.

Помимо файлов JavaScript jQuery (UI), вам необходимо прикрепить файлы CSS jQueryUI к вашему сценарию.Вы можете загрузить весь пакет с веб-сайта http://jqueryui.com, включая js, css, images.

Обратите внимание, что изображения (по умолчанию) должны находиться в папке images / относительно размещения файла CSS.Если вы хотите изменить эту структуру, вам нужно будет изменить пути к изображениям для объявлений background-image: в файле CSS.

Answer 2

Вы можете использовать файлы пользовательского интерфейса jQuery из внешнего источника, а не загружать их (если только вам не нужна настроенная тема).Я сделал JSFiddle, который выделяет стрелки DatePicker .Для этой скрипки я выбрал следующее из сегмента «Каркасы и расширения» боковой панели:

• jQuery 2.0.2 с jQuery UI 1.10.3

Обратите внимание, что вышеприведенные варианты являются внешними платформами и должны работать одинаково для всех пользователей.

HTML

<div id="datepicker">
    <!-- jQuery UI datepicker goes here -->
</div>

CSS

/* This CSS will put a solid red border around the arrow symbols. */
.ui-datepicker-header .ui-icon {
    border:2px solid #F00;
}

jQuery

// This jQuery will embed a datepicker widget into the page itself,
// not as an overlay element.

$(function() {
    $("#datepicker").datepicker();
});

Answer 3

Я обнаружил, что изображения стрелок не отображаются из-за разрешений для папки изображений. Я скопировал всю папку с изображениями из zip-файла, загруженного с http://jqueryui.com.

Как только я изменил разрешения для всех пользователей, чтобы они могли только для чтения, появились изображения.

Answer 4

Я думаю, что, возможно, нашел ответ.Кажется, будто я удаляю часть

media="all"

из раздела, в котором она работает.

Answer 5

У меня была такая же проблема.Если вы щелкните правой кнопкой мыши там, где, как вам известно, должно быть изображение стрелки, и выберите «просмотреть фоновое изображение», вы сможете выяснить, находит ли средство выбора даты изображение.Когда я щелкнул по нему, появилось сообщение «Не удалось найти изображение ...», а затем был путь к файлу, который он просматривал для изображения.Затем я только что нашел файл с тем же именем в папке jquery UI, которую я скачал, и переместил его в путь к файлу, указанный в сообщении об ошибке.

Это сработало для меня.Не уверен, если у вас возникли те же проблемы.:)

Answer 6

После добавления отсутствующего изображения из базы jquery-ui, как многие предлагали, мне пришлось очистить кэш в Chrome, чтобы увидеть изображения стрелок.Кажется, теперь работает нормально.