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,
<!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> |
Да, это именно то что нужно, Супер. Спасибо!
|
только еще один момент: вот этот параметр (data-rest="day != 1 && day !=3 && day !=5") есть пока далеко не у всех - нужна проверка на его существование в функции
|
Igorsrt,
var rest = $(this).data("rest"); if(!rest) return; |
Спасибо.
...Теперь пытаюсь все это дело на сайт свой перенести - в консоли выдает "Uncaught SyntaxError: Unexpected identifier" и не работает функция.. в чем может быть причина? |
Igorsrt,
может ` это не нравится, тогда замените на обычные кавычки и + rest+ |
подозревал, что это из-за символа ` (потому что MODX его в своих целях использует... заменил - не помогает ((
https://drive.google.com/file/d/1NT7...ew?usp=sharing |
Цитата:
|
вот так?
var fn = new Function('date', "var day = date.getDay(); return [${+rest+}, '']") так не работает |
Часовой пояс GMT +3, время: 07:39. |