Menu
How can I use jQuery UI to display an always-visible datepicker widget?
895
Simply call . datepicker() on a div instead of an input. (To display the datepicker embedded in the page instead of in an overlay.) Save this answer.
The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
Syntax: $(". selector"). datepicker("hide");
We can include datepicker feature in our javascript program by specifying the below inside the <head> and <body> tags. Inside <head> we have to use “datepicker. min. css” and inside <body> tag use “datepicker.
It's simple. Keep your jQuery code, but assign it to a <div> instead of an input box.
Date: <div id="datepicker"></div> <script> $(function() { $("#datepicker").datepicker(); }); </script> A functional example lives at the jQuery UI webpage for the datepicker widget, and I've also included one 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>From the documentation:
Simply call .datepicker() on a div instead of an input.
(To display the datepicker embedded in the page instead of in an overlay.)
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
