Jquery UI Datepicker - Period
Расширение Datepicker для выбора периода
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>
<input name="startDate">
<input name="endDate">
<div class="count-active">
</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() {
var array = ["2016-11-20","2016-11-25","2016-12-03"]
$('#date_range').datepicker({
range: 'period', // режим - выбор периода
numberOfMonths: 2,
dateFormat: "yy-mm-dd",
minDate: 0,
onSelect: function(dateText, inst, extensionRange) {
// extensionRange - объект расширения
$('[name=startDate]').val(extensionRange.startDateText);
$('[name=endDate]').val(extensionRange.endDateText);
// Подсчет кол-ва дней
var timeDiff = Math.abs(extensionRange.endDate.getTime() - extensionRange.startDate.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
$('.count-active').text(diffDays);
}
});
$('#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);
// затемнение дат
$('#date_range').datepicker('option','beforeShowDay',
function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ,"", null ]
}
);
});