#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);
});