I'm using the bootstrap-datepicker library to create a datepicker to let the user choose the date. I would like to always display the picker, not just when the user clicks on an input field or a button.
How can I do this?
I'm using the bootstrap-datepicker library to create a datepicker to let the user choose the date. I would like to always display the picker, not just when the user clicks on an input field or a button.
How can I do this?
First, make sure you're using the latest version of the library, which is currently 1.2.0. The original version by eyecon is pretty poorly documented and I don't know if it can do what you want.
There are a couple of ways to solve your problem. Use whichever of these you prefer:
Create an embedded/inline datepicker and then add a
changeDate
handler to it. You'll want HTML that's something likeand the following JavaScript:
Note that
e.format
is a convenience method documented on the events page of the documentation, and when invoked as it is here, will return a string representing the selected date formatted according to the datepicker's format string.You'll need to use your own CSS to appropriately position the datepicker if you take this approach.
Here's a JSFiddle demonstrating this in action: http://jsfiddle.net/4wFJc/3/
Use an ordinary input datepicker, explicitly show it on creation, and then replace the datepicker's
hide()
method with a no-op so that it can never be hidden.Needless to say, this is an ugly hack that may well cease to work in a future version of the library. I wouldn't suggest using it. It does have the (doubtful) advantage over the inline-block approach that it positions the datepicker for you and includes an arrow connecting it to your
<input>
, though, so I include it for completeness.You'll need HTML something like:
and the following JavaScript:
Here's a JSFiddle demonstrating this approach in action: http://jsfiddle.net/4wFJc/4/
If you are using this datepicker : http://www.eyecon.ro/bootstrap-datepicker/
You can see there is a method : .datepicker('show')
Call this on datepicker object when your $(document).ready()
I don't use this datepicker so I am not familiar how it is used. The quick and dirty way would be giving the datepicker dropdown-menu class a
.datepicker.CLASSNAME {display: block !important;}
. This way the dropdown will always be visible.