Блог

Главная - Вопросы по программированию - Как отключить нажатие на название месяца в Tempus Dominus Datetimepicker

Как отключить нажатие на название месяца в Tempus Dominus Datetimepicker

#bootstrap-4 #datetimepicker #tempus-dominus-datetimepicker

#bootstrap-4 #datetimepicker #tempus-dominus-datetimepicker

Вопрос:

В Tempus Dominus Datetimepicker при нажатии на название месяца он переходит к списку месяцев.

Изображение 1 Изображение 2

Я хочу отключить это. Как это должно быть достигнуто?

Ответ №1:

Чтобы отключить выбор месяца, вы можете установить для событий указателя значение none для элемента выбора-переключателя:

Нет

Элемент никогда не является целью событий указателя; однако события указателя могут быть нацелены на его элементы-потомки, если для этих потомков установлены события-указатели с каким-либо другим значением. В этих обстоятельствах события указателя будут запускать прослушиватели событий на этом родительском элементе соответствующим образом по пути к / от потомка во время фаз захвата события / пузырька.

Фрагмент:

 $('#datetimepicker1').datetimepicker();


$('#datetimepicker1').datetimepicker('toggle');  
 #datetimepicker1 .bootstrap-datetimepicker-widget .datepicker-days table th.picker-switch {
    pointer-events: none;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>