How to stable the calendar and with the html input text box

Question

How to stable the jquery data picker calendar with HTML input and How can I make sure the calendar with input text box stay together?

Here is my code:

 <apex:page >      
 <script>
 $( function() {
  $( "#datepicker" ).datepicker();
  } );
 </script> 
  <p>Date: <input type="text" id="datepicker"/></p>
  </html>
 </apex:page>

Answer 1

Based on your comment, you say you haven't included jQuery, jQuery UI or the jQuery UI CSS file.

All of these components are needed to make the $(".datepicker").datepicker(); function work. You can either upload and reference these as static resources or you can link to a CDN. The links to Google's jQuery CDN are below:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />