根据第一个 jquery 月份选择器设置第二个 jquery 月份选择器的月份范围答案

【问题标题】：Set month range for second jquery month picker based on first jquery month picker根据第一个 jquery 月份选择器设置第二个 jquery 月份选择器的月份范围
【发布时间】：2020-09-02 15:06:54
【问题描述】：

我有两个月选择器“从”和“到”。我想根据“从”月份选择器在“到”月份选择器中选择月份。例如。如果在“从”月份选择器中选择了 2020 年 1 月，则“至”月选择器应该从 2020 年 2 月开始选择，并且范围应该最多可达 3 个月，即到 2020 年 4 月。

$("#dt_st").MonthPicker({
  Button: false,
  MonthFormat: "yy-mm",
  autoclose: true
});
$('body').on('focus', '.end_date', function() {
  var frm_month;
  frm_month = document.getElementById().value;
  $('.end_date').MonthPicker({
    Button: false,
    MonthFormat: "yy-mm",
    MinMonth: frm_month;
    autoclose: true
  });
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<script type="text/javascript" src="https://rawgithub.com/zorab47/jquery.ui.monthpicker/master/jquery.ui.monthpicker.js"></script>

<input type='text' id='dt_st' />
<input type='text' class='end_date' />

我尝试使用 MinMonth，但它没有获取值，并且日历也没有从 end_date 显示。请告诉我我犯了什么错误并对此给予指导。

【问题讨论】：

你似乎在document.getElementById().value中缺少一个ID
你能做一个小提琴吗？

标签： javascript jquery jquery-ui-datepicker

【解决方案1】：

将onSelect 添加到$("#dt_st").monthpicker，如下所示。您可以将minDate maxDate 更新为$('.end_date').monthpicker('option', 'minDate', minDate);。

您不需要$('body').on('focus',，只需在$("#dt_st").monthpicker 之后初始化$('.end_date').monthpicker。

在下面试试。

$("#dt_st").monthpicker({
  Button: false,
  MonthFormat: "yy-mm",
  autoclose: true,
  onSelect: function(text, inst) {
    var minDate = new Date(inst.selectedYear, inst.selectedMonth + 1, 1);
    var maxDate = new Date(inst.selectedYear, inst.selectedMonth + 3, 1);
    $('.end_date').monthpicker('option', 'minDate', minDate);
    $('.end_date').monthpicker('option', 'maxDate', maxDate);
  }
});

$('.end_date').monthpicker({
  Button: false,
  MonthFormat: "yy-mm",
  autoclose: true
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<script type="text/javascript" src="https://rawgithub.com/zorab47/jquery.ui.monthpicker/master/jquery.ui.monthpicker.js"></script>

<input type='text' id='dt_st' />
<input type='text' class='end_date' />

【讨论】：

【解决方案2】：

您可以使用OnAfterChooseMonth 事件并在第一个月选择时，使用适当的值初始化第二个。

$("#from").MonthPicker({
     OnAfterChooseMonth: function(selectedDate) {
      min_month = selectedDate.getMonth() - new Date().getMonth() 
       $("#to").MonthPicker({
          MinMonth:min_month, 
          MaxMonth:min_month+3,
       });
    }
});

JSFiddle

我用过This小提琴。

【讨论】：