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.
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
the only issue is, the keyboard also opens after pressing one of the icons… but that’s another issue…
and concerning the keyboard issue, you might want to take a look at these answers