在单个字段中输入多个月-为每个日历选择年份和月份

Question

我有一个带日期的字段...。我编写了代码：

链接到JSFiddle

但是我想为每个日历选择年份和月份（如下图所示）：

（在Paint中编辑）：）

可以得到吗？：）

此处的代码：

$("#date").datepicker({
    numberOfMonths: 2,
dateFormat: 'mm.yy',
changeYear: true,
changeMonth: true,
yearRange: '-50:' + new Date().getFullYear(),
firstDay: 1,
onChangeMonthYear: function(){
setTimeout(function(){
   $('<div class="ui-widget-header addon-header">Start date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-first');
     $('<div class="ui-widget-header addon-header">End date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-last');
    },010);
},


    onSelect: function( selectedDate ) {
    setTimeout(function(){
    $('<div class="ui-widget-header addon-header">Start date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-first');
     $('<div class="ui-widget-header addon-header">End date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-last');
    },100);
        if(!$(this).data().datepicker.first){
            $(this).data().datepicker.inline = true
            $(this).data().datepicker.first = selectedDate;
        }else{
            if(selectedDate > $(this).data().datepicker.first){
                $(this).val($(this).data().datepicker.first+" - "+selectedDate);
            }else{
                $(this).val(selectedDate+" - "+$(this).data().datepicker.first);
            }
            $(this).data().datepicker.inline = false;
        }
    },
    onClose:function(){
        delete $(this).data().datepicker.first;
        $(this).data().datepicker.inline = false;
    }
})

$('#date').datepicker().bind('click', function() {
   $('<div class="ui-widget-header addon-header">Start date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-first');
     $('<div class="ui-widget-header addon-header">End date</div>').prependTo('.ui-datepicker-group.ui-datepicker-group-last');
});

.addon-header {
    text-align: center;
    padding: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="date"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Answer 1

我知道，答案不完全是我所需要的，但是我找到了不同的方法：

$("#date").datepicker({
  dateFormat: 'mm.yy',
  changeYear: true,
  changeMonth: true,
  showButtonPanel: true,
  yearRange: '-50:' + new Date().getFullYear(),
  firstDay: 1,
  beforeShow: function() {
  var thisfield=$(this);
  setTimeout(function() {
  if(!thisfield.val()) {
     if(!$('.addon-header').length){
     $('<div class="ui-widget-header addon-header">Start date</div>').insertBefore('table.ui-datepicker-calendar');
     }
    } else{
    thisfield.val('');
    if(!$('.addon-header').length){
     $('<div class="ui-widget-header addon-header">Start date</div>').insertBefore('table.ui-datepicker-calendar');
     }
    }
    },200);
  },
  onChangeMonthYear: function() {
  var thisfield=$(this);
  setTimeout(function() {
  if(!thisfield.val() || thisfield.val().length > 12) {
     if(!$('.addon-header').length){
     $('<div class="ui-widget-header addon-header">Start date</div>').insertBefore('table.ui-datepicker-calendar');
     }
    } else{
    if(!$('.addon-header').length){
     $('<div class="ui-widget-header addon-header">End date</div>').insertBefore('table.ui-datepicker-calendar');
     }
    }
    },200);
  },
  onSelect: function(selectedDate) {
    if (!$(this).data().datepicker.first) {
      $(this).data().datepicker.inline = true
      $(this).data().datepicker.first = selectedDate;
       setTimeout(function() {
     $('<div class="ui-widget-header addon-header">End date</div>').insertBefore('table.ui-datepicker-calendar');
     },200)
    } else {
      if (selectedDate > $(this).data().datepicker.first) {
        $(this).val($(this).data().datepicker.first + " - " + selectedDate);
      } else {
        $(this).val(selectedDate + " - " + $(this).data().datepicker.first);
      }
      $(this).data().datepicker.inline = false;
    }
  },
  onClose: function() {
    delete $(this).data().datepicker.first;
    $(this).data().datepicker.inline = false;
  }
})

.addon-header {
  text-align: center;
  padding: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="date"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

您可以在“结束日期”中更改年份：）