3

使用 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] 没有方法'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>

有一些解决方法吗？

4

2 回答 2

4

基本上你可能使用的是旧版本的datepicker。

您的版本仍然使用函数live进行事件绑定。在 jQuery 1.9+ 版本中不推荐使用相同的功能。

您有 2 个解决方案：

  1. 使用较新版本的日期选择器
  2. 或者使用 jQuery 版本 1.8.3，因为它仍然具有实时功能，并且 jQuery Mobile 可以很好地使用它。
于 2013-04-16T17:52:40.817 回答
2

您使用的日期选择器是实验性的，从未被纳入主版本

DateBox 是另一种选择，可用于移动设备

于 2013-04-17T01:56:05.547 回答