jQuery Mobile datepicker版本问题

Question

使用jquery mobile（ datepicker ）的datepicker时我遇到了一些问题

当我使用jQuery的1.5版本和jQuery mobile的1.0a4.1时，datepicker会按预期显示。 这是代码：

<!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>

有一些解决方法吗？

Answer 1

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

您的版本仍然使用实时绑定功能。 在jQuery 1.9+版本中不推荐使用相同的功能。

你有2个解决方案：

1. 使用较新版本的datepicker
2. 或者使用jQuery版本1.8.3，因为它仍然具有实时功能，jQuery Mobile可以正常使用它。

Answer 2

您正在使用的日期选择器是实验性的，并且从未进入主构建

• http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

DateBox是另一种替代方案，可供移动使用

• http://dev.jtsage.com/jQM-DateBox2/