2014-02-08 7 views
1

Я jquery для выбора времени. Его работа прекрасна, но в предыдущем месяце или в следующем месяце значок не выглядит так, как показано на изображении. Но он также работает, когда я нажимаю на область без изображения.JQuery date time picker формат формат выпуск

Мне нужно показать изображение по углам, как показано на изображении. пожалуйста, предложите где проблема ..

я скачал с http://trentrichardson.com/examples/timepicker/

enter image description here Мой код:

  <link rel="stylesheet" href="css/jquery-ui.css"> 
    <style> 
    /* css for timepicker */ 
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } 
.ui-timepicker-div dl { text-align: left; } 
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; } 
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; } 
.ui-timepicker-div td { font-size: 90%; } 
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } 

.ui-timepicker-rtl{ direction: rtl; } 
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; } 
.ui-timepicker-rtl dl dt{ float: right; clear: right; } 
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; } 
    </style> 

    <script src="js/jquery-1.9.1.js"></script> 
      <script src="js/1.10.3/jquery-ui.js"></script> 
     <script src="js/jquery-ui-timepicker-addon.js"></script>   
      <script> 

$(function() { 


    $("#datepicker").datetimepicker({dateFormat: "yy-mm-dd"}); 
    }); 

    </script> 
+0

Является ли это генератором данных «prev» и «next», как в демо? http://prntscr.com/2qorzh Если да, то проверьте его свойство CSS, если нет, то вы знаете, что вам придется искать JS, а не CSS – Nix

+0

Где я должен разместить div? У меня уже есть определенный стиль ... – logan

+1

Ну, он должен заполнить эти кнопки. Здесь, см. Этот jsfiddle, который я сделал - http://jsfiddle.net/uDEHB/ И посмотрите этот скриншот - http://prntscr.com/2qwem6 Проверьте, есть ли эти кнопки в вашем коде или нет. – Nix

ответ

1

Скорее всего, вы забыли включить ресурсы изображений JQuery UI. Откройте свои инструменты для браузеров dev, перейдите на консоль и (по крайней мере, в Chrome) вы увидите 404 сообщения об ошибках о недостающих ресурсах.

Вы должны загрузить полный пакет JQuery UI здесь: http://jqueryui.com/download/

Заметим также, что, кроме значков, вы не видите градиент фона на отдельные даты или в заголовке.

+0

В консоли отсутствует сообщение об ошибке 404. его пустой ... также я уже использую мини-версию, которую вы скачали по приведенной ссылке ... – logan

+0

Ваш ответ помог мне найти мою проблему и решить ее. Итак, я написал ответ ниже. –

0

В моем случае проблема была из-за неправильного шрифта Удивительные классы. Как я проверил .js файлы, относящиеся к моей DatePicker, я обнаружил, что стрелки, как:

<i class="icon-circle-arrow-left"></i> 

и

<i class="icon-circle-arrow-right"></i> 

Они должны быть изменены на:

<i class="fa fa-arrow-circle-left" aria-hidden="true"></i> 

и

<i class="fa fa-arrow-circle-right" aria-hidden="true"></i> 

Итак, просто найдите их d заменить все из них на правильные. Пожелайте, чтобы это сработало и для вас.

Смежные вопросы