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

【问题标题】：JQuery date time picker layout format issueJQuery 日期时间选择器布局格式问题
【发布时间】：2016-05-04 17:28:40
【问题描述】：

我是日期时间选择器的 jquery。它工作正常，但是上个月或下个月的图标没有如图所示显示..但是当我点击无图片区域时它也可以工作。

我需要在角落显示图像，如图所示。请提出问题所在..

我从http://trentrichardson.com/examples/timepicker/下载的

我的代码：

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

【问题讨论】：

它是否像演示中那样生成数据处理程序“prev”和“next”？ prntscr.com/2qorzh 如果是，那么检查它的 CSS 属性，如果不是，那么你知道你必须查看 JS，而不是 CSS
我应该把 div 放在哪里？我已经定义了样式...
嗯，它应该填充那些按钮。在这里，看看我制作的这个 jsfiddle - jsfiddle.net/uDEHB 看看这个截图 - prntscr.com/2qwem6 检查这些按钮是否在你的代码中。

标签： javascript jquery html css

【解决方案1】：

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

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

另请注意，除了图标之外，您不会在各个日期或标题中看到渐变背景。

【讨论】：

控制台中没有 404 错误信息。它是空的...我已经在使用从您提供的链接下载的缩小版...
您的回答帮助我找到了我的问题并解决了它。所以，我在下面写了答案。

【解决方案2】：

在我的情况下，问题是由于错误的字体 Awesome 类。当我检查与我的日期选择器相关的 .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>

所以，只需找到它们并将它们全部替换为正确的即可。希望它也适合你。

【讨论】：