Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Always display bootstrap-datepicker, not just on focus

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?

Picture of a datepicker

like image 282
user3003810 Avatar asked Dec 08 '13 08:12

user3003810


1 Answers

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:

  1. Create an embedded/inline datepicker and then add a changeDate handler to it. You'll want HTML that's something like

    <input id="my-input">
    <div id="my-datepicker"></div>
    

    and the following JavaScript:

    $("#my-datepicker").datepicker().on('changeDate', function (e) {
        $("#my-input").text(e.format());
    });
    

    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/

  2. 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:

    <input id="my-input">
    

    and the following JavaScript:

    $input = $("#my-input");
    $input.datepicker();
    $input.data('datepicker').hide = function () {};
    $input.datepicker('show');
    

    Here's a JSFiddle demonstrating this approach in action: http://jsfiddle.net/4wFJc/4/

like image 69
Mark Amery Avatar answered Oct 12 '22 20:10

Mark Amery