Date Picker work without internet

Question

I need to use a date picker to work without internet.

I have changed my source links from https links to downloaded files in my local. But then Date picker stops working. Can someone please let me know how to overcome this issue?

ideal source links :

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Changed to locally downloaded files

 <script src = "jquery-ui.js"></script>
      <script src = "jquery-1.10.2.js"></script>
      <script src = "jquery-ui.css"></script>

I shall be good if I can assure that even if https links used, it will work fine for my date pickers when internet is not there. Might be through some caching.

Updating my Question with datepickers code:

<span style="float: left;margin-left:2em"> <b>Date Range: </b>
        <input type="text" id="datepicker" > <b>to </b>
        <input type="text" id="datepicker2"> </span><div id = "Alert" style="float:left;margin-left:2em"> Please select a valid Date Range!</div>
        .............................................   

    var startDate;
        var endDate;
        var start;
        var end;



            $(function() {
                $("#datepicker").datepicker({
                    onSelect: function() {
                        startDate = $(this).datepicker('getDate');
                        start = formatDate(startDate);
                        if( start!=null && end!=null && end>=start)
                        {document.getElementById('Alert').style.visibility = 'hidden';
                        document.getElementById('canvas-holder').style.visibility = 'visible'; 

                        initial(start, end);

                        }
                        else {
                       document.getElementById('Alert').style.visibility = 'visible'; //Will show
                        document.getElementById('canvas-holder').style.visibility = 'hidden'; 
                        }
                    }

                });
                $("#datepicker2").datepicker({
                    onSelect: function() {
                        endDate = $(this).datepicker('getDate');
                        end = formatDate(endDate);
                        alert('skn here s' + startDate);
                        alert('skn here e' + endDate);
                        if( start!=null && end!=null && end>=start)
                        {document.getElementById('Alert').style.visibility = 'hidden';
                        document.getElementById('canvas-holder').style.visibility = 'visible'; 
                        initial(start, end);
                        }
                        else {
                            document.getElementById('Alert').style.visibility = 'visible'; //Will show
                            document.getElementById('canvas-holder').style.visibility = 'hidden'; 
                                  }
                        }

                    });

                });

Please find below error I get in browser console.

Uncaught TypeError: $(...).datepicker is not a function
    at HTMLDocument.<anonymous> (index.html:64)
    at fire (jquery-1.10.2.js:3048)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3160)
    at Function.ready (jquery-1.10.2.js:433)
    at HTMLDocument.completed (jquery-1.10.2.js:104)

I have incorporated changes as suggested. In that case date picker shows but not as expected.

Date PickerIssue:

Date Picker Expected

Answer 1

try changing this to

<link href = "jquery-ui.css" rel = "stylesheet">
 <script src = "jquery-1.10.2.js"></script>
<script src = "jquery-ui.js"></script>

you need to load jquery before jquery-ui.js