Can't pop up a datepicker using javascript

I want to add a datepicker in a website which is using jQuery, appery.io framework. Could anyone please suggest a link or tutorial to do this?Trying to pop up a datepicker in a website where right now it's only showing the current date in an input box like this:

<input type="text" name="cal" id="cal_id".....>

the javascript library have been used are jquery-1.8.2.js, jquery-1.8.2.min.js, jquery.mobile-1.3.0.js etc.

I tried JQuery UI datepicker from http://jqueryui.com/datepicker/. Added the javascript files: code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css, code.jquery.com/jquery-1.10.2.js, code.jquery.com/ui/1.10.4/jquery-ui.js. Added script as this:

<script>
            $(function () {
                $("#datepicker").datepicker();
            });

        </script>

in the input box made changes like this:

<input type="text" name="cal" id="datepicker"...>

it's not working or popping up the datepicker in the website. I am a new programmer in javascript & appery.io, I guess I am doing something very silly or missing something very basic. please help.

[I also tried some other datepickers from http://www.javascriptkit.com/script/script2/timestamp.shtml, http://javascriptcalendar.org/javascript-date-picker.php, http://www.kean.edu/~cpd/calendar/zapatec/zpcal/doc/wizard.html..nothing seemed to work for me.]

When I try to refresh the page, it shows 'Uncaught TypeError: undefined is not a function' and 'Uncaught TypeError: Cannot read property 'activePageClass' of undefined '.

Update: Now datepicker pops up only when I refresh the page! So when I navigate to this Calendar page and click on the input box, it doesn't work or doesn't pop up the datepicker. But if I refresh the page in browser, then it works!! Please help!

Solution

Your script is working for me. Did you add jquery-ui.css ?

Add this to your site:

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>                       
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

DEMO

Tested with: jQuery-2.0.2, jQuery-UI-1.10.3

EDIT:
Based on your comments, I deduced that your calendar is added dynamically after the script is called. Your jquery function only affects elements found when the page loads, for dynamically added elements you need to take a look at Jquery's live functions.

Try replacing your script with:

$(function () {
    $(document).on('click', "#datepicker", function (e){
        $(this).datepicker();
    });
});