Search code examples
jquery-mobileandroid-emulator

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

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.

Solution

  • 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