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

问题描述

我有两个月的选择者“从”和“到”。我想根据“来自”月份选择器在“至”月份选择器中选择月份。例如。如果在“自”月份选择器中选择了“ 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,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也不会显示日历。请告诉我我在犯什么错误，并为此提供指导。

解决方法

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

您不需要$('body').on('focus',，只需在$('.end_date').monthpicker之后初始化$("#dt_st").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);
    $('.end_date').monthpicker('option','maxDate',maxDate);
  }
});

$('.end_date').monthpicker({
  Button: false,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' />

,

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

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

JSFiddle

我用了This小提琴。