JQM Datebox not displaying calendar icon

Question

I was using JQM datebox normally, and some days ago, in my datebox fields, I cannot see the calendar icon, now I see a link that says: "Open date picker". I suppose that this is a CSS problem, however everything seem to be normal. Below is my code:

<!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>

I was trying to change the CSS order without success, also I checked for the image of the calendar which is in http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css, and everything see, to be normal. How can I restore this icon?

Thanks, just added the code, it have the problem that I describe, I cannot get the calendar icon. — Vito, Aug 09 '14 at 16:58

score 0 · Answer 1 · answered Aug 09 '14 at 09:46

0

Without any code, once can only guess the button changed from being a icon-only button to a non-icon button.

Since link based buttons in the latest version require you to add all the classes by hand (as JQM does not do it anymore at some point), try changing your calendar icon button by adding the classes:

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

and see if this helps.

If not... Post some code and a JSBIN.

answered Aug 09 '14 at 09:46

frequent

27,643
59
181
333

Thanks, just added the code on the orginal question, I cannot get the calendar icon. – Vito Aug 09 '14 at 16:59

score 0 · Answer 2 · answered Aug 10 '14 at 23:13

It's a version mis-match.

-latest for jQueryMobile is the 1.3 branch, specifically 1.3.2 last I looked.
-latest for DateBox is based on jQM 1.4.3.

If you have a compelling reason to need to use jQM 1.3, read on. If not, I'd recommend using the 1.4 branch, it's much cleaner, the jQM team continues to improve by leaps and bounds.

For jQM 1.3.2 -

You'll need to link to sources other than -latest.

Take a look at the source of this page - it's using jQM 1.3.2 and Datebox 1.4.0 (The reason for linking to DateBox 1.4.0 is there was a huge issue with the 1.3.2 release in that it did not respect data limiting, and I've not had time to backport a fix. My build system really isn't set up to keep concurrent versions, and I didn't branch appropriately at the time - dumb mistake)

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

Anything newer than 1.4.0 with older jQM is going to display that problem. This may be a very good time to make a local copy of that 1.4.0 source file too, there are some big changes coming down the pipe in the next week or so for DateBox (The jQM team is making a lot of big changes in 1.5.0 - or rather, they depreciated a lot in 1.4.0, and it's all going away for good in 1.5.0)

Thanks, I made a quick and dirty fix and add a CSS created by me, but I would like a better way to resolve this. Could you please post a fiddle to see how the CSS should look like? — Vito, Aug 12 '14 at 21:31
any idea http://stackoverflow.com/questions/25280308/how-to-disable-the-already-selected-date-for-next-date-box-in-j-t-sage-date-pick — Vini, Aug 13 '14 at 07:23

JQM Datebox not displaying calendar icon

2 Answers2