JQM Datebox 不显示日历图标答案

【问题标题】：JQM Datebox not displaying calendar iconJQM Datebox 不显示日历图标
【发布时间】：2014-08-09 00:25:59
【问题描述】：

我正常使用 JQM 日期框，几天前，在我的日期框字段中，我看不到日历图标，现在我看到一个链接，上面写着：“打开日期选择器”。我想这是一个 CSS 问题，但一切似乎都很正常。以下是我的代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style type='text/css'>

    html { background-color: #333; }

    @media only screen and (min-width: 600px){
        .ui-page {
            width: 600px !important;
            margin: 0 auto !important;
            position: relative !important;
            border-right: 5px #666 outset !important;
            border-left: 5px #666 outset !important;
        }
    }   

</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" /> 
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
<link type="text/css" href="http://dev.jtsage.com/jQM-DateBox2/css/demos.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
</head>
<body>

   <input name="FGRvsSGA_LMP" id="FGRvsSGA_LMP" placeholder="Test" type="text" data-role="datebox" data-options='{"mode":"calbox", "useNewStyle":true, "calUsePickers": true, "calNoHeader": true }' />
</body>
</html>

我试图更改 CSS 顺序但没有成功，我还检查了 http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css 中的日历图像，一切正常。如何恢复这个图标？

【问题讨论】：

检查这个jsfiddle.net/2752A/17发布一些代码
谢谢，刚刚添加了代码，有我描述的问题，我无法获取日历图标。

标签： css jquery-mobile datebox

【解决方案1】：

没有任何代码，一次只能猜到按钮从icon-only按钮变为non-icon按钮。

由于最新版本中基于链接的按钮要求您手动添加所有类（因为 JQM 在某些时候不再这样做），请尝试通过添加类来更改日历图标按钮：

ui-btn ui-icon-calendar ui-btn-icon-notext ui-shadow ui-corner-all

看看这是否有帮助。

如果不是...发布一些代码和 JSBIN。

【讨论】：

谢谢，刚刚在原始问题上添加了代码，我无法获取日历图标。

【解决方案2】：

这是版本不匹配。

-latest for jQueryMobile 是 1.3 分支，特别是我上次查看的 1.3.2。
-dateBox 的最新版本基于 jQM 1.4.3。

如果您有令人信服的理由需要使用 jQM 1.3，请继续阅读。如果没有，我建议使用 1.4 分支，它更干净，jQM 团队继续跨越式改进。

对于 jQM 1.3.2 -

您需要链接到 -latest 以外的来源。

查看此页面的来源 - 它使用 jQM 1.3.2 和 Datebox 1.4.0（链接到 DateBox 1.4.0 的原因是 1.3.2 版本存在一个大问题，因为它确实不尊重数据限制，而且我没有时间向后移植修复程序。我的构建系统确实没有设置为保持并发版本，而且我当时没有适当地分支 - 愚蠢的错误）

http://dev.jtsage.com/jquery-mobile-datebox/tests/test.php?ver=1.3.2&verB=1.4.0

任何比 1.4.0 更新且带有较旧 jQM 的版本都会显示该问题。这也可能是制作该 1.4.0 源文件的本地副本的好时机，DateBox 将在下周左右进行一些重大更改（jQM 团队正在1.5.0 - 或者更确切地说，它们在 1.4.0 中贬值了很多，而在 1.5.0 中这一切都消失了）

【讨论】：

谢谢，我做了一个快速而肮脏的修复并添加了一个我创建的 CSS，但我想要一个更好的方法来解决这个问题。您能否发布一个小提琴以查看 CSS 的外观？
任何想法stackoverflow.com/questions/25280308/…