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>

Answer 1

我知道这是一个老话题，但是这发生在我身上。我正在添加原因以及如何解决此问题，以防其他人提出此问题。

我不是从jquery UI下载所有包，而是为jquery UI下载了CSS和JS文件。但是我发现图像文件夹和图像丢失。从jquery调用CDN时，不会出现问题，因为CDN的图像文件夹附近。因此，您必须下载image文件夹并在jquery ui CSS（添加images文件夹位置）中更改这些行。

.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");
}

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。

DatePicker详细信息：

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

Answer 3

jQuery-ui.css和jQuery-ui.js必须包含在页面中。最初，这可能并不明显，因为当需要datepicker时，他通常只包括datepicker.css和datepicker.jss，但这些依赖于那些jquery-ui文件。

jQueryUI datepicker不显示下一个上一个三角形箭头

3 个答案: