Как добавить HTML-элемент при использовании flatpickr - PullRequest
Новая
       7

Как добавить HTML-элемент при использовании flatpickr

0 голосов
/ 25 мая 2018

У меня самая странная проблема, и я в замешательстве.

Я использую flatpickr в качестве средства выбора даты на моем сайте, и этот инструмент работает очень хорошо, однако я думаю, что хотел быдобавить дополнительное изображение в диалоговом окне.Я думаю: «Я могу сделать это!»и так поехали.

Я нашел хук onOpen () и понял, что это идеальная функция для того, что мне нужно было сделать.Затем я написал jQuery для ссылки на правильную область в диалоговом окне, а затем .append (htmlString)

Мой код для создания всплывающего окна и мои параметры конфигурации: 

    $dateRangeInputs.flatpickr({
    altInput: true,
    mode: 'range',
    onOpen: function(selectedDates, dateStr, instance) {
        instance.prevMonthNav.append("<img src='/ui/images/icons/arrow-left.svg'>");
    }
});

Проблема в том,htmlString обрабатывается полностью как текст, игнорируя инструкции html, поэтому в диалоге появляется следующий HTML-код: 

<svg version="1.1" ...> ... </svg>
&lt;img src='/ui/images/icons/arrow-left.svg'&gt;</span>

Я также включил картинку для тех, кто предпочитаетвизуальные объяснения.screen shot of the inserted htmlString

Я проверил и перепроверил команду jQuery append (), она должна правильно обрабатывать аргумент htmlString.Я думал только о том, что в библиотеке flatpickr есть что-то, что позволяет включать только текст.Я думаю, что моя лучшая помощь придет от тех, кто использует flatpickr.

1 Ответ

0 голосов
/ 25 мая 2018

сработало!Мне нужно было обернуть свойство экземпляра как селектор jQuery, например: 

onOpen: function(selectedDates, dateStr, instance) {
    $(instance.prevMonthNav).append("<img src='/ui/images/icons/arrow-left.svg'>");
}
...