javascript - 在年份月份的变化中，在打开状态下显示引导下拉列表

我的代码如下，我的要求是在更改日历的Year，Month，Prev和Next按钮时显示打开状态的下拉列表。我通过添加此代码$('.dropdown-toggle').dropdown();在函数onChangeMonthYear中尝试过，但无法执行。所以有人可以帮我如何显示日历年更改时处于打开状态的下拉列表

function current() {
  var today = new Date();
  var dayOfWeekStartingSundayZeroIndexBased = today.getDay(); // 0 : Sunday ,1 : Monday,2,3,4,5,6 : Saturday
  var mondayOfWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay() + 1);
  var sundayOfWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay() + 7);

  $("#weekStartDate").val($.date(mondayOfWeek));
  $("#weekEndDate").val($.date(sundayOfWeek));
}

function prev() {
  // alert("previous clicked");
  var dt = new Date($('#weekStartDate').val());
  dt.setDate(dt.getDate() - 7); // subtract 7 days
  $('#weekStartDate').val($.date(dt));

  var enddt = new Date($('#weekEndDate').val());
  enddt.setDate(enddt.getDate() - 7); // subtract 7 days
  $('#weekEndDate').val($.date(enddt));

  highlightWeek();
}

function next() {
  //alert("next clicked");
  var dt = new Date($('#weekStartDate').val());
  dt.setDate(dt.getDate() + 7); // add 7 days
  $('#weekStartDate').val($.date(dt));

  var enddt = new Date($('#weekEndDate').val());
  enddt.setDate(enddt.getDate() + 7); // add 7 days
  $('#weekEndDate').val($.date(enddt));

  highlightWeek();
}

function highlightWeek() {
  var clkDt = new Date($('#weekStartDate').val());
  var clickDay = clkDt.getDate(); //this is the value we want to select in cal
  $('.ui-datepicker-calendar > tbody > tr').each(function() {
    $(this).children('td').each(function() {
      var dy = $(this).first('a');
      console.log('dy: ' + dy.text() + '--clickDay: ' + clickDay);
      if (dy.text() == clickDay) {
        dy.click();
      }
    });
  });
}

$.date = function(dateObject) {
  var d = new Date(dateObject);
  var day = d.getDate();
  var month = d.getMonth() + 1;
  var year = d.getFullYear();
  if (day < 10) {
    day = "0" + day;
  }
  if (month < 10) {
    month = "0" + month;
  }
  var date = month + "/" + day + "/" + year;

  return date;
};
$(function() {
  $("#btnNext").click(function() {
    next();
  });
  $("#btnPrev").click(function() {
    prev();
  })
  $('input[type=radio][name=radio1]').change(function() {
    if (this.value == 'Prev') {
      prev();
    } else if (this.value == 'Next') {
      next()
    } else {
      current();
    }
  });

  var today = new Date();
  var dayOfWeekStartingSundayZeroIndexBased = today.getDay(); // 0 : Sunday ,1 : Monday,2,3,4,5,6 : Saturday
  var mondayOfWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay() + 1);
  var sundayOfWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay() + 7);

  $("#weekStartDate").val($.date(mondayOfWeek));
  $("#weekEndDate").val($.date(sundayOfWeek));

  $("#date").datepicker();
  var startDate;
  var endDate;

  var selectCurrentWeek = function() {
    window.setTimeout(function() {
      $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
    }, 1);
  }
  $('.week-picker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    onSelect: function(dateText, inst) {
      var date = $(this).datepicker('getDate');
      startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
      endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
      var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
      $("#weekStartDate").val($.datepicker.formatDate(dateFormat, startDate, inst.settings));
      $("#weekEndDate").val($.datepicker.formatDate(dateFormat, endDate, inst.settings));
      selectCurrentWeek();
      $('input[type=radio][name=radio1]').prop('checked', false);
    },
    beforeShowDay: function(date) {
      var cssClass = '';
      if (date >= startDate && date <= endDate)
        cssClass = 'ui-datepicker-current-day';
      return [true, cssClass];
    },
    onChangeMonthYear: function(year, month, inst) {
      selectCurrentWeek();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" style="float:right;margin-right:3%;">
  <input style="cursor:pointer;" type="button" value="<" id="btnPrev" />&nbsp;
  <div class="dropdown">
    <button class="btn btn-outline-dark btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
            This Week
        </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <div class="dropdown-item"><input id="last" name="radio1" type="radio" value="Prev"> <label for="last">Last Week</label></div>
      <div class="dropdown-item"><label for="current"><input id="current" name="radio1" checked="checked" type="radio" value="Current"> This Week</label></div>
      <div class="dropdown-item"><label for="Next"><input id="Next" name="radio1" type="radio" value="Next"> Next Week</label></div>
      <hr />
      <div class="input-group">
        <input type="text" class="form-control" readonly disabled id="weekStartDate" />
        <span class="input-group-addon">-</span>
        <input type="text" class="form-control" readonly disabled id="weekEndDate" />
      </div>
      <br />
      <div class="week-picker"></div>
    </div>
  </div>
  &nbsp;<input style="cursor:pointer;" type="button" value=">" id="btnNext" />
</div>

最佳答案

您可以在任何情况下只要点击下拉菜单即可保持打开状态。希望能帮助到你！！

$('#dropdownMenuButton').trigger('click');