Massimiliano Militello Massimiliano Militello - 1 month ago 10
jQuery Question

jQuery datepicker doesn't work in a page

I'm trying to use a jQuery datepicker (the one showed here https://jqueryui.com/datepicker/#default) in my page. But it really doesn't work! When I click on the textbox, any calendar is showed.

This is the code of my page:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

<title>Dashboard</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- MetisMenu CSS -->
<link href="css/metisMenu.min.css" rel="stylesheet">

<!-- Timeline CSS -->
<link href="css/timeline.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/startmin.css" rel="stylesheet">

<!-- Morris Charts CSS -->
<link href="css/morris.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">

</head>
<body>


<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">

<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Reports e stampe</h1>
</div>
</div>

<form method="post" action="page1.php" target="_blank">
<p>Date: <input type="text" id="datepicker"></p>
</form>
</div>
</div>

</div>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="js/metisMenu.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="js/startmin.js"></script>

</body>
</html>


Thank you for your help!!

Answer

I see you're including jQuery twice (on header and at the bottom). That could defitively be the problem. First thing to try is to delete the last jQuery reference.

Next step would be a refactoring to move all scripts references and code to the very bottom of the page to improve page load performance but that's not strictly related to your problem, just an improvement.