Jquery UI Datepicker - Period

Расширение Datepicker для выбора периода

by tanya_22

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css">
<script src="https://rawgit.com/Artemeey/5ebc39370e568c34f03dce1639cabee8/raw/47db88126d546652b2b61f287b509386a0ecb167/jquery.datepicker.extension.range.min.js"></script>
Выберите период:
<br>
<br>
<input id="date_range" readonly>
<br>
<br> Выберите несколько дат:
<br>
<br>
<input id="date_range_multiple" readonly>

CSS

.ui-datepicker .selected-start:not(.selected-end) a,
.ui-datepicker .selected-end:not(.selected-start) a {
  background: #F3FDD5;
}

.ui-datepicker .selected.first-of-month:not(.selected-start) a {
  border-left: 2px dotted #D4E7F6;
  padding-left: 1px;
}

.ui-datepicker .selected.last-of-month:not(.selected-end) a {
  border-right: 2px dotted #D4E7F6;
  padding-right: 1px;
}

#date_range_multiple{ width: 350px; }

JavaScript

$(function() {
  $('#date_range').datepicker({
    range: 'period', // режим - выбор периода
    yearRange: "-4:+2",
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd.mm.yy",
    onSelect: function(dateText, inst, extensionRange) {
      // extensionRange - объект расширения
      $('#date_range').val(extensionRange.startDateText + ' - ' + extensionRange.endDateText);
    }
  });

  $('#date_range_multiple').datepicker({
    range: 'multiple', // режим - выбор периода
    onSelect: function(dateText, inst, extensionRange) {
      // extensionRange - объект расширения
      $('#date_range_multiple').val(extensionRange.datesText.join(', '));
    }
  });
});