Bootstrap-datepicker-return-Fokus, nachdem wählen Sie

Wenn Sie initialisieren bootstrap-datepicker aus eternicode mit autoclose: true zwei unerwünschte Verhaltensweisen geschehen:

Nach der picker schließt, wenn Sie mit der Tabulatortaste in das nächste Feld, beginnen Sie am Anfang des Dokuments wieder. Dies kann sehr umständlich auf langen Formen.
Weil die Farbauswahl ändert sich der Wert programmgesteuert, alle Zuhörer, dass Sie, die Sorge um das blur-Ereignis auf die Eingabe nicht richtig verhält. Die Unschärfe tritt auf, wenn Sie wählen Sie die picker-Wert und die Eingabe der Wert hat sich nicht verändert. Dann wird die bootstrap-datepicker-programmgesteuert aktualisiert das Feld also blur ist nie gefeuert, mit dem neuen Wert.

Hier ist eine demo in der stack-snippets:

*wählen Sie ein beliebiges Feld aus, wählen Sie einen Wert aus dem picker, und drücken Sie dann Tab

JS:

$(".datepicker").datepicker({
  autoclose: true
});

HTML:

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>

Entsprechend der Antwort zu Fokus das Feld nach der Auswahl der jQuery-UI-datepicker, können Sie durch Tippen auf in der onClose oder onSelect Veranstaltungen, aber die bootstrap-picker bieten nicht die Ereignisse.

Einfach ersetzen Sie Sie mit hide scheint nicht zu funktionieren, seit der Neuausrichtung wird eine Endlosschleife erstellt, dass immer das picker öffnen Sie jedes mal, wenn Sie versuchen, um es zu schließen.

$(".datepicker").datepicker({
  autoclose: true
})
.on('hide', function () {
  $(this).focus();
});

Stack Snippet Demo:

JS:

$(".datepicker").datepicker({
  autoclose: true
})
.on('hide', function () {
  $(this).focus();
});

HTML:

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>

InformationsquelleAutor KyleMit | 2015-01-27

Dies ist ein bisschen ein hack-job, aber man kann bedingt anzeigen und ausblenden der Elemente, um eine Endlosschleife zu vermeiden. Auf ausblenden, prüfen Sie, ob dies das erste mal versucht, sich zu verstecken. Wenn der Eingang nicht aktiv (d.h. Sie haben sich der dropdown und wir verloren haben, unsere tab-Reihenfolge, dann die Neuausrichtung führt dazu, die Farbauswahl zu zeigen. Wir fangen auch diese ein-und ausblenden von dort aus, betreten, wieder in unsere ursprüngliche code. Wir passieren hin und her, eine Eigenschaft auf das Objekt, so können wir den Status verwalten.

Wird wie folgt Aussehen:

$(".datepicker").datepicker({
  autoclose: true
})
.on('hide', function () {
  if (!this.firstHide) {
    if (!$(this).is(":focus")) {
      this.firstHide = true;
      //this will inadvertently call show (we're trying to hide!)
      this.focus(); 
    }
  } else {
    this.firstHide = false;
  }
})
.on('show', function () {
  if (this.firstHide) {
    //careful, we have an infinite loop!
    $(this).datepicker('hide'); 
  }
})

Stack Snippet Demo:

JS:

$(".datepicker").datepicker({
  autoclose: true
})
.on('hide', function () {
  if (!this.firstHide) {
    if (!$(this).is(":focus")) {
      this.firstHide = true;
      //this will inadvertently call show (we're trying to hide!)
      this.focus(); 
    }
  } else {
    this.firstHide = false;
  }
})
.on('show', function () {
  if (this.firstHide) {
    //careful, we have an infinite loop!
    $(this).datepicker('hide'); 
  }
})

HTML:

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>

tolles Update! für diejenigen, die brauchen das datepicker-Klasse befindet sich in einem div-input-Gruppe, und nicht der input selbst, z.B. so, um die glyphicon-Kalender, zwicken die oben .on('hide', function () var elem = $(this).find('input'); if (!this.firstHide) { if (!elem.is(":focus")) { this.firstHide = true; // this will inadvertently call show (we're trying to hide!)elem.focus();}

InformationsquelleAutor KyleMit

0

Ich versuche, das gleiche zu erreichen, aber irgendwie die Lösung ist ein wenig buggy. Zum Beispiel, wenn Sie auf das gleiche Datum-picker wieder, es reagiert nicht. Der browser reagiert nicht mehr, wenn Sie auf mehrere Male. Ich habe eine bessere Lösung, die ist unten.

Meine Lösung ist ein trick der datepicker, um den Fokus auf das nächste element innerhalb der DIV. Ich habe Petersilie Validierung, fügt es die <UL> für mich automatisch.
```
<div>   
<input type="text" class="datepicker" />
<ul class="error-message"></ul>
</div>

$('.datepicker').datepicker({
        autoclose: true
    }).on('hide', function () {
        $(this).next('ul').attr('tabindex',-1).focus();
    });
```
InformationsquelleAutor CalebC

Aktuelle Datum ausgewählt haben Funktionen Hinzugefügt, mit @KyleMit Lösungen

JS:

var date = new Date();
  var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
  var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());

$(".datepicker").datepicker({
  autoclose: true
})
.on('hide', function () {
  if (!this.firstHide) {
    if (!$(this).is(":focus")) {
      this.firstHide = true;
      //this will inadvertently call show (we're trying to hide!)
      this.focus(); 
    }
  } else {
    this.firstHide = false;
  }
})
.on('show', function () {
  if (this.firstHide) {
    //careful, we have an infinite loop!
    $(this).datepicker('hide'); 
  }
})
$('.datepicker').datepicker('setDate', today);

HTML:

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>

InformationsquelleAutor SantoshK

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.