Блог

Главная - Вопросы по программированию - Как использовать только для чтения или отменить событие changeDate в Bootstrap-datepicker

Как использовать только для чтения или отменить событие changeDate в Bootstrap-datepicker

#jquery #bootstrap-datepicker

#jquery — jquery — запрос #bootstrap-datepicker #jquery #начальная загрузка-выбор даты

Вопрос:

Я использую Bootstrap datepicker для отображения календаря, но мне не нужно никакого человеческого взаимодействия.
Это должен быть календарь, доступный только для чтения.

Я пытаюсь отключить событие onchange, но это не работает:

Отредактировано для уточнения:

 $("#myDatePicker").datepicker();
$("#myDatePicker").datepicker().on("changeDate", function (ev) {
	return false;
});  
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<div id="myDatePicker" style="border: 1px solid gray; display: inline-block;"></div>

Расширенный:

Календарь окрашен в определенные даты, но проблема не в этом. Я хочу показать данные календаря, но мне нужно избежать того, чтобы пользователь мог изменить выбранную дату или месяц. Мне нужны статические данные и никакого человеческого взаимодействия.

Спасибо, что уделили мне время!

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

1. Я думаю, вам не следует использовать «средство выбора даты», если вы хотите «Показать» дату.

2. Интересный вопрос. Итак, вы хотите, чтобы на дисплее отображался «like» datepicker… Но нет взаимодействия с выбором. Должны ли в календаре отображаться уже известные события? Или просто пустой календарь? Можете ли вы более конкретно рассказать об использовании?

3. Я отредактировал ваш фрагмент, чтобы заставить его «немного» работать. Итак, этот дисплей мы можем видеть сейчас… Это то, что вы хотите? Но в каком контексте? Поскольку выделение не требуется, полезно ли поле ввода (может быть скрыто)? Какая польза от календаря?

4. Возможно, вы можете отключить все даты, просто используйте daysOfWeekDisabled: [0,1,2,3,4,5,6] опцию ( документ здесь ). Я согласен с предыдущими комментариями, дополнительная информация о вашем сценарии может быть полезной.

5. Хорошо … «определенные дни окрашены» — это требование. Ссылка, которую я вам дал, не подойдет. Вот ссылка, которую вы можете прочитать … Добавьте это в комментарий @VincenzoC, и вы будете близки к решению. 😉 Не стесняйтесь ОТРЕДАКТИРОВАТЬ свой вопрос, чтобы уточнить его в соответствии с вашими требованиями… В противном случае вы действительно рискуете закрыть голосование, поскольку «неясно, о чем вы спрашиваете» .

Ответ №1:

Вот эффективный способ «предотвратить» любое событие мыши в календаре.

Трюк так же прост, как установка другой «маски» div над календарем, используя z-index .

 $("#myDatePicker").datepicker();

// Get the calendar dimention and position.
var calendar={};
calendar.top=$("#myDatePicker").offset().top;
calendar.left=$("#myDatePicker").offset().left;
calendar.height=$("#myDatePicker").outerHeight();
calendar.width=$("#myDatePicker").outerWidth();
//console.log( JSON.stringify(calendar) );

// Apply it to a mask "over" the calendar.
$("#mask").css(calendar);  
 #mask{
    position:fixed;
    z-index:100;
}  
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<div id="myDatePicker" style="border: 1px solid gray; display: inline-block;"></div>
<div id="mask"></div>

Ответ №2:

вы можете просто удалить все события

  $('#bookingsCalendar').find('.day').removeClass('day');

 dp.on('changeMonth', function (e) {
        setTimeout(function () {
            $('#bookingsCalendar').find('.day').removeClass('day');
        }, 100);
        
    });