jQuery Mobile 日期选择器版本问题
Posted
技术标签:
【中文标题】jQuery Mobile 日期选择器版本问题【英文标题】：jQuery Mobile datepicker versions issues 【发布时间】：2013-04-09 05:31:23 【问题描述】：我在使用 jquery mobile (datepicker) 的 datepicker 时遇到了一些问题
当我使用 jQuery 1.5 版本和 jQuery mobile 1.0a4.1 时，日期选择器按预期显示。代码如下：
<!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>
但是当我使用 jQuery 1.9.1 和 jQuery mobile 1.3.1 时，它会产生以下错误：
TypeError: Object [object Object] has no method 'live' [http://localhost:62799/Scripts/jquery.ui.datepicker.mobile.js:50]
代码：
<!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>
有一些解决方法吗？
【问题讨论】：
【参考方案1】：基本上你可能使用的是旧版本的datepicker。
您的版本仍然使用函数 live 进行事件绑定。在 jQuery 1.9+ 版本中不推荐使用相同的功能。
您有 2 个解决方案：
-
使用较新版本的datepicker
或者使用 jQuery 版本 1.8.3，因为它仍然具有 live 功能，并且 jQuery Mobile 可以很好地使用它。
【讨论】：
但是这个日期选择器可以在手机上使用吗？这不仅适用于“桌面”吗？我想使用最新版本的 API... 我告诉过你有 2 个解决方案，选择一个。 @Gajotres 你不能更清楚地回答 amp 问题吗？这对这里的所有其他用户都有好处。 似乎不清楚（至少对我而言）refereneced jQuery UI Datepicker 是否可以在 jQuery Mobile 上下文中使用。当您回答“有 2 个解决方案，选择一个”时，这并没有帮助我理解这一点。谢谢【参考方案2】：您使用的日期选择器是实验性的，从未纳入主版本
http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/DateBox 是另一种可供选择的移动设备
http://dev.jtsage.com/jQM-DateBox2/【讨论】：
以上是关于jQuery Mobile 日期选择器版本问题的主要内容，如果未能解决你的问题，请参考以下文章
JQuery Mobile 日期选择器未在 Chrome 中显示日期
jquery mobile中的日期选择器在第二页中添加时重复
用于Web的响应式jQuery日期时间选择器插件&；可移动的
Mobiscroll datepicker 被 jQuery Mobile 模态隐藏