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://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<script src="https://rawgit.com/Artemeey/8bacd37964a8069a2eeee8c9b0bd2e44/raw/0b605f41de5a62ad267dc2cd554f4715efd58e75/jquery.datepicker.extension.range.js"></script>
Выбор периода:
<input name="startDate">
<input name="endDate">
<br>
<br>
<div id="date_range"></div>

CSS

.ui-datepicker{ font-size:12px; }

.ui-datepicker td {
  border-bottom: 1px solid #FFF;
  padding: 0;
}

.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;
}

JavaScript

$(function() {
  $('#date_range').datepicker({
    range: 'period', // новая опция
    numberOfMonths: 1,
    changeYear: true,
    changeMonth: true,
    onSelect: function(dateText, inst, extensionRange) {
    	// extensionRange - новый аргумент
      $('[name=startDate]').val(extensionRange.startDateText);
      $('[name=endDate]').val(extensionRange.endDateText);
    }
  });

  $('#date_range').datepicker('setDate', ['-3w +1d', '+1w']);

  // объект расширения (хранит состояние календаря)
  var extensionRange = $('#date_range').datepicker('widget').data('datepickerExtensionRange');
  if(extensionRange.startDateText) $('[name=startDate]').val(extensionRange.startDateText);
  if(extensionRange.endDateText) $('[name=endDate]').val(extensionRange.endDateText);
});