jQueryUI日期选择器未显示下一个/上一个三角形箭头

Question

我有一个与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>

- tech_geek

---

你使用的日期选择器版本是哪个？ - diogenesgg

我尝试了你的代码，它对我有效。但是你遗漏了很多信息 - 你没有展示初始HTML，如何初始化第一个日期选择器，或者如何添加新的日期选择器输入。此外，如果你查看文档，默认的jQuery UI日期选择器HTML看起来像你展示的第二个例子，并且图标可以正常工作。你的jQuery UI CSS和图片没问题吗？ - Don't Panic

@Don'tPanic 在初始的HTML中，我没有进行初始化，只是在HTML中放置了日期选择器类，它会自动初始化。让我添加HTML。 - tech_geek

当我尝试在本地进行操作时，我遇到了相同的问题。我们需要下载一些图标。当您在本地下载网页时也会出现相同的问题。 - Sol

Answer 1

我知道这是一个旧的帖子，但这也发生在我身上。我要添加原因和解决方法，以防其他人遇到此问题。

我没有下载jquery UI的全部包，而是只下载了CSS和JS文件。但我发现缺少图像文件夹和图像。从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");
}

- vimuth

Answer 2

如果箭头没有显示出来，很可能是CSS加载问题。检查Chrome以寻找任何异常。

我无法重现您的错误。看一下这个jsfiddle。

它成功初始化了日期选择器。如果您检查下一个箭头，可以看到以下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。

日期选择器详细信息：

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

- diogenesgg

---

CSS或任何文件中没有错误。只是当我通过JS添加时，它在HTML中没有创建三角形。 - tech_geek

Answer 3

必须将jQuery-ui.css和jQuery-ui.js包含在页面中。 最初，这可能并不明显，因为当一个人想要使用日期选择器时，通常只包括datepicker.css和datepicker.js，但这些取决于那些jquery-ui文件。

- FantomX1