01.11.2019, 16:53
|
|
Профессор
|
|
Регистрация: 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.
|
|
02.11.2019, 00:42
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Igorsrt,
<!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>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/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>
$(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"));
var rest = $(this).data("rest");
var fn = new Function('date', `var day = date.getDay();
return [${rest}, '']`)
$('#datepicker').datepicker( "option", "beforeShowDay", fn );
return true;
});
});
</script>
</body>
</html>
|
|
02.11.2019, 09:24
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
Да, это именно то что нужно, Супер. Спасибо!
|
|
02.11.2019, 10:10
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
только еще один момент: вот этот параметр (data-rest="day != 1 && day !=3 && day !=5") есть пока далеко не у всех - нужна проверка на его существование в функции
|
|
02.11.2019, 10:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Igorsrt,
var rest = $(this).data("rest");
if(!rest) return;
|
|
02.11.2019, 11:41
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
Спасибо.
...Теперь пытаюсь все это дело на сайт свой перенести - в консоли выдает "Uncaught SyntaxError: Unexpected identifier" и не работает функция.. в чем может быть причина?
|
|
02.11.2019, 12:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Igorsrt,
может ` это не нравится, тогда замените на обычные кавычки и + rest+
|
|
02.11.2019, 13:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Igorsrt
|
|
заменил
|
 |
|
02.11.2019, 13:15
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
вот так?
var fn = new Function('date', "var day = date.getDay();
return [${+rest+}, '']")
так не работает
Последний раз редактировалось Igorsrt, 02.11.2019 в 13:22.
|
|
|
|
