代码之家 › 专栏 › 技术社区 › kibus90

单个字段中有多个月-为每个日历选择年和月

jquery-ui-datepicker datepicker jquery javascript

0

kibus90 · 技术社区 · 6 年前

我有一个带日期的字段。。。。我做了个密码:

链接到 JSFiddle

但我想为每个多重日历选择年和月(如下图所示):

(用油漆编辑):)

此处代码:

$("#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">

1 回复 | 直到 6 年前

1

0

kibus90 6 年前

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

$("#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">

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