uxsolutions / bootstrap-datepicker

A datepicker for twitter bootstrap (@twbs)
Apache License 2.0
12.66k stars 6.06k forks source link

date-picker breaks click-handler on submit button #2642

Open chrislarsenqlik opened 2 years ago

chrislarsenqlik commented 2 years ago

Expected behaviour

Date-picker should not break .click() handlers for other objects on the page.

Actual behaviour

My submit button does not get a click handler assigned when i reference the bootstrap-datepicker.min.js module. The datepicker works fine but the submit button does not.

When I remove the script src to bootstrap-datepicker.min.js and the datepicker() method, the submit button click handler works fine again.

Datepicker version used

1.9.0

Details:

I inserted date-picker at the end of my like this:

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js">

My HTML looks like this:

      <div class="form-group" id="datepicky">
        <label for="eventFormControlInputDate">Event Date</label>
        <input type="text" data-provide="datepicker" class="form-control datepicker" id="eventFormControlInputDate" placeholder="Paste a Date event made">
      </div>

      <div class="form-group">
        <input type="button" class="btn btn-primary" id="submitBtn" name="submitBtn" value="submit">
      </div>

My javascript looks like this:

      $('#datepicky').datepicker();

      $("#submitBtn").on( "click", function() {
            console.log('clicked')
      });

Any Suggestions?? I feel like i must be missing something. Do i need to move the script reference or method somewhere?