Date picker with datediff

Date picker with datediff

Okay so thsi is driving me nuts, ive searched through the forums, but every example ive seen doesnt work

I have cobbled bits of code together to get this far, but cant get the number of days between dates to display. the datepickers are correctly initialised, but nothing happens on the showdays fucntion side of things, doesnt seem to get fired. My first foray into jquery, going a little nuts...surely im not far off?

Any help appreciated



  1. <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
    $(function() {
    $("#arrdate").datepicker();
       onSelect: showDays;
    $("#depdate").datepicker();
       onSelect: showDays;
    });

    function showDays() {
        var start = $('#arrdate').datepicker('getDate');
        var end = $('#depdate').datepicker('getDate');
        if (!start || !end) return;
        var days = (end - start) / 1000 / 60 / 60 / 24;
        $('#num_days').val(days);
    }

    </script>
    </head>
    <body>
    <p>Arrival Date: <input type="text" id="arrdate"></p>
    <p>Departure Date: <input type="text" id="depdate"></p>
    <p>Days Accomodation: <input type="text" id="num_days"></p>
    </body>
    </html>