it-swarm.com.de

Konflikt mit zwei Jquery-Datepickern auf derselben Seite

Hier ist also das Setup: Ich habe zwei Jquery-Datepicker innerhalb einer Jquery-Registerkarte in einem Jquery-Modal-Dialogfenster:

\---/\---/\---/_______________
/                            /
\                            \
/  DATEPICKER1               /
\                            \
/  DATEPICKER2               /
\                            \
/                            /
\                            \
/____________________________/

Der erste Datepicker funktioniert normal, aber wenn ich versuche, ein Datum im zweiten Datepicker anzuklicken, wird einfach das erste Datum aktiviert. Bist du dem gefolgt? :)

Zusammenfassend bedeutet dies, dass durch Klicken auf ein Datum in datepicker2 datepicker1 aktiviert wird.

Ich habe keine Ahnung, warum dies geschieht - sie haben unterschiedliche IDs und Namen, wie unten beschrieben.

Um die Datepicker zu erstellen, verwende ich nur:

$(function() {
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
});

Die Felder sind einfach:

<input type="text" id="datepicker1" name="datepicker1" value="" />
<input type="text" id="datepicker2" name="datepicker2" value="" />

Ich verwende jQuery v1.9.0 und jQueryui v1.10.0.

Irgendwelche Gedanken dazu? Als Vorbehalt kann ich aufgrund von Einschränkungen meines Arbeitgebers keinen Code veröffentlichen. Ich kann jedoch die meisten Fragen beantworten, wenn Sie eine Klarstellung benötigen. Jede Hilfe wäre sehr dankbar !!

22
musicmunky

UPDATE: Anscheinend wurde das unten beschriebene Verhalten in einer anderen Stackoverflow-Frage behandelt:
Verhindert, dass der jQuery-UI-Dialog den Fokus auf das erste Textfeld .__ setzt.

Entschuldigung für die "doppelte" Frage - wenn ich gewusst hätte, dass dies das Problem wäre, hätte ich es schnell herausgefunden !!!

################################################ ###############################

Nun, die Auflösung ist sehr einfach und vielleicht kann mich jemand aufklären, warum es so funktioniert, weil ich im Moment etwas ahnungslos bin.

Folgendes habe ich getan:
Ich habe dem Formular zwei weitere Texteingabefelder hinzugefügt (sie wurden benötigt) und das Layout neu geordnet, so dass eines dieser neuen Eingabefelder das "erste" Element (in der oberen linken Ecke) war, wie folgt:

\---/\---/\---/_______________
/                            /
\                            \
/  TEXTFIELD1   DATEPICKER1  /
\                            \
/  TEXTFIELD2   DATEPICKER2  /
\                            \
/                            /
\                            \
/____________________________/

Plötzlich ist das Problem verschwunden! Ich bemerke jedoch ein interessantes Verhalten:
Wenn ich in EITHER datepicker ein Datum auswähle, springt der Cursor sofort zum ersten Textfeld zurück. Wenn dies der Fall wäre, wenn ich die Datumsauswahl ohne Textfelder hatte, würde dieses Verhalten bedeuten, dass der Cursor dies tun würde Ich bin sofort zum ersten Datepicker zurückgesprungen, was das Problem, das ich hatte, verursacht haben könnte.

Nun, warum es so funktioniert, habe ich keine Ahnung. Ich habe versucht, die tabindex-Parameter für die verschiedenen Textfelder/Datumsauswahl einzustellen, aber das hat das Verhalten nicht geändert.

Wie auch immer, ich schätze den Input von allen, die dazu beigetragen haben - dies war ein seltsames Problem, aber ich werde nie vergessen, wie ich es jetzt beheben kann. Danke an alle für eure Hilfe !!

9
musicmunky

Versuchen Sie diesen Freund: In Ihrer JS

 $(function() {   
       $( "#from" ).datepicker({   
      defaultDate: "+1w",  
      changeMonth: true,   
      numberOfMonths: 1,  
      onClose: function( selectedDate ) {  
        $( "#to" ).datepicker( "option", "minDate", selectedDate );  
      }  
    });  
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });  
  });  
  
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Start date: <input type="text" id="from" name="from"> 
End date: <input type="text" id="to" name = "to">

In deiner Eingabe

Startdatum: input type = "text" id = "from" name = "from" 

Enddatum: input type = "text" id = "bis" name = "bis"

Das hat für mich funktioniert :)

von MacElie M.

4
McElie

Ich glaube, Sie haben einen anderen Code, der das Javascript als Dieses stört: http://jsfiddle.net/fMD62/

