Wie bootstrap datepicker readonly zu machen?

Question

Ich habe Schwierigkeiten mit dem Erstellen von eingebetteten/Inline-Datumsauswahl, die nicht anklickbar sein wird - es sollte nur Daten zeigen, verhalten sich wie readonly.

Was ich tue Kalender mit ausgewählten Daten aus Modell bevölkern, dann versuche ich es un-klickbare so Benutzer zu machen nicht dünn er etwas bearbeiten.

I eternicode-Bootstrap-Datepicker bin mit - es multidate zu machen.

Bisher habe ich diese bekam:

<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> 

[Sorry, wenn es schlecht formatiert ist]

Wie Sie sehen können, ich versuche Standard-Klick-Aktion auf · Tag im Kalender zu verhindern. Die Konsole zeigt "Verhindern" an, überprüft jedoch weiterhin den ausgewählten Tag.

Haben Sie eine Ahnung, wie es deaktiviert machen/inaktiv/Read-only?

Alles Nur-Lese-Thema, wo über <input> nur lesbar zu machen, aber noch in der Lage Datum von Datumsauswahl zu wählen.

Answer 1

event.stopPropagation(); in Ihrem Click-Ereignis hinzufügen. Der Code würde wie folgt aussehen:

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

Answer 2

zu picker Ereignisse hinzufügen

$('.datepicker').datepicker({ 

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

Answer 3

Die akzeptierte Antwort nicht für mich arbeiten, aber eine andere Möglichkeit, dies zu tun ist durch die elegante Lösung für eine Verwendung zur Verfügung gestellt ähnliche Frage zu JQuery Datepicker picker~~POS=HEADCOMP Zusammenhang stehen (siehe https://stackoverflow.com/a/8315058/2396046)

dies wie folgt aussehen würde für Bootstrap Datepicker picker~~POS=HEADCOMP tun:

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

Damit bleibt die Kalenderdialogbox intakt, aber alle Tage sind ausgegraut.

Answer 4

Verwenden Sie onkeydown = "return false" im Eingabefeld. Sauber und einfach.

Answer 5

Die angenommene Antwort funktionierte auch nicht für mich.

Es gibt verschiedene Implementierungen von bs datepicker. Ich benutze eines, das mit metronic Admin Theme kommt. Meine Bootstrap-datepicker.js Datei beginnt mit:

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

Um es nur lesbar ‚behindert‘ zu machen Attribut muss jeweiliges Eingang Element hinzugefügt werden.

P.S. Ich denke, es ist eine zeiteffiziente Taktik in Bezug auf jedes andere js-Widget/Komponente: bevor Sie versuchen, in Ereignisse einzuhaken oder herauszufinden, wie bestimmte Komponente funktioniert, überprüfen Sie einfach ihre Reaktion auf "deaktiviert" und "Readonly" Attribute - es gibt gute Es wird sich wahrscheinlich genau nach Bedarf deaktivieren. Tatsächlich kann es sogar schneller sein als das Lesen von Dokumenten der Komponente. ('. Tag). :)