Breite von jQuery UI Datepicker bei Verwendung von NumberOfMonths: [2, 6]

Ich experimentiere derzeit mit dem Widget DatePicker von jQuery UI. Ich benutze jQuery UI Version 1.11.4Breite von jQuery UI Datepicker bei Verwendung von NumberOfMonths: [2, 6]

Ich habe die Beispieldatei von jQuery UI heruntergeladen, die eine kurze Demo für alle Widgets in einer index.html enthält. Der HTML-Code für die Datepicker ist dies:

<!-- Datepicker --> 
    <h2 class="demoHeaders">Datepicker</h2> 
    <div id="datepicker"></div>

Ich möchte 12 Monate in der Datumsauswahl angezeigt werden es als Kalender zu verwenden. I ausprobiert zwei Konfigurationen:

Konfiguration A: 3 Reihen mit 4 Monate
Konfiguration B: 2 Reihen mit 6 Monaten

Konfiguration A funktioniert gut:

 $("#datepicker").datepicker({ 
     numberOfMonths: [3, 4], 
    });

Aber ich Probleme mit der Konfiguration B

$("#datepicker").datepicker({ 
     numberOfMonths: [2, 6], 
    });

Hier wird die Breite des picker habe scheint als nötig größer zu sein, führt dies zu dem grauen Hintergrund zu weit nach rechts zu gehen . Ich habe ein '?' auf diesen Bereich.

In Chrome Entwickler-Tools, kann ich die Klassen und CSS auf sie angewendet sehen. Es scheint, dass die Breite im Stil möglicherweise verantwortlich ist, aber dies wird von jQuery generiert.

<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content 
ui-helper-clearfix ui-corner-all ui-datepicker-multi-6 ui-datepicker-multi" 
style="width: 102em; display: block;">

DEMO:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery UI Datepicker - Display multiple months</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script> 
 
    $(function() { 
 
    $("#datepicker").datepicker({ 
 
     numberOfMonths: [2,6], 
 
     showButtonPanel: true 
 
    }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<p>Date: <input type="text" id="datepicker"></p> 
 
    
 
    
 
</body> 
 
</html> 
 
</body> 
 
</html>

Kann mir irgendwie helfen, wie zwei Reihen mit 6 Monaten angezeigt werden und nicht die falsche Breite aufweist? Vielen Dank.

Siehe in jsfiddle in:

Sie können hier sehen: jsfiddle.net/tvm6jrf5/1/

Quelle

2016-06-30 Martin

Welche Version von jQuery und jQuery UI verwenden Sie? Kannst du das neu erstellen, ist das ein Stack-Snippet oder jsFiddle? – j08691

Ich habe die jqueryui-Version hinzugefügt und einen Link zu einer jsfiddle-Demo erstellt. – Martin

Aber in deiner Fidel benutzt du jQuery 1.5.2 und UI 1.8.9 – j08691

Nach verschiedenen möglichen Lösungen ausprobiert und ich habe gefunden, die für mich am besten passt, so antworte ich meine eigene Frage hier.

Wie oben beschrieben, besteht das Hauptproblem darin, dass JQuery UI eine Breite unter Verwendung eines Inline-Stils anwendet.

<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content 
ui-helper-clearfix ui-corner-all ui-datepicker-multi-6 ui-datepicker-multi" 
style="width: 102em; display: block*;"

So gibt es keine Möglichkeit, diese mit CSS zu beheben, da die CSS nicht wegen der Inline-Stil auf die picker angewendet werden würde:

Lösung 1: Entfernen der Stil dynmically zur Laufzeit

Dies war mein erster Ansatz:

$("#calendar .ui-datepicker-inline").removeAttr("style");

Ich habe ein Div mit einer ID von "Kalender", wo der JQuery Datepicker platziert wird. Also habe ich diesen JQuery Befehl verwendet, um das Stilattribut zur Laufzeit zu entfernen.

Außerdem schrieb ich einige CSS die Breite setzen mich:

#calendar .ui-datepicker-inline { 
    display: block; 
    width: 100%; 
}

Anfangs schien dies funktioniert, aber einige Ereignisse causef die ursprüngliche falsche Breite wieder angewendet werden (zB Auswahl eines Datums, erfrischend das Widget, ...). Ich erkannte, dass ich den Stil für jedes dieser Ereignisse nicht immer wieder dynamisch entfernen wollte.

Lösung 2: Ändern des JQuery UI-Code, der den Stil

schafft entschied ich mich schließlich den Code in JQuery UI zu beheben, die dies verursacht, dh der Code, der mit dem Stil erzeugt die Breite.

Es kann in der Funktion _updateDatepicker innerhalb der JQuery UI-Quelldatei gefunden werden.

änderte ich folgendes:

Vorher:

inst.dpDiv.addClass("ui-datepicker-multi-" + cols).css("width", (width * cols) + "em");

Nach:

inst.dpDiv.addClass("ui-datepicker-multi-" + cols);

Die Idee dieses von this Thread im JQuery Forum zu tun kam, wo ein Benutzer das gleiche hatte Problem.

Quelle

2016-07-28 13:04:29 Martin

Breite von jQuery UI Datepicker bei Verwendung von NumberOfMonths: [2, 6]

Antwort

Verwandte Themen