javascript - 在年月变化时在打开状态下显示 Bootstrap 下拉

Question

我的代码如下，我的要求是在更改日历年、月、上一个和下一个按钮时显示打开状态的下拉列表。我通过添加此代码 $('.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>

Answer 1

在任何需要它保持打开的情况下，您只需点击下拉菜单即可。希望对您有所帮助!!

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