Как вставить созданный элемент в строку?
Строка с HTML — это просто строка текста. Без слушателей событий и свойств DOM элементов.

Вариант: держать в строке плейсхолдер, скажем пустой div с определённым id или классом, и после вставки HTML в документ, заменять тот пустой див на супер-пупер элемент-с-событиями:const datePicker = document.createElement("div");
datePicker.className = 'datePickerInline';
// тут накладываем на элемент всякие события

const str = '<div><span>Вставляем</span><div> <div class="replace_me"></div> </div><div><p>в уже готовые html элементы в виде строки</p></div></div>';

let el = document.getElementById('element');
el.innerHTML = str;

el.querySelector('div.replace_me').replaceWith(datePicker);

План-Б: не вешать слушателей событий прямо на элементы datePicker'а, а слушать его события выше, на общем родителе: скажем, на том el, в который всё это вставляется.
Это невозможно.
Вы можете либо вставлять в строку элементы-плейсхолдеры, потом находить их после добавления на страницу и делать в них appendChild вашего элемента.
Или же рендерить строку с полной разметкой, а потом искать нужные элементы и навешивать на них события.
Выбор зависит от того, насколько сложная разметка у вашего элемента.