Date and Time Picker plugin for jQueryMobile not working in Android Emulator

Question

I am newbie to JQueryMobile, When I test at my jsfiddle its work fine, but when i run at Android Emulator, it become like this image. The date and time picker is missing

Below is my sample code,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title></title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <link rel="stylesheet" href="resources/css/my.css" />
                
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
        <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

        <!-- Optional Mousewheel support: http://brandonaaron.net/code/mousewheel/docs -->
        <script type="text/javascript" src="resources/js/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/latest/jqm-datebox.mode.datebox.min.js"></script>
        
        <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
        
        
        <style>
            /* App custom styles */
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script src="resources/js/my.js"></script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-theme="b" data-role="header">
                <a data-role="button" data-inline="true" data-transition="slide" data-theme="b" href="#page1" class="ui-btn-left">
                    Calendar
                </a>
                <a data-role="button" data-inline="true" data-transition="slide" href="#page1" class="ui-btn-right">
                    Save
                </a>
                <h4>
                    Edit Event
                </h4>
            </div>
            <div data-role="content">
                <div data-role="fieldcontain">
                        <label for="txtTitle">
                            Title
                        </label>
                        <input name="" id="txtTitle" placeholder="" value="" type="text" />                    
                </div>
                
                <div data-role="fieldcontain">
                  <label for="link1">Start Time*</label>
                  <input name="link1" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link1" />
                  <label for="link3">End Time*</label>
                  <input name="link3" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link3" />
                  <label for="mydate">Date*</label>
                  <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox"}'>
                </div>
                
            </div>
        </div>
        <script>
            //App custom javascript
        </script>
    </body>
</html>

Appreciate anyone can guide me.

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

this seems to be a problem with the emulator, I just tested your example on my device (HTC Desire with Android 2.2) and it works fine, see screenshot
enter image description here

the only issue is, the keyboard also opens after pressing one of the icons... but that's another issue... enter image description here

and concerning the keyboard issue, you might want to take a look at these answers

edited May 23 '17 at 12:03

Community

1
1

answered Oct 29 '12 at 22:33

Taifun

6,165
17
60
188

Hi Taifun, thats weird, I tested with my nexus 7 and the result is still same, the date and time picker is missing – user1661740 Oct 31 '12 at 10:33

Date and Time Picker plugin for jQueryMobile not working in Android Emulator

1 Answers1