как сделать выбор даты не календарем а списком-столбиком

Выбор даты должен при клике выпадать меню вниз - то есть клиент нажимает на input, а ему выпадает не календарь, а список дат. На фото пример как выдет пользователь до нажатияю После нажатие снизу появляется список-столбик "5 августа 6 августа 7 августа" и тд с ограничением в 14 дней от текущей даты.

upd: Приложил код скрипта. Пытался использовать библиотеку flatpickr

Скрипт модального окна где происходит выбор. Нужный инпут стоит в родителя с классом chosedate
<script>
document.addEventListener('DOMContentLoaded', function() {

    document.querySelector("#test1").addEventListener('click', function() {
        console.log('trigger');
        let pop_up_template = `<div class="modal-header">
                            <h3 class="modal-title"><?= $productTitle ?></h3>
                            <div class="modal-img"><img src="<?= $item['DETAIL_PICTURE']['SRC'] ?>" alt="prod"></div>
                    </div>
                    <div class="modal-body">
                            <form>
                                <p>Телефон/Дата/Время</p>
                                <input type="text" id="phone" placeholder="+7 (___ ) ___ - __ - __"/>
                                <span class="span-zakaz"> К этому времени заказ будет
                                    ожидать Вас в салоне «Мак» по адресу: г. Орехово-Зуево, ул. 1905 года, д.
                                    1А</span>
                                <div class="chosedate">
                                    <p>Удобные дата и время самовывоза</p>
                                    <input type="text" id="datadata" placeholder="Выберите дату"/>
                                    <input type="text" id="datatime" placeholder="Выберите время"/>
                                <div>
                                <div class="checkbox">
                                    <input class="custom-checkbox" type="checkbox" id="color-1" name="color-1"
                                        value="indigo">
                                    <label for="color-1">
                                        <p>Согласие с <a>политикой конфиденциальности</a> и <a>обработкой
                                                персональных данных</a></p>
                                    </label>
                                </div>
                                <button type="submit">Заказать</button>
                            </form>
                    </div>`;
        Swal.fire({
            html: pop_up_template,
            showCloseButton: true,
            customClass: {
                container: 'gggggg',
                popup: 'modal-content',
            },
        });
        var element = document.getElementById('phone');
        var maskOptions = {
            mask: '+{7}(000)000-00-00'
        };
        var mask = IMask(element, maskOptions);

        flatpickr("#datadata", {
            dateFormat: "d M",
            minDate: "today",
            maxDate: new Date().fp_incr(14),
            "locale": "ru"
        });
        flatpickr("#datatime", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            minTime: "9:00",
            maxTime: "18:00",
            "locale": "ru"
        });


        function changeTemplate() {
            $('.flatpickr-calendar').prependTo('.swal2-html-container');
        }
        // $(document).ready(changeTemplate);
        $(window).resize(changeTemplate);
    });
});