Jquery Mobile Calendar

2
votes

I am using the mobile jQuery calendar from here: http://demos.jquerymobile.com/1.4.1/datepicker/

Looks simple, but I can't use the onSelect function to catch the selected date.

What I have is this:

<link rel="stylesheet"  href="http://code.jquery.com/mobile/git/jquery.mobile-git.css" />
<link rel="stylesheet" href="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.css" />
<link rel="stylesheet" href="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.theme.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="/jquery-mobile-datepicker-wrapper-master/external/jquery-ui/datepicker.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<script src="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.js"></script>
<script>

    $( document ).ready(function() {
        $('.date-input-inline').datepicker({
            onSelect: function(dateText, inst) {
                alert("Date is : " + dateText);
            }
        });
    });
</script>

Then HTML:

<body>
<input type="text" class="date-input-inline" data-inline="true" data-role="date">

This gives me on my webpage an input field and a calendar, as you would expect.

The problem is, when I click on a date, I get no alert showing the selected date.

How can I get the selected date from this calendar, and how is this working without initialization?

The files in the script src are the exact ones taken from https://github.com/arschmitz/jquery-mobile-datepicker-wrapper

It says here - https://github.com/arschmitz/jquery-mobile-datepicker-wrapper, that it auto-initializes on data-role="date". Also that date should be used, not datepicker. I have tried that, but it makes no difference.

3
jquery-mobiledatepicker

3 Answers

4
votes

I tried the code you provided and it works as you wanted it to.

I even created a working jsfiddle

JsFiddle creation procedure

For these 2 css files i copied the code in the css section preceded by a comment with the name of the file:

<link rel="stylesheet" href="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.css" />
<link rel="stylesheet" href="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.theme.css" />

Chose jQuery 1.9.1 and added http://code.jquery.com/mobile/git/jquery.mobile-git.css and http://code.jquery.com/mobile/git/jquery.mobile-git.js as external resources.

For the last 2 js files 

<script src="/jquery-mobile-datepicker-wrapper-master/external/jquery-ui/datepicker.js"></script>
<script src="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.js"></script>

i just copied the code to the JavaScript section.

In the end i added your code:

$( document ).ready(function() {
        $('.date-input-inline').datepicker({
            onSelect: function(dateText, inst) {
                alert("Date is : " + dateText);
            }
        });
    });

Conclusion

The popup shows fine as you will see if you test the jsfid. Note that the popup occurs once you actually select a date.

Your problem lies elsewhere, not with the code. Either your security settings or browser. If you have additional code that you have not posted may interfere with running. Make sure to strip your own example clean, as in the fid. Check console for errors and maybe even validate your html

0
votes

Are you running this in a mobile context, e.g. Phonegap or Cordova? If yes, try running in a normal browser and remove the Cordova or Phonegap plugin and see if you can debug it that way.

The most likely problem is that some bug in other Javascript is preventing the desired option.

If you aren't doing the above, or that is not the problem, then remove the "onSelect" bit and try on change.

$( document ).ready(function() {
        $('.date-input-inline').datepicker({
            /* Insert any configuration parameters here, such as changeYear: true, */
        });

    $('.date-input-inline').change(function() {
        var datevalue = $(this).val() ;
        alert (datevalue);
    });
});
0
votes

you can use the change jquery event to detect when the field has changed like brianlmerritt said you.

$( document ).ready(function() {
        $('.date-input-inline').datepicker({
            /* Insert any configuration parameters here, such as changeYear: true, */
        });

    $('.date-input-inline').change(function() {
        var datevalue = $(this).val() ;
        alert (datevalue);
    }); 
});

But, I think for mobile the best way is use native datepicker.

Could you test using field type="date"? e.g: 

<input type="date" class="date-input-inline" data-inline="true" data-role="date">

Try testing in a real mobile device