jquery - 如何向日期选择器添加箭头？

Question

我已经构建了一个表单，并希望使用 UI 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 <link>)
• http://communityband.org/t-date-import.php (CSS @import())

差异在于 CSS 的检索方式。

• 日期选择器的 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 可以正常工作，包括箭头等等。日期选择器的 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、图片。

请注意，图像(默认情况下)需要位于与 CSS 文件位置相关的 images/文件夹中。如果您想更改此结构，则需要更改 CSS 文件中的 background-image: 声明的图像路径。