The Date Picker you're using was experimental and was never rolled into the main build
There is DateBox which is another alternative and ready for mobile
Question
I'm facing some issues when using datepicker of jquery mobile (datepicker)
When I use the version 1.5 of jQuery and 1.0a4.1 of jQuery mobile, the datepicker is shown as expected. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="~/Content/jquery.ui.datepicker.mobile.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
//reset type=date inputs to text
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script src="~/Scripts/jquery.ui.datepicker.js"></script>
<script src="~/Scripts/jquery.ui.datepicker.mobile.js"></script>
</head>
<body>
@RenderBody()
<div data-role="page">
<div data-role="content">
<p>Hello world</p>
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value="" />
</div>
</form>
</div>
</body>
But when I use jQuery 1.9.1 and jQuery mobile 1.3.1 it generating the following error:
TypeError: Object [object Object] has no method 'live' [http://localhost:62799/Scripts/jquery.ui.datepicker.mobile.js:50]
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="~/Content/jquery.ui.datepicker.mobile.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//reset type=date inputs to text
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="~/Scripts/jquery.ui.datepicker.js"></script>
<script src="~/Scripts/jquery.ui.datepicker.mobile.js"></script>
</head>
<body>
@RenderBody()
<div data-role="page">
<div data-role="content">
<p>Hello world</p>
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value="" />
</div>
</form>
</div>
</body>
There is some workaround?
Solution 2
The Date Picker you're using was experimental and was never rolled into the main build
There is DateBox which is another alternative and ready for mobile
OTHER TIPS
Basically you are probably using older version of datepicker.
Your version still uses function live for event binding. That same function is deprecated in jQuery 1.9+ versions.
You have 2 solutions: