Jquery UI Datepicker - Period

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

by Maksim

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/8de40b26479c406ee9cd6f9b4b3f4ad05370a024/jquery.datepicker.extension.range.min.js"></script>
Выберите период:
<br>
<br>
<div id="date_range"></div>
<br>
<div class="start">
  <input name="startDate">
  <input type="text" class="day" placeholder="День недели">
</div>
<div class="end">
  <input name="endDate">
  <input type="text" class="day" placeholder="День недели">
</div>

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

JavaScript

$(function() {
  $('#date_range').datepicker({
    range: 'period', // режим - выбор периода
    dateFormat: "yy-mm-dd",
    numberOfMonths: 2,
    onSelect: function(dateText, inst, extensionRange) {
    	// extensionRange - объект расширения
      $('[name=startDate]').val(extensionRange.startDateText);
      $('[name=endDate]').val(extensionRange.endDateText);
      setWeek();
    }
  });

  $('#date_range').datepicker('setDate', ['+4d', '+8d']);

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

function setWeek() {
	var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  var StartDate = $('[name=startDate]').val();
  var EndDate = $('[name=endDate]').val();
  
  var StartDateWeek = (new Date(StartDate)).getDay();
  var EndDateWeek = (new Date(EndDate)).getDay();
  
  $('.start .day').val(dayNames[StartDateWeek]);
  $('.end .day').val(dayNames[EndDateWeek]);
}

setWeek();