Несколько месяцев в одном поле - выберите год и месяц для каждого календаря - PullRequest
Новая
       9

Несколько месяцев в одном поле - выберите год и месяц для каждого календаря

0 голосов
/ 15 сентября 2018

У меня есть одно поле с датой .... и я сделал этот код:

Ссылка на 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">

1 Ответ

0 голосов
/ 15 сентября 2018

Я знаю, что ответ не совсем то, что мне нужно, но я нашел другой способ для этого: 

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

Вы можете изменить год в «Дата окончания»:)

...