Jquery UI Datepicker - Multiple
Расширение 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>
Выберите 5 любимых дат:
<br>
<br>
<div id="date_range"></div>
<br>
<textarea name="multipleDate"></textarea>
CSS
textarea {
height: 90px;
}
JavaScript
$(function() {
$('#date_range').datepicker({
range: 'multiple', // режим - выбор нескольких дат
range_multiple_max: '30', // макимальное число выбираемых дат
onSelect: function(dateText, inst, extensionRange) {
// extensionRange - объект расширения
$('[name=multipleDate]').val(extensionRange.datesText.join('\n'));
}
});
// выделить послезавтра и следующие 2 дня
$('#date_range').datepicker('setDate', ['+2d', '+3d', '+4d']);
// объект расширения (хранит состояние календаря)
var extensionRange = $('#date_range').datepicker('widget').data('datepickerExtensionRange');
if (extensionRange.datesText) $('[name=multipleDate]').val(extensionRange.datesText.join('\n'));
});