JQuery Issue: .datepicker is not a function?

Question

The requirement is to use jquery datepicker when textbox is clicked. All the js references is added but still .datepicker is not a function error comes up. The code is given below. Am i missing out on something?

Error Details

Uncaught TypeError: $(...).datepicker is not a function
at HTMLDocument.<anonymous> (Index:56)
at c (jquery-1.10.2.min.js:21)
at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:21)
at Function.ready (jquery-1.10.2.min.js:21)
at HTMLDocument.q (jquery-1.10.2.min.js:21)  

Code:

 @{
    ViewBag.Title = "Index";
  }
<!-- Include Date Range Picker -->
<link rel="stylesheet" href="../../Content/bootstrap-datepicker.css" />
<script type="text/javascript" src="../../Scripts/jquery-1.10.2.min.js">    </script>

<script type="text/javascript" src="../../Scripts/jquery-ui-1.10.0.min.js"></script>
    <script>
    $(document).ready(function() {
    $(".datepicker").datepicker({ format: 'dd/mm/yyyy', autoclose: true, todayBtn: 'linked' });
  });
</script>

 <h3>BootStrap Datetime Picker Example</h3>
<hr />
<div>Click textbox to open datetime picker: <input type="text" id="fromDate" class="datepicker" /></div>

<script type="text/javascript" src="../../Scripts/jquery.datetimepicker.js">   </script>

Answer 1

You're loading datepicker.js before the page has loaded jjquery-ui.css, jquery-1.12.4.js and query-ui.js. Place it below them, otherwise it can't extend their functionality.