Always visible jQuery DatePicker user interface

Question

How can I use jQuery's user interface to display the datepicker visible widget?

Answer 1

It's simple. Keep the jQuery code, but assign it a <div> instead of an input field.

 Date: <div id="datepicker"></div> <script> $(function() { $("#datepicker").datepicker(); }); </script> 

A functional example is on the jQuery UI webpage for the datepicker widget , and I also included it below.

 $(function() { $("#datepicker").datepicker(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div id="datepicker"></div> 

Answer 2

From the documentation :

Just call .datepicker () in the div instead of typing.

(To display the datepicker element embedded in the page, not the overlay.)

Answer 3

  .ui-datepicker { z-index: 1000; width: 17em; width:500px; padding: .2em .2em 0; display: none; position: absolute; padding: 100px 20px; top: 100px; left: 50%; margin-top: -100px; } 

I redefined the style above and now it works better