Показать сообщение отдельно
  #1 (permalink)  
Старый 01.11.2019, 16:53
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Datepicker - динамическое изменение нерабочих дней
Здравствуйте!
Есть список сотрудников. И есть некая форма с календарем в ней.
Нужно, что бы при клике на сотрудника, в календаре отображались именно его выходные.
<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<title>Тест</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<style>
		</style>
	</head>
	<body>
		<a href="#contact_new" data-doctor="Иванов" data-rest="day != 1 && day !=3 && day !=5">Иванов</a>
		<a href="#contact_new" data-doctor="Петров" data-rest="day != 2 && day !=5">Петров</a>
		<a href="#contact_new" data-doctor="Сидоров" data-rest="day != 4 && day !=0">Сидоров</a>
		<form id="contact_new">
			<div class="datepicker" id="datepicker"></div>
			<input type="text" name="datepicker" class="input-page" autocomplete="off">
			<input type="text" class="docname" name="docname" readonly>
		</form>
		
		<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>
			$(document).ready(function() {
				var datepicker =  $('#datepicker');
				datepicker.datepicker({
					firstDay: 1,
					beforeShowDay: function(date) {
						var day = date.getDay();
						return [(day != 6 && day !=0), ''];
					},        
					autoSize: true,
					minDate: 0,
					dateFormat: 'dd.mm.yy',
					monthNames : ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
					dayNamesMin : ['вс','пн','вт','ср','чт','пт','сб'],
					onSelect: function(dateText, inst) {
						$("input[name='datepicker']").val(dateText);
					},
				});
				var datepic = datepicker.datepicker("getDate");
				$("input[name='datepicker']").val($.datepicker.formatDate("dd.mm.yy", datepic));
				$("input[name='datepicker']").on('keyup', function() {
					var valInp = $(this).val();
					datepicker.datepicker( "setDate", valInp);
				});
			});
		</script>
		<!-- другие скрипты -->
		<script>
			$(function(){
				
				$("a[href='#contact_new']").click(function(){
					$("#contact_new .docname").val($(this).data("doctor"));
					return true;
				});
				
			});
		</script>
	</body>
</html>


data-rest="day != 1 && day !=3 && day !=5" - это как раз список выходных (можно и по другому этот список представить, главное что бы сработало)

Последний раз редактировалось Igorsrt, 01.11.2019 в 23:54.
Ответить с цитированием