每月的天数不显示首次加载模式引导程序的时间

Question

On my bootstrap modal. I am able to select days on each month when select a month.

Problem: When I first load up the bootstrap modal the days do not show straight away for that month. I have to select another month the re-select month I am after to get days.

Question: How am I able to get the days of month to display for the selected month that comes up when modal is open rather than me having to go and select another month first then go back.

Example Code Preview: Click Here Link now updated with working script.

Code HTML

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="page-header">
        <h3 class="page-title">Bootstrap Pop Up Modal Date Select</h3>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <select name="year" class="form-control">
                  <option>2015</option>
                  <option>2016</option>
                  <option>2017</option>
                  <option>2018</option>
                </select>
              </div>
              <div class="form-group">
                <select name="month" class="form-control">
                  <option value="1">Jan</option>
                  <option value="2">Feb</option>
                  <option value="3">Mar</option>
                  <option value="4">Apr</option>
                  <option value="5">May</option>
                  <option value="6">Jun</option>
                  <option value="7">Jul</option>
                  <option value="8">Aug</option>
                  <option value="9">Sept</option>
                  <option value="10">Oct</option>
                  <option value="11">Nov</option>
                  <option value="12">Dec</option>
                </select>
              </div>
              <div class="form-group">
                <select name="day" class="form-control">

                </select>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Code JavaScript

$('select[name="month"]').on("change", function() {
  var year = $('select[name="year"]').val();
  if (year > 0) {
    $('select[name="day"]').find("option").remove();
    var daysInMonth = new Date(year, $(this).val(), 0).getDate();
    for (var i = 1; i <= daysInMonth; i++) {
      console.log(i);
      $('select[name="day"]').append($("<option></option>").attr("value", i).text(i));
    }

  }
});

Answer 1

Force the event change after the event init:

$('select[name="month"]').on("change", function() {
  var year = $('select[name="year"]').val();
  if (year > 0) {
    $('select[name="day"]').find("option").remove();
    var daysInMonth = new Date(year, $(this).val(), 0).getDate();
    for (var i = 1; i <= daysInMonth; i++) {
      console.log(i);
      $('select[name="day"]').append($("<option></option>").attr("value", i).text(i));
    }

  }
});
$('select[name="month"]').trigger('change');

The example: https://jsfiddle.net/xhqj9trd/