Календарь jQuery UI Datepicker

DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.

Примеры и описание на jqueryui.com.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
/* Локализация datepicker */
$.datepicker.regional['ru'] = {
	closeText: 'Закрыть',
	prevText: 'Предыдущий',
	nextText: 'Следующий',
	currentText: 'Сегодня',
	monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
	monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
	dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
	dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
	dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
	weekHeader: 'Не',
	dateFormat: 'dd.mm.yy',
	firstDay: 1,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['ru']);
</script>
HTML
<input type="text" id="datepicker">

<script>
$(function(){
	$("#datepicker").datepicker();
});
</script>
HTML
<input type="text" id="datepicker">
HTML
$(function(){
	$("#datepicker").datepicker({
		showOn: "button",
		buttonImage: "https://snipp.ru/demo/437/calendar.gif",
		buttonImageOnly: true,
		buttonText: "Выбрать дату"
	});
});
JS
.ui-datepicker-trigger {
	margin-left: 5px;
	position: relative;
	top: 3px;
	cursor: pointer;
}
CSS

Чтобы выбранная дата отправлялась с формой понадобится добавить скрытое поле и обработчик его заполнения.

<div id="datepicker"></div>
<input type="hidden" id="datepicker_value" value="01.08.2019">
HTML
$(function(){
	$("#datepicker").datepicker({
		onSelect: function(date){
			$('#datepicker_value').val(date)
		}
	});
	$("#datepicker").datepicker("setDate", $('#datepicker_value').val());
});
JS
$(function(){
	$("#datepicker").datepicker({
		minDate: 0
	});
});
JS

Если нужно отключить прошедшие дни включая сегодняшний:

$(function(){
	var date = new Date();
	date.setDate(date.getDate() + 1);

	$("#datepicker").datepicker({
		minDate: date
	});
});
JS

Например, в календаре будут доступны даты с ближайшего понедельника:

$(function(){
	var date = new Date();
	var day = 1; // 1 - пн, 2 - вт и т.д.
	date.setDate(date.getDate() + (day - 1 - date.getDay() + 7) % 7 + 1);

	$("#datepicker").datepicker({
		minDate: date
	});
});
JS

20 первых дней с текущей даты.

$(function(){
	$("#datepicker").datepicker({
		minDate: 0,
		maxDate: "+20D"
	});
});
JS
$(function(){
	$("#datepicker").datepicker({
		beforeShowDay: function(date){
			var dayOfWeek = date.getDay();
			if (dayOfWeek == 0 || dayOfWeek == 6){
				return [false];
			} else {
				return [true];
			}
		}
	});
});
JS

Отключить субботы

$(function(){
	$("#datepicker").datepicker({
		beforeShowDay: function(date){
			var dayOfWeek = date.getDay();
			if (dayOfWeek == 6){
				return [false];
			} else {
				return [true];
			}
		}
	});
});
JS

Отключить воскресения

$(function(){
	$("#datepicker").datepicker({
		beforeShowDay: function(date){
			var dayOfWeek = date.getDay();
			if (dayOfWeek == 0){
				return [false];
			} else {
				return [true];
			}
		}
	});
});
JS

Список праздничных дат задается в массиве holidays[число, месяц], без ведущих нулей.

var holidays = [
	[1,1],
	[7,1],
	[23,2],
	[8,3],
	[1,5],
	[9,5],
	[12,6],
	[4,11]
];

$(function(){
	$("#datepicker").datepicker({
		beforeShowDay: function(date){
			for (var i = 0; i < holidays.length; i++) {
				if (holidays[i][0] == date.getDate() && holidays[i][1] - 1 == date.getMonth()) {
					return [false];
				}
			}
			return [true];
		}
	});
});
JS

Чтобы заблокировать даты из списка/массива, нужно применить следующий код:

var dates = ["2022-10-05","2022-10-07","2022-10-09"];

$(function(){
	$("#datepicker").datepicker({
		beforeShowDay: function(date){
			var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
			return [dates.indexOf(string) == -1]
		}
	});
});
JS

Если массив c датами формируется на сервере из базы данных и PHP, то можно его передать в JS в виде JSON:

$dates = array(
	date('Y-m-d', strtotime('+1 day')),
	date('Y-m-d', strtotime('+3 day')),
	date('Y-m-d', strtotime('+5 day')),
);
PHP
<script>
var dates = <?php echo json_encode($dates, JSON_UNESCAPED_UNICODE); ?>;

$(function(){
	$("#datepicker").datepicker({
		beforeShowDay: function(date){
			var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
			return [dates.indexOf(string) == -1]
		}
	});
});
</script>
HTML
19.08.2019, обновлено 01.04.2022
57801

Комментарии 3

Жора Дорфман Жора Дорфман
19 ноября 2020 в 22:21
+1
Приветствую! Курю мануал 3й день и пока не разобрался. Может, подсткажете?
Есть начальная дата и конечная. По ним 2 вопроса:
1) Как высчитать количество дней между датами?
2) Как в календаре с конечной датой блокировать даты, которые раньше, чем я уже выбрал в «начальном» календаре? То есть если я выбрал начальную дату 1 декабря, то в календаре конечной даты надо заблокировать все даты до 1 декабря.
Кусок кода прилагаю:
	       <script>
$(function () {
$('#welcome').datetimepicker({
locale: 'ru',
format: 'DD.MM.YYYY',
minDate: new Date,
});
$('.glyphicon-remove').click(function () {
$('#welcome').data("DateTimePicker").clear();
});
});
</script>
<script>
$(function () {
$('#perenos').datetimepicker({
locale: 'ru',
format: 'DD.MM.YYYY',
minDate: new Date,
});
$('.glyphicon-remove').click(function () {
$('#perenos').data("DateTimePicker").clear();
});
});
</script>
Жора Дорфман Жора Дорфман
20 ноября 2020 в 17:57
+3
Хмм... А тут есть вообще-то хоть кто-то живой кроме меня?

, чтобы добавить комментарий.

Другие публикации

Вывод даты с русскими месяцами
PHP-функция для вывода даты в привычном формате из метки unix timestamp.
3974
+4
Заполненные PHP-массивы для дат
Заполненные PHP-массивы с элементами дат для проверки данных, операций с датами, вывода списков в формах и т.д.
4033
+1
Операции с датами и временем Unixtime в PHP
Unix-время (англ. Unix time, также POSIX-время) — система описания моментов во времени. Определяется как количество...
8364
+5
Работа с массивами PHP – создание, наполнение, удаление
Основные примеры работы с массивами PHP. Создание, наполнение, извлечение удаление значений.
65135
+10
Выполнение заданий по Cron
Cron — UNIX-программа, которая используются для периодического выполнения заданий в определённое время. Расписание и действия описываются инструкциями в файлах crontab, их можно посмотреть через SSH,...
18519
+2
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
30319
+31