Datetime picker in Tabulator

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<div id="nastaveni-akce-table"></div>

JavaScript

var initialTableData = [{
     eventName: ' Club Brno - 11. 8. 2021',
     eventOd: '25-07-2021 11:00',
     eventDo: '11-08-2021 11:00',
     eventTyp: ''
   },
   {
     eventName: ' Club Levice - 9. 8. 2021',
     eventOd: '29-07-2021',
     eventDo: '09-08-2021',
     eventTyp: ''
   },
   {
     eventName: 'jméno akce neuvedeno - vyplňte do poznámky',
     eventOd: '',
     eventDo: '',
     eventTyp: 'default'
   }
 ]

 var dateEditor = (cell, onRendered, success, cancel, editorParams) => {
   var editor = document.createElement("input");
   editor.value = cell.getValue();

   var datepicker = flatpickr(editor, {
     enableTime: true,
     dateFormat: "j-n-Y H:i",
     onClose: (selectedDates, dateStr, instance) => {
       success(dateStr);
       instance.destroy();
     },
   });

   onRendered(() => {
     editor.focus();
   });

   return editor;
 };

 nastaveniAkceTable = new Tabulator("#nastaveni-akce-table", {
   data: initialTableData,
   columns: [{
       title: "Název akce",
       field: "eventName",
       width: 200,
       responsive: 0,
       editor: true
     },
     {
       title: "Od",
       field: "eventOd",
       hozAlign: "right",
       width: 150,
       editor: dateEditor
     },
     {
       title: "Do",
       field: "eventDo",
       width: 150,
       editor: dateEditor
     },
     {
       title: "Typ",
       field: "eventTyp",
       hozAlign: "center",
       width: 150
     },
   ],
 });