16 февраля 2022 в 15:21
Ребята третий день не могу решить этот вопрос!
Подключен модуль DatePopUp
В форме создания ноды работает исправно безотказно.
Но появилась необходимость прикрутить этот календарь к обычному полю input прописанному просто HTML'ем в шаблоне node.tpl.php
Я уже и вручную скрипты прописывал и полностью идентично форму создания ноды копировал и как только не делал. ХЕЛП! Я больше не знаю вариантов что еще можно попробовать. Как мне это реализовать?
Комментарии
1) Проверить что js-библиотека подключена на нужных страницах, где DatePopUp нужно навесить на input (проверить можно в инспекторе браузера)
2) Если не подключена, то подключаем любым удобным друпалвейным способом (гугл drupal 7 attach js)
3) В js-файле темы оформления (если такой имеется) подключаем этот DatePopUp к инпуту как предлагает документация этого DatePopUp
Спасибо!
Можете пожалуйста по подробнее какие именно файлы JS надо подключить? Потому что я вручную их прописывал в html.tpl.php
Вот этот список
@import url("/sites/all/libraries/wvega-timepicker/jquery.timepicker.css?r7e7gx");
@import url("/sites/all/modules/date/date_popup/themes/datepicker.1.7.css?r7e7gx");
@import url("/sites/all/modules/date/date_api/date.css?r7e7gx");
@import url("/misc/ui/jquery.ui.datepicker.css?r7e7gx");
@import url("/sites/all/modules/date/date_popup/themes/jquery.timeentry.css?r7e7gx");
</style>
<script type="text/javascript" src="/misc/ui/jquery.ui.datepicker.min.js?v=1.8.7"></script>
<script type="text/javascript" src="/misc/ui/jquery.ui.datepicker-1.13.0-backport.js?v=1.8.7"></script>
<script type="text/javascript" src="/modules/locale/locale.datepicker.js?v=1.8.7"></script>
<script type="text/javascript" src="/sites/all/modules/date/date_popup/jquery.timeentry.pack.js?v=1.4.7"></script>
<script type="text/javascript" src="/sites/all/libraries/wvega-timepicker/jquery.timepicker.js?r7e7gx"></script>
<script type="text/javascript" src="/sites/all/modules/date/date_popup/date_popup.js?r7e7gx"></script>
И как именно правильно подключить через drupal 7 attach js что где прописать надо?
И как инициализировать input правильно? может я его неправильно инициализировал...
Те которые подключает модуль, который вы используете. Это можно посмотреть в коде самого модуля, например
Выбирайте любой удобный способ
Посмотрите как это делает модуль, про который вы говорите в тексте поста
У меня заработало только когда полностью с сайта источника взял пример и адаптировал скрипт вот так
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<p>Date: <input type="text" id="datepicker"></p>
Но это ведь не правильный подход. Эти скрипты уже есть по идее в каталоге сайта просто нужно их как то конкретно их подключить.
Ну как минимум jquery уже есть в друпале, да. Посмотрите коммент ниже, может его datepicker понравится
Стараюсь не пользоваться модулями для всяких frontend плюшек, а просто использую javascript в темплэйте
Для себя нашёл идеальный datepicker: https://www.daterangepicker.com/
Т.е. достал из архива на сайте - в свой темплэйт файлы daterangepicker.js и daterangepicker.css
а также moment.min.js от туда же.
И прописал их в mytemplate.info
scripts[] = 'js/daterangepicker.js'
scripts[] = 'js/moment.min.js'
scripts[] = 'js/mytemplate.js'
После чего в mytemplate.js инициализирую библиотеку на нужном input поле
Drupal.behaviors.mytemplate = {
attach: function (context, settings) {
if ($('.field-type-datetime').length > 0) {
moment.locale('ru');
$('.field-type-datetime input.date-clear').daterangepicker({
singleDatePicker: true,
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 10,
parentEl: '.main-wrapper',
autoApply: true,
autoUpdateInput: false,
locale: {
applyLabel: 'Применить',
cancelLabel: 'Отмена',
toLabel: 'До',
daysOfWeek: ['Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', 'Пн'],
monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
firstDay: 1
}
},
function(start, end, label) {
$(".field-type-datetime input.date-clear").val(start.format('DD.MM.YYYY - HH:mm'));
}
);
}
}
};
}(jQuery));
Не работает у меня ваш способ! Вот так сделал для тестирования. Прописал в node.tpl.php
@import url("/sites/all/themes/admin/css/daterangepicker.css");
</style>
<script type="text/javascript" src="/sites/all/themes/admin/js/daterangepicker.js"></script>
<script type="text/javascript" src="/sites/all/themes/admin/js/moment.min.js"></script>
<script>
(function ($) {
Drupal.behaviors.mytemplate = {
attach: function (context, settings) {
if ($('.field-type-datetime').length > 0) {
moment.locale('ru');
$('.field-type-datetime input.date-clear').daterangepicker({
singleDatePicker: true,
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 10,
parentEl: '.main-wrapper',
autoApply: true,
autoUpdateInput: false,
locale: {
applyLabel: 'Применить',
cancelLabel: 'Отмена',
toLabel: 'До',
daysOfWeek: ['Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', 'Пн'],
monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
firstDay: 1
}
},
function(start, end, label) {
$(".field-type-datetime input.date-clear").val(start.format('DD.MM.YYYY - HH:mm'));
}
);
}
}
};
}(jQuery));
</script>
<div class="field-type-datetime">Date: <input type="text" class="date-clear"></div>
Да пол часа назад пытался подключить эту библиотеку но неудачно. Не заработал календарь. Попробую тогда еще разок