Блог

Главная - Вопросы по программированию - Отображение двойного выбора даты

Отображение двойного выбора даты

#javascript #datepicker #fullcalendar

Вопрос:

Привет, сообщество Stackoverflow!

Я действительно новичок в использовании fullcalendar, Js и средства выбора даты и времени. Я добавляю в средство выбора даты выбранную дату с помощью FullCalendar.

Так что для этого вот мой кодовый пикер в HTML

 select: function(inform) {
                var date_from= new Date(inform.startStr);
                var date_to= new Date(inform.endStr) ;
                let currentDate = new Date();
                
                if (date_from >= currentDate) {
                    $('#exampleModalToggle').modal('show');

                    $(".fc-highlight").css("background", "#ffc800", "important!"); 
                    $(function() {
                        $("#start_date_picker").datepicker({
                            dateFormat: "yy-mm-dd",
                        }).datepicker("setDate", date_from);
                        
                        
                        $("#end_date_picker").datepicker({
                            dateFormat: "yy-mm-dd"
                        }).datepicker("setDate", date_to);
                        

                    });
                } else if( date_to < currentDate ){
                    console.log(' date clicked lower than current date, you can NOT do reservation')
                }
            }, 
  <meta charset='utf-8' >
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!--bootstrap 5-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds 3Ulb9Bn9Plx0x4"
        crossorigin="anonymous"></script>
    <!--date time picker css-->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
    <!--  responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <!--  fontawsome -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous" />
    <!-- fonts-->
    <link href="https://fonts.cdnfonts.com/css/nexa-bold" rel="stylesheet"/>


<!--Start Date-->
 <div id="start_date"  class="add_reservation_subtitles pb-3" style="margin-left: 28px;">
                                <input id="start_date_input" data-provide="datepicker" name="start_date" type="date"
                                    lang="fr" id="datepicker_second" class="datepicker1" style="margin-left: 28px;" required>
                                <input name="start_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
                                    required>
                            </div>
                     
 <!--End Date-->
 
 <div id="end_date" style="margin-left: 28px;" class="add_reservation_subtitles pb-3 ">
                                <input id="end_date_input" type="date" lang="fr" class="date-picker"
                                    style="margin-left: 28px;" required>
                                <input name="end_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
                                    required>
                            </div>

<script src="{% static 'jquery-3.6.0.js' %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV"
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.0/locales-all.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
    integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8 M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

Проблема в том, что у меня отображаются два календаря. Второй появляется сразу после закрытия первого.

Я предполагаю, что речь идет о настройке типа HTML в качестве даты и для создания экземпляра календаря с помощью JS datepicker.

Поэтому я хотел бы знать, как избежать такого поведения, не влияя на отображение календаря. первый календарь

второй календарь

Комментарии:

1. Ваш пример не показывает такого поведения.

2. Очевидный ответ- либо использовать загрузочный указатель даты, либо использовать встроенный HTML-указатель даты. Не используйте оба в одном поле. Вы в основном сами ответили на него в описании!

3. P. s. это не имеет никакого отношения к FullCalendar (тот факт, что значение даты пришло оттуда, не имеет отношения к проблеме)

Метки: