Question

我已经构建了一个表单，并希望使用UI Datepicker帮助人们选择日期。 Datepicker工作正常，但不包含如何每月移动的[可见]线索。我知道点击上角会将日历移动到下个月或上个月，我想在角落框中添加一个视觉线索以帮助我的用户。如何将图像附加到显示器上？

我无法提供日历的显示，因为我是新用户，但是左右指针所在的位置位于日期选择器日历的上角，其中点击已经根据需要更改了日历

修订

在我看来，当CSS包含在脚本标记内的头部时，浏览器不会找到图像（存储在/ images /中）。请参阅下面的文件结构Chrome行为不同。目前，我并不关心Chrome的问题。

自问这个问题后我做了什么：

我尝试使用jsfiddle但没有取得多大成功。 http://jsfiddle.net/akakie/Pmpd8/

我在网上放了三个例子。查看源代码以查看代码。（对不起。我只限于2个链接。）

http://communityband.org/t-date-included.php（包括CSS）
http://communityband.org/t-date-link.php（CSS <link>）
http://communityband.org/t-date-import.php（CSS @import()）

区别在于如何检索CSS。

datepicker的CSS包含在<style>code from jquery-ui.datepicker.css pasted here</style>内的文档头中。
CSS由<link rel="stylesheet" href="/css/jquery-ui.datepicker.css" type="text/css" />
结果因浏览器而异：
- 使用Firefox 4或Safari 5或IE 8：版本1可以正常工作，箭头和所有。 datepicker的CSS包含在<style>code from jquery-ui.datepicker.css pasted here</style>内的文档头中。
- 版本2和3找不到图像。其他格式是正确的。
- 使用Chrome时，布局正确（日历显示为完整尺寸且有效）但不显示颜色和箭头。

文件结构

的WebRoot

/ CSS
- /reset.css
- /basefont.css
- jquery.ui.datepicker.min.js
/图像
- / ui- [xxx] .png（多张图片）
/ JS
- /库
  - /jquery-1.6.1.min.js
  - /jquery.ui.datepicker.min.js

Answer 1

这看起来像是缺少CSS文件或图像。

除了jQuery（UI）JavaScript文件之外，您还需要将jQueryUI CSS文件附加到脚本中。您可以从http://jqueryui.com网站下载整个软件包，包括js，css，images。

请注意，图像（默认情况下）需要位于相对于CSS文件放置的图像/文件夹中。如果要更改此结构，则需要更改背景图像的图像路径：CSS文件中的声明。

Answer 2

从jquery-ui库中添加丢失的图像后，正如许多建议的那样，我必须清除Chrome中的缓存以查看箭头图像。似乎现在工作正常。

Answer 3

我遇到了同样的挑战。如果右键单击您知道箭头图像的位置并选择“查看背景图像”，您将能够确定日期选择器是否正在查找图像。当我点击它时，它说了一些消息，比如“找不到图像......”然后有了文件路径，它正在查看图像。然后我刚刚从我下载的jquery UI文件夹中找到了同名文件，并将其移动到错误消息中显示的文件路径。

这对我有用。不确定您是否遇到了同样的挑战。：）

Answer 4

我想我可能找到了答案。好像我删除了

media="all"

部分来自它的工作部分。

Answer 5

我发现由于图像文件夹的权限，箭头的图像没有显示。我从http://jqueryui.com下载的zip文件中复制了整个图像文件夹。

我将所有用户的权限更改为只能显示图像。

Answer 6

您可以使用外部源中的jQuery UI文件，而不是下载它们（除非您需要自定义主题）。我做了a JSFiddle that highlights the Datepicker's arrows。对于这个小提琴，我从侧边栏的“框架和扩展”部分中选择了以下内容：

jQuery 2.0.2 ， jQuery UI 1.10.3

请注意，上述选项是外部框架，对所有用户应采用相同的方式。

HTML

<div id="datepicker">
    <!-- jQuery UI datepicker goes here -->
</div>

CSS

/* This CSS will put a solid red border around the arrow symbols. */
.ui-datepicker-header .ui-icon {
    border:2px solid #F00;
}

的jQuery

// This jQuery will embed a datepicker widget into the page itself,
// not as an overlay element.

$(function() {
    $("#datepicker").datepicker();
});

如何向Datepicker添加箭头？

文件结构

6 个答案:

HTML

CSS

的jQuery