Datepicker Change

Bootstrap keep picker open

by shanabus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="dropdown" id="myDropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
  <li>
      <table class="table">
      <tr>
        <td>ABC</td>
        <td class="datepicker-field"><input class="form-control" type="text" /></td>
        <td>DEFG</td>
      </tr>
      </table>
  </li>
  </ul>
  </div>

JavaScript

$('.datepicker-field input').datepicker({
  }).on('change', function(e) {
    // ensures the dropdown is hidden
    $(this).datepicker('hide');
  });