funktioniert perfekt (mit jquery 1.9.1 und jqueryui 1.9.2

vielleicht versuche es

$(function() {
    $("#datepicker1,#datepicker2").datepicker();
});
3

Dies ist eine totale Aufnahme im Dunkeln, aber haben Sie versucht, jedes einzeln zu initialisieren? Etwas wie das Folgende

$(function() {
    $('.datepicker').each(function(){
        $(this).datepicker();
    });
});

Es ist wahrscheinlich das, was die anderen erwähnt haben, und Sie stoßen auf eine Form der Interferenz mit Ihrem Code, aber es lohnt sich, schnell etwas zu unternehmen.

1
Tom Yeldham

In Ihrem Beispiel haben beide Datumsempfänger unterschiedliche IDs und Namen. Das Problem, das Sie beschreiben, ist genau das, was passieren wird, wenn Sie für beide denselben Namen verwenden.

Verwendet Ihr Code für beide Datepicker eine andere ID und einen anderen Namen?

1
Bardo

Ich bin ein Backend-Datenbankprogrammierer. Ich kenne wenig über JavaScript, also habe ich nach diesem Beitrag mit der gleichen Frage gesucht. Nach dem, was ich oben gelesen habe, und im Vergleich zu meinem vorhandenen Code, habe ich mein JavaScript so geändert, dass es funktioniert und ich dachte, ich würde es teilen.

Der einzige Nachteil war, dass meine bestehenden Formulare mit Datumsselektoren nicht mehr funktionierten. Daher musste ich ein wenig hinzufügen, um diese zu bearbeiten. Alle scheinen jetzt in Ordnung zu sein. In diesem Fall handelt es sich bei den Datenbankfeldern tatsächlich um einen Unix-Zeitstempel, so dass das Formular verarbeitet wird, wenn die beiden Felder nach Bedarf konvertiert werden. Aus Gründen der Übersichtlichkeit habe ich diesen Code hier nicht eingefügt.

$(document).ready(function(){ 
       $( "#StartDate" ).datepicker({   
                                altField: '#datepicker',
                                altFormat: 'yy-mm-dd',
                                dateFormat: 'D M d, yy', 
                                firstDay: 1,
      onClose: function( selectedDate ) {  
        $( "#StartDate" ).datepicker( "option", "minDate", selectedDate );  
      }  
    });  
    $( "#EndDate" ).datepicker({
                                altField: '#datepicker',
                                altFormat: 'yy-mm-dd',
                                dateFormat: 'D M d, yy', 
                                firstDay: 1,
      onClose: function( selectedDate ) {
        $( "#EndDate" ).datepicker( "option", "maxDate", selectedDate );
      }
    }); 
        $( "#datepicker" ).datepicker({
                                altField: '#datepicker',
                                altFormat: 'yy-mm-dd',
                                dateFormat: 'D M d, yy', 
                                firstDay: 1,
      onClose: function( selectedDate ) {
        $( "#datepicker" ).datepicker( "option", "maxDate", selectedDate );
      }
    });     
  });
0
DonP

Fall 1:
@ antonys Kommentar (einschließlich jsfiddle-Link unter der Frage) funktioniert ab
version jquery-1.9.1 und 1.9.2/jquery-ui.js

Fall 2:
Der Fall von OP, bei dem datepicker1 gut funktioniert, aber durch die Auswahl von datepicker2 wird datepicker1 geöffnet
version: jQuery v1.9.0 und jQueryui v1.10.0

Fall 3:
Mein Fall, dass die Auswahl von datepicker1 gut funktioniert, aber die Wahl von datepicker2 hat keine Auswirkungen.
version: jquery-3.1.1.min.js und jQueryui v1.12.1

Fall 3 Lösung:
initialize date1 Zuerst funktioniert $('date1').datepicker() date1
Für date2 zerstöre zuerst date1 und initialize date2 

$('date1').datepicker('destroy');
$('date2').datepicker();

Zerstören Sie nun für date1 date2 und initialisieren Sie date1.

0
vusan

Versuchen Sie, den Inhalt des JQuery-UI-Dialogfelds in einen IFrame zu setzen. Das könnte Ihnen helfen, einige Ihrer Probleme zu umgehen. 

\---/\---/\---/_______________
/                            /
\  ####IFRAME######          \
\  #              #          \
/  #DATEPICKER1   #          /
\  #              #          \
/  #DATEPICKER2   #          /
\  #              #          \
/  ################          /
\                            \
/____________________________/
0
Robert Bolton

ERKLÄRUNG zur Ausgabe

Ich habe das gleiche Problem und es ist sehr enttäuschend ... Ich habe den Quellcode von Jquery durchsucht und folgendes gefunden:

if ( $.ui.dialog.overlayInstances ) {
    this._on( this.document, {
        focusin: function( event ) {
            if ( !$( event.target ).closest(".ui-dialog").length ) {
                event.preventDefault();
                $(".ui-dialog:visible:last .ui-dialog-content")
                    .data("ui-dialog")._focusTabbable();
            }
        }
    });
}

Wenn Sie also den Fokus in einem Element setzen, das sich nicht im .ui-dialog befindet, wird die _focusTabbable()-Funktion ausgelöst, die den Fokus auf die erste Eingabe im Dialog setzt.

Das Problem ist, dass $.datepicker div am Ende des Körpers erzeugt - also außerhalb von .ui-dialog

Wenn es eine andere Eingabe gibt, wird _focusTabbable() den Fokus in Ordnung geben, da datepicker damit umgehen kann. Wenn diese Eingabe jedoch mit Datumsauswahl versehen ist, wird die vorherige Datumsauswahl geschlossen, eine andere wird bei der ersten Eingabe geöffnet und die Auswahl für die vorherige Datumsauswahl wird nicht ausgelöst.

Eine mögliche Lösung

Die Lösung ist in diesem Fall eine Eingabe, die den ersten Fokus im Dialog und kein Datumsauswahlfeld hat.

Ich benutze diesen HTML-Code einfach als erste Eingabe am Beginn des Dialoginhalts, ansonsten steht die Datums-Eingabe an erster Stelle:

<span class="ui-helper-hidden-accessible"><input type="text" /></span>
0
Gh61