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

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

Примеры и описание на jqueryui.com, скачать jquery-ui-1.12.1.zip.

1

Подключение и русификация

<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
2

Открытие календаря по иконки

<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
3

Всегда видимый календарь

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

<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
4

Отключить прошедшие дни

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

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

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

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

Выбор даты в интервале

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

$(function(){
	$("#datepicker").datepicker({
		minDate: 0,
		maxDate: "+20D"
	});
});
JS
6

Отключить выходные

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

Отключить праздничные дни

Список праздничных дат задается в массиве 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
19.08.2019, обновлено 27.08.2019 303

Поделится

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

Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк, авто...
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет...
Данная PHP функция преобразует временную метку unix timestamp в привычный формат.
Набор PHP функций для работы с файлами и директориями, получение списка файлов в папке, безопасное сохранение файлов.
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...