jQuery Mobile datepicker versions issues

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?

score 4 · Answer 1 · answered Apr 16 '13 at 17:52

4

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:

Use newer version of datepicker
Or use jQuery version 1.8.3 because it will still have function live and jQuery Mobile works just fine with it.

answered Apr 16 '13 at 17:52

Gajotres

57,309
16
102
130

1

But this datepicker can be used in mobile? This isn't just for "desktop"? I would like to use the most recent version of the API... – amp Apr 16 '13 at 17:58
As I told you there are 2 solutions, pick one. – Gajotres Apr 16 '13 at 18:01
@Gajotres couldn't you just answer amp question more clearly? That would be beneficial to all other users here. – superjos Jul 13 '13 at 14:35
2

It seems unclear (to me at least) whether the [refereneced _jQuery UI_ Datepicker](http://jqueryui.com/datepicker/) can be used in a _jQuery Mobile_ context. When you replied "There are 2 solutions, pick one", that did not help me in understanding this point. Thanks – superjos Aug 05 '13 at 09:57

score 2 · Accepted Answer · answered Apr 17 '13 at 01:56

The Date Picker you're using was experimental and was never rolled into the main build

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

There is DateBox which is another alternative and ready for mobile

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

jQuery Mobile datepicker versions issues

2 Answers2