Календарь 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 = ["2023-02-06","2023-02-08","2023-02-10"];

$(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
62846

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

Жора Дорфман Жора Дорфман
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
Хмм... А тут есть вообще-то хоть кто-то живой кроме меня?
Шухрат Кулбаев Шухрат Кулбаев
11 ноября 2022 в 15:41
0
Как отключить выходные и праздничные дни одновременно? Если писать два кода одновременно то работает тот код который написано первым.
Пока сделал все даты связанные с выходными праздничными, но это очень долго писать и еще код становиться слишком большим.
Vyacheslav Scream Vyacheslav Scream
10 января 2023 в 13:42
0
Пользуйтесь)
$(function () {
var dater = new Date();
dater.setDate(dater.getDate() + 4);
$("#datepicker").datepicker({
beforeShowDay: function (date) {
var dayOfWeek = date.getDay();
if (dayOfWeek == 0 || dayOfWeek == 6) {
return [false];
} else {
return [true];
}
},
minDate: dater
});
});
Vito Vito
10 января 2023 в 22:37
0
Приветствую, может кто-то в курсе. Как именно можно высчитать количество рабочих дней в месяце до выбранной даты. Разумеется не учитывая выходные и праздничные дни.
Например я выбираю 20 января, где 1-8 и 14-15 числа не учитываться в подсчете.
Vito Vito
24 января 2023 в 22:58
0
    function calculateWorkingDays() {
let datePickerDw = $("#input-date-of-dismissal-td").datepicker("getDate");
// Получить первый день месяца
let firstDayOfMonth = datePickerDw;
// Получение выбранной даты из панели выбора даты
let selectedDate = datePickerDw;
let yyyy = new Date().getFullYear();

// Массив гос. праздников.
let unrecordedDays = [
new Date(yyyy, 0, 2).getTime(),
new Date(yyyy, 0, 3).getTime(),
new Date(yyyy, 0, 4).getTime(),
new Date(yyyy, 0, 5).getTime(),
new Date(yyyy, 0, 6).getTime(),
new Date(yyyy, 1, 23).getTime(),
new Date(yyyy, 1, 24).getTime(),
new Date(yyyy, 2, 8).getTime(),
new Date(yyyy, 4, 1).getTime(),
new Date(yyyy, 4, 8).getTime(),
new Date(yyyy, 4, 9).getTime(),
new Date(yyyy, 5, 12).getTime(),
new Date(yyyy, 10, 6).getTime()
];

// Счетчик рабочих дней с проверкой на выходной и на праздник.
let start = new Date(firstDayOfMonth.getFullYear(), firstDayOfMonth.getMonth(), 1);
let end = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
let workingDays = -1;
while (start <= end) {
if (start.getDay() !== 0 && start.getDay() !== 6 && !unrecordedDays.includes(start.getTime())) {
workingDays++;
}
start.setDate(start.getDate() + 1);
}
$("#numbers-days-worked-td").val(workingDays);
return workingDays;
}
Запускаем через
onSelect: function() {
calculateWorkingDays();
}

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

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

Вывод даты с русскими месяцами
PHP-функция для вывода даты в привычном формате из метки unix timestamp.
4389
+4
Заполненные PHP-массивы для дат
Заполненные PHP-массивы с элементами дат для проверки данных, операций с датами, вывода списков в формах и т.д.
4649
+2
Операции с датами и временем Unixtime в PHP
Unix-время (англ. Unix time, также POSIX-время) — система описания моментов во времени. Определяется как количество...
11577
+8
Работа с массивами PHP – создание, наполнение, удаление
Основные примеры работы с массивами PHP. Создание, наполнение, извлечение удаление значений.
72822
+10
Выполнение заданий по Cron
Cron — UNIX-программа, которая используются для периодического выполнения заданий в определённое время. Расписание и действия описываются инструкциями в файлах crontab, их можно посмотреть через SSH,...
25219
+2
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
33624
+33