Bootstrap Datepicker deaktivieren Funktion

Question

Ich brauche in meinem Projekt eine Funktion, die Bootstrap Datepicker immer noch nicht bietet. Ich möchte ein Datepicker-Feld aktivieren/deaktivieren, damit ein Benutzer seinen Wert nicht ändern kann. So etwas wie eine readOnly-Funktionalität.

Irgendwelche Ideen dazu?

Vielen Dank im Voraus.

Answer 1

Ich habe eine Lösung gefunden, aber nur durch Ändern des Bootstrap-Kalender-Codes. die this._events Teil Aufschalten Ereignis zu deaktivieren keyup/unten arbeitete für mich:

_buildEvents: function(){ 
     if (this.isInput) { // single input 
      this._events = [ 
       [this.element, { 
        focus: $.proxy(this.show, this), 
        keyup: $.proxy(this.update, this), 
        keydown: $.proxy(this.keydown, this) 
       }] 
      ]; 
     } 
     else if (this.component && this.hasInput){ // component: input + button 
      this._events = [ 
       // For components that are not readonly, allow keyboard nav 
       [this.element.find('input'), { 
        //focus: $.proxy(this.show, this), 
        //keyup: $.proxy(this.update, this), 
        //keydown: $.proxy(this.keydown, this) 
       }], 
       [this.component, { 
        click: $.proxy(this.show, this) 
       }] 
      ]; 
     } 
     else if (this.element.is('div')) { // inline datepicker 
      this.isInline = true; 
     } 
     else { 
      this._events = [ 
       [this.element, { 
        click: $.proxy(this.show, this) 
       }] 
      ]; 
     } 

     this._secondaryEvents = [ 
      [this.picker, { 
       click: $.proxy(this.click, this) 
      }], 
      [$(window), { 
       resize: $.proxy(this.place, this) 
      }], 
      [$(document), { 
       mousedown: $.proxy(function (e) { 
        // Clicked outside the datepicker, hide it 
        if (!(
         this.element.is(e.target) || 
         this.element.find(e.target).length || 
         this.picker.is(e.target) || 
         this.picker.find(e.target).length 
        )) { 
         this.hide(); 
        } 
       }, this) 
      }] 
     ]; 
    }, 

Answer 2

Sie können onRender Ereignis von Bootstrap verwenden, das die datepicker deaktiviert.

onRender: Dieses Ereignis wird ausgelöst, wenn ein Tag in der Datumsauswahl gemacht wird. Sollte eine Zeichenfolge zurückgeben. Geben Sie 'deaktiviert' zurück, um den Tag von der Auswahl zu deaktivieren.

Answer 3

Sie müssen nur jquery attr Methode

$('').attr('disabled', true); 

Das ist alles :)

Answer 4

$("#nicIssuedDate").prop('disabled', true); 

diese verwenden funktioniert für mich mit Bootstrap Datepicker und Jquery

Answer 5

Versuchen Sie, die Option enabledDates auf ein Array nur des Datums einzustellen, das Sie anzeigen möchten. Legen Sie auch das Datum auf dieses Datum fest. Alle anderen Daten werden dann deaktiviert.

enabledDates: ['your_date_to_show'], 

ZB.

$('#Date').datetimepicker({ 
    inline: true, 
    viewMode: "days", 
    format: "YYYY-MM-DD", 
    enabledDates: [fetchDate("Date")], 
    }) 
    .data("DateTimePicker") 
    .date(fetchDate("Date")); 

    $('#Date').ready(function(){ 
    $("#Date").data("DateTimePicker").date(fetchDate("Date")); 
    }); 

Answer 6

Sie können folgendes tun:

Zum Deaktivieren:

$("#date").datepicker("option", "disabled", true);

und zur Aktivierung:

$("#date").datepicker("option", "disabled", false);

Answer 7

Genau dies tun:

$('#idOfYourCalendar').data("DateTimePicker").disable(); 

offizielle Dokumentation: https://eonasdan.github.io/bootstrap-datetimepicker/Functions/

Answer 8

konnte ich akzeptable Lösung wie folgt erhalten:

$(".date").datetimepicker({ 
       defaultDate: moment(), 
       format: 'YYYY-MM-DD' 
      }).end().on('keypress paste', function (e) { 
       e.preventDefault(); 
       return false; 
      }); 

Hoffe, dass es auch für Sie funktioniert!

Answer 9

Mit diesem Code

$("#nicIssuedDate").prop('disabled', true);