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

Question

我有两个月选择器“from”和“to”。我想 select 个月在基于“从”月份选择器的“到”月份选择器中。例如。如果 2020 年 1 月 select 在“从”月份选择器中编辑，那么“到”月份选择器应该从 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 显示。请告诉我我犯了什么错误，并就此给予指导。

Answer 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' />

Answer 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 fiddle .

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

Set month range for second jquery month picker based on first jquery month picker

javascript

jquery

jquery-ui-datepicker