如何向 Datepicker 添加箭头？答案

【问题标题】：How do I add arrows to Datepicker?如何向 Datepicker 添加箭头？
【发布时间】：2011-05-28 19:58:14
【问题描述】：

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

我无法提供日历的显示，因为我是新用户，但是左右指针会去的地方是在 datepicker 日历的上角，点击已经改变了我想要的日历.

修改

在我看来，浏览器找不到图像（存储在 /images/ 中），除非 CSS 包含在脚本标签的头部中。请参阅下面的文件结构。 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 by <link>)
http://communityband.org/t-date-import.php (CSS by @import())

不同之处在于检索 CSS 的方式。

日期选择器的 CSS 包含在 <style>code from jquery-ui.datepicker.css pasted here</style> 内的文档头中。
<link rel="stylesheet" href="/css/jquery-ui.datepicker.css" type="text/css" /> 检索的 CSS
结果因浏览器而异：
- 使用 Firefox 4 或 Safari 5 或 IE 8：版本 1 可以正常工作，箭头和所有内容。日期选择器的 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

【问题讨论】：

给我们看一些代码。 jsfiddle.net 在这方面非常有用。
@Matt -- 就像这个：jsfiddle.net/drQsr -- 这表明默认情况下，当 CSS 存在时确实有箭头来导航月份。
我会看看 jsfiddle.net，它看起来真的很有用。与此同时，我发现了如何添加月份和年份的下拉列表，这是解决问题的一种方法。我只是太固执了，不能在那里退出。我明天会回来，因为我在家工作。我也可以把页面放在其他人可以看到的地方。它现在在我的笔记本电脑开发网站上运行。感谢您的回复。
好奇者和好奇者。我发现 datepicker 在某些浏览器而不是其他浏览器中显示所需的箭头。这也取决于我如何加载 CSS。
我发现：如果我将 jquery-ui.datepicker.css 直接粘贴到 html 的头部，ui datapicker 在 Firefox 和 Safari 中可以正常工作。 Chrome 会忽略一些 CSS。如果我将 css 放在外部文件中，并使用 @include 或链接 rel=stylesheet 包含它，我不会得到 CSS 的一部分。我正在使用测试文件和 jsfiddle 来尝试隔离问题。稍后再说。

标签： jquery jquery-ui datepicker

【解决方案1】：

您似乎缺少 CSS 文件或图像。

除了 jQuery(UI) JavaScript 文件之外，您还需要将 jQueryUI CSS 文件附加到您的脚本中。你可以从http://jqueryui.com网站下载整个包，包括js、css、图片。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

这对我有用。不确定您是否面临同样的挑战。 :)

【讨论】：

【解决方案4】：

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

media="all"

部分来自它的工作部分。

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案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();
});

【讨论】：