wake-up-neo.com

Jquery UI Datepicker wird nicht angezeigt

[~ # ~] Update [~ # ~]
Ich habe wieder auf Jquery 1.3.2 zurückgegriffen und alles funktioniert. Ich bin mir nicht sicher, was das Problem ist/war, da ich außer den jquery- und ui-Bibliotheksversionen nichts anderes geändert habe.
UPDATE END

Ich habe ein Problem mit dem JQuery UI Datepicker . Der Datepicker wird an eine Klasse angehängt und dieser Teil funktioniert, aber der Datepicker wird nicht angezeigt.

Hier ist der Datepicker-Code, den ich verwende, und der Inline-Stil, der generiert wird, wenn ich in das Eingabefeld mit der Klasse ".datepicker" klicke.

$('.datepicker').datepicker({dateFormat:'dd/mm/yy'});

display:none;
left:418px;
position:absolute;
top:296px;
z-index:1;

Wenn ich die Anzeige ändere: Keine zur Anzeige: Blockiere die Datumsauswahl funktioniert einwandfrei, außer es wird nicht geschlossen, wenn ich ein Datum auswähle.

Verwendete JQuery-Bibliotheken:

  • jQuery JavaScript Library v1.4.2
  • jQuery UI 1.8 jQuery UI Widget 1.8
  • jQuery UI Mouse 1.8 jQuery UI
  • Position 1.8 jQuery UI Draggable 1.8
  • jQuery UI Droppable 1.8 jQuery UI
  • Datumsauswahl 1.8
27
scott

es ist die CSS-Datei in der neuen, die nicht funktioniert. Versuchen Sie auch, die alte 1.7. * Css-Datei in Ihren Header aufzunehmen, und versuchen Sie es erneut.

Haben Sie auch versucht, einen .datepicker ("show") direkt nach seiner Erstellung zu erstellen?

11
user227353

Ich hatte das gleiche Problem und stellte fest, dass in meinem Fall der Grund für den Datepicker div in der Beibehaltung der Klasse .ui-helper-hidden-accessible mit folgendem CSS liegt:

.ui-helper-hidden-accessible {
 position: absolute !important;
 clip: rect(1px 1px 1px 1px);
 clip: rect(1px,1px,1px,1px);
}

Ich verwende die von Google CDN gehosteten Versionen von jquery, daher konnte ich den Code oder das CSS nicht ändern. Ich hatte auch versucht, den Z-Index ohne Erfolg zu ändern. Die Lösung, die für mich funktioniert hat, bestand darin, die Clip-Eigenschaft für den Datepicker auf den Standardwert auto zurückzusetzen:

$('.date').datepicker();
$('#ui-datepicker-div').css('clip', 'auto');

Da dies speziell auf die Datepicker-Klasse abzielt, besteht weniger die Möglichkeit, dass unbeabsichtigte Nebenwirkungen auf andere Widgets auftreten, als dass die Klasse, auf die mit ui-helper-hidden zugegriffen werden kann, insgesamt geändert wird.

33
undefined

Dies kann für jemanden hilfreich sein. Wenn Sie Ihre Formulardaten kopiert und eingefügt haben (mit dem Eingabefeld Datumsauswahl), stellen Sie sicher, dass Sie nicht das class = "hasDatepicker" versehentlich kopieren

Das bedeutet, dass Ihr Eingabefeld folgendermaßen aussehen sollte:

<input id="dateChooser" name="dateChooser" type="text" value=""/>

NICHT

<input id="dateChooser" name="dateChooser" type="text" value="" class="hasDatepicker">

Ich habe diesen Fehler versehentlich gemacht. Das Entfernen der Klasse und das Zulassen des Aufrufs der jQuery-Benutzeroberfläche schienen das Problem zu beheben.

Hoffe das hilft jemandem!

16
Bren1818

Ich hatte das gleiche Problem: Die Datumsauswahl wurde erfolgreich hinzugefügt (und war sogar in FireBug zu finden), war aber nicht sichtbar. Wenn Sie mit FireBug die Klasse "ui-helper-hidden-accessible" aus dem Date Picker-Div entfernen (ID: "ui-datepicker-div"), wird der Date Picker sichtbar und funktioniert wie gewohnt.

Wenn Sie ganz am Ende Ihrer Funktion $ (document) .ready () Folgendes hinzufügen, wird dies auf jede Datumsauswahl auf Ihrer Seite angewendet und bewirkt, dass alle funktionieren:

$(document).ready(function() {
      //...
      //Put all of you other page setup code here
      //...

      //after setting everything up (including adding all Date Pickers)
      //apply this code to every Date Picker
      $('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible');  
});

Das war meine erste Lösung. Danach habe ich die oben von Brian Mortenson vorgeschlagene Lösung ausprobiert. Beide haben perfekt funktioniert und wirkten weniger invasiv als das Entfernen einer ganzen Klasse aus dem Element. Deshalb habe ich meinen Code geändert, um seine Lösung auf die von mir verwendete Methode anzuwenden (am Ende des Dokument-Setups anwenden, sodass es für jeden Datums-Picker gilt und nicht wiederholt werden muss):

$(document).ready(function() {
      //...
      //Put all of you other page setup code here
      //...

      //after setting everything up (including adding all Date Pickers)
      //apply this code to every Date Picker
      $('#ui-datepicker-div').css('clip', 'auto');  
});

Hoffe, das hilft, jemanden loszuwerden.

BEARBEITEN: Ein Code-Syntaxfehler wurde behoben.

10
olen_garn

Bitte stellen Sie sicher, dass Sie die gleiche Version von jquery-ui 'js' und 'css' Dateien verwenden. Manchmal könnte das ein Problem sein.

4
Anticipator

Ich hatte ein ähnliches Problem mit 1.7.2-Versionen von jQuery und jQuery UI. Das Popup wurde nicht angezeigt, und keiner der oben genannten Vorschläge hat geholfen. Was in meinem Fall geholfen hat, war das Herausnehmen des class = "hasDatepicker", das (wie die akzeptierte Antwort hier feststellt: jQuery UI-Datepicker wird nicht angezeigt - vollständiger Code eingeschlossen ) von jquery-ui verwendet wird, um dies anzuzeigen Dem Textfeld wurde bereits ein Datums-Picker hinzugefügt. Ich wünschte, ich hätte diese Antwort früher gefunden.

4
Spaceploit

Ich hatte das gleiche Problem mit JQuery-UI 1.8.21 und JQuery-UI 1.8.22.

Das Problem war, dass ich zwei DatePicker-Skripte hatte, eines mit jquery-ui-1.8.22.custom.min.js und eines mit jquery.ui.datepicker.js (eine alte Version vor dem Upgrade auf 1.8.21).

Löschen des Duplikats jquery.ui.datepicker.js, Beheben des Problems für 1.8.21 und 1.8.22.

3
Jeremie

Ich habe die Leitung gewechselt

.ui-helfer-versteckt-zugänglich {position: absolut! wichtig; Clip: Rect (1px 1px 1px 1px); Clip: Rect (1px, 1px, 1px, 1px); }

zu

.ui-helfer-versteckt-zugänglich {position: absolut! wichtig; }

und alles funktioniert jetzt. Andernfalls versuchen Sie, den Z-Index zu erhöhen, wie von Soldierflup vorgeschlagen.

2
Kyle Robson

Hatte das gleiche Problem, dass der Datepicker-DIV erstellt wurde, aber nicht gefüllt wurde und beim Klicken auftauchte. Mein Fehler war, dem Eingang statisch die Klasse "hasDatepicker" zu geben. jQuery-ui hat es sich zur Aufgabe gemacht, diese Klasse eigenständig zu setzen. dann klappt es bei mir.

1

Versuchen Sie, den Z-Index Ihres Datepickers deutlich höher zu setzen (z. B. Z-Index: 1000). Der Datepicker wird wahrscheinlich unter Ihrem Originalinhalt angezeigt. Ich hatte das gleiche Problem und das hat mir geholfen.

1
Soldierflup

Ok, ich habe endlich meine Lösung gefunden.

Wenn Sie Vorlagen in Ihrer Ansicht verwenden (mit Moustache.js oder anderen ...), müssen Sie berücksichtigen, dass einige Ihrer Klassen zweimal geladen werden können oder später erstellt werden. Daher müssen Sie diese Funktion $(".datepicker" ).datepicker(); anwenden, sobald die Instanz erstellt wurde.

0
Mc-

Wenn Sie die Skripte der Metro-UI css verwenden (ausgezeichnete kostenlose Metro-UI von http://metroui.org.ua/ ), kann dies ebenfalls zu Konflikten führen. In meinem Fall war dies kürzlich das Problem.

Daher wurde die Skriptreferenz der Metro-Benutzeroberfläche entfernt (da ich ihre Komponenten nicht verwendet habe), da Datumsauswahl angezeigt wird.

Aber Sie können nicht U-Bahn-Look für Datepicker von jQuery-ui bekommen

In den meisten Fällen kommt es jedoch, wie bereits erwähnt, zu Konflikten mit doppelten Versionen von jQuery-UI-Javascripts.

0
Tejasvi Hegde

Einfach posten, weil die Grundursache für meinen Fall nicht beschrieben wurde.

In meinem Fall bestand das Problem darin, dass "assets/js/fuelux/treeview/fuelux.min.js" einen Konstruktor .datepicker () hinzufügte, wodurch die assets/js/datetime/bootstrap-datepicker.js überschrieben wurden

nur bewegen die

kurz bevor der $ ('. Date-Picker') mein Problem gelöst hat.

0
D.Firka

Falls Sie dieses Problem haben, wenn Sie mit WordPress Systemsteuerung und einem ThemeRoller-generierten Theme arbeiten - stellen Sie sicher, dass Sie die 1.7.3-Version von theme verwenden, 1.8.13 wird nicht funktionieren. ( Wenn Sie genau hinschauen, wird das Element gerendert, aber .ui-helper-hidden-accessible führt dazu, dass es nicht angezeigt wird.

Aktuelle WP Version: 3.1.3

0
Andy
* html .ui-helper-hidden-accessible 
{
 position: absolute !important; 
 clip: rect(1px 1px 1px 1px); 
 clip: rect(1px,1px,1px,1px); 
}

Dies funktioniert nur für den IE, also wende ich diesen Hack an und arbeite gut mit FF, Safari und anderen.

0
Ricardo Cruz

Scheint mit einigen Themen (cupertino/theme.css) in meinem Fall zu passieren.

Und das Problem ist die .ui-helper-hidden-accessible-Klasse, die Clip-Eigenschaften hat, wie frühere Benutzer sagten.

Überschreibe es einfach und es wird gut

$(document).ready(function() {
    $("#datePicker").datepicker({ dateFormat: "yy-m-d" });
    $('#ui-datepicker-div').css('clip', 'auto');
});
0
user2672796

Hier ist der vollständige Code, der von meiner Seite aus funktioniert: Einfach testen.

<!doctype html>
<html lang="en">
   <head>
      <title>jQuery Datepicker</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#datepicker1" ).datepicker();
         });
      </script>
   </head>
   <body>
      <p>Enter Date: <input type="text" id="datepicker1"></p>
   </body>
</html>
0
Hrushi

Ich habe eine Tricklösung gefunden. Sie können die folgenden Codes verwenden.

$(".datepicker").datepicker({
/* any options you want */
beforeShowDay: function (date) {
    $('#ui-datepicker-div').css('clip', 'auto');
    return [true, '', ''];
    }
});
0
adenizc

Ich habe ähnliche Probleme gehabt. Es würde einmal und nicht ein zweites Mal unter verschiedenen Registerkarten gestartet. Ich habe eine Klasse anstelle einer ID verwendet und überall den gleichen Klassennamen verwendet. Mir scheint, der Datepicker wird einmalig aktiviert und die ursprüngliche Initialisierung muss überall verwendet werden. Man kann das wahrscheinlich mit der Destroy-API umgehen, aber für mich war es einfach, überall dieselbe Klasse zu verwenden.

0
Jeff B.

Dies ist ein etwas anderes Problem. Bei mir würde die Datumsauswahl angezeigt, aber die CSS wurde nicht geladen.

Ich habe das Problem folgendermaßen behoben: Laden Sie das Thema neu (gehen Sie zu jquery ui css, Zeile 43, und kopieren Sie die URL dort, um Ihr Themeroller-Thema zu bearbeiten.)> Speichern Sie ohne die erweiterten Optionen erneut.> Ersetzen Sie alte Dateien auch.

0
Adamantus