jQuery Mobile datepicker versions issues

StackOverflow https://stackoverflow.com/questions/16043348

문제

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?

도움이 되었습니까?

해결책 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

다른 팁

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:

  1. Use newer version of datepicker
  2. Or use jQuery version 1.8.3 because it will still have function live and jQuery Mobile works just fine with it.
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top