CODEWITHSUNDEEP
jquerytwitter-bootstrapdatepicker
Labanino
Labanino

Reputation: 3960

Fireup boostrap datepicker by clicking the input instead of the button icon

I want to fire up the datepicker by clicking the input instead of the button icon:

http://jsbin.com/oqiger/3/edit

Thanks.

Upvotes: 0

Views: 463

Answers (1)

mccannf
mccannf

Reputation: 16659

This does not appear to be supported in the plugin.

Instead, you can assign an id to the input field, and on focus(), trigger a click event on the button.

<div class="outer"> 

  <div id="main-content-wrap" class="row-fluid">
    <section id="main-content" class="span6 offset3">
      <h3 id="demo">Demo</h3>
      <div class="well">
        <div class="input-append" id="datetimepicker2">
          <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text" id="dtp_input">
          <span class="add-on"> <i data-date-icon="icon-calendar" data-time-icon="icon-time" class="icon-calendar"> </i> </span> </div>
      </div>
      <script type="text/javascript">
      $(function() {
        $('#datetimepicker2').datetimepicker({
          language: 'en',
          pick12HourFormat: true
        });
        $("#dtp_input").focus(function() {
          $(this).next(".add-on").click();
        });
      });
    </script> 
    </section>
  </div>
</div>

Updated your JSBin here: http://jsbin.com/oqiger/9/edit

Upvotes: 1

Related Questions