Как сделать bootstrap datepicker только для чтения?

Question

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

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

Я использую eternicode-bootstrap-datepicker - чтобы сделать его многократным.

До сих пор я получил это:

<link rel="stylesheet" href="<c:url value="/resources/js/lib/eternicode-bootstrap-datepicker/css/datepicker3.css" />" /> 

<script src="<c:url value="/resources/js/lib/eternicode-bootstrap-datepicker/js/bootstrap-datepicker.js"/>"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#datepicker-inline").datepicker({ 
     multidate : true, 
     todayHighlight : true, 
    }); 
    var dates = []; 
    var i = 0; 
    <c:forEach items="${course.selectedDates}" var="selectedDate"> 
    console.log("${selectedDate}"); 
    dates[i++] = new Date("${selectedDate}"); 
    </c:forEach> 
    $("#datepicker-inline").datepicker('setDates', dates); 

    // something to make it readonly 
    $(".day").click(function(event) { 
     console.log("preventing"); 
     event.preventDefault(); 
    }); 
}); 
</script> 


<div class="col-xs-8"> 
    <h4>Dates</h4> 
    <div id="datepicker-inline"></div> 
</div> 

[К сожалению, если он плохо отформатирован]

Как вы можете видеть, я пытаюсь предотвратить действие щелчка по умолчанию на календаре в · сутки. Консоль показывает «предупреждение», но она по-прежнему проверяет день как выбранный.

У вас есть идеи, как сделать его отключенным/неактивным/readonly?

Все то, что нужно сделать <input>, но все же можно выбрать дату с datepicker.

Answer 1

Добавить event.stopPropagation(); в событие click. Код будет выглядеть следующим образом:

$('.day').click(function(event) { 
    console.log('Preventing'); 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 

Answer 2

добавить в Datepicker событие

$('.datepicker').datepicker({ 

}).on('show', function(e){ 
    $('.day').click(function(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
    }); 
}); 

Answer 3

принял ответ не работает для меня, но другой способ сделать это, используя элегантное решение при условии к аналогичный вопрос, связанный с JQuery DatePicker (см https://stackoverflow.com/a/8315058/2396046)

чтобы сделать это для Bootstrap Datepicker будет выглядеть следующим образом:

$('#datepicker-inline').datepicker({ 
    //Other options... 
    beforeShowDay: function() { 
     return false; 
    } 
}); 

Это оставляет диалоговое окно календаря неповрежденным, но все дни серые.

Answer 4

Использовать onkeydown = "return false" в поле ввода. Чистый и простой.

Answer 5

Принятый ответ не сработал и для меня.

Существует несколько различных вариантов применения bp datepicker. Я использую тот, который поставляется с метрической административной темой. Моя самозагрузка-datepicker.js файл начинается с:

/* ========================================================= 
* bootstrap-datepicker.js 
* http://www.eyecon.ro/bootstrap-datepicker 
* ========================================================= 

Для того, чтобы сделать его только для чтения «отключен» атрибут должен быть добавлен к соответствующему входным элементу.

P.S. Я думаю, что это эффективная по времени тактика в отношении любого другого js-виджета/компонента: прежде чем пытаться подключиться к событиям или попытаться выяснить, как работает конкретный компонент, просто проверьте его реакцию на атрибуты «disabled» и «readonly» - есть хорошие вероятность того, что он отключит себя именно так, как нужно. На самом деле это может быть даже быстрее, чем чтение документов компонента. :)