JQuery日期时间选择器布局格式问题

时间:2014-02-08 18:42:04

标签: javascript jquery html css

我是日期时间选择器的jquery。它的工作正常,但是,上个月或下个月的图标不会像图像中所示那样显示..但是当我点击无图像区域时它也可以正常工作。

我需要在角落显示图像,如图所示。请说明问题出在哪里..

我是从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>

2 个答案:

答案 0 :(得分:1)

您可能忘记包含jQuery UI图像资源。打开浏览器开发工具,转到控制台,(至少在Chrome中),您应该看到有关缺少资源的404错误消息。

您应该从这里下载完整的jQuery UI包: http://jqueryui.com/download/

另请注意,除了图标之外,您还没有在各个日期或标题中看到渐变背景。

答案 1 :(得分:0)

在我的情况下,问题是由于错误的字体Awesome类。当我查看与我的datepicker相关的.js文件时,我发现了箭头:

<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>

所以,找到它们并将它们全部替换为正确的。希望它也适合你。