Wie füge ich Pfeile zu Datepicker?

Habe ich eine form gebaut und möchte die UI-Datepicker-Menschen zu helfen, wählen Sie ein Datum. Datepicker funktioniert ganz gut, aber enthält keine [sichtbaren] Hinweis für, wie man von Monat zu Monat. Ich weiß, dass das klicken in den oberen Ecken, verschiebt sich der Kalender um die nächsten oder vorherigen Monat, und ich möchte einen visuellen Hinweis in der Ecke Boxen für meine Nutzer. Wie befestige ich die Bilder auf dem display?

Ich kann nicht, um eine Anzeige der Kalender, weil ich bin ein neuer Benutzer, aber die Orte, die rechts und Links Zeiger gehen würde, sind in den oberen Ecken des datepicker Kalender, wo Sie bereits Veränderungen der Kalender, wie ich will.

Geändert

Sieht es für mich wie Browser sind nicht zu finden, die Bilder (gespeichert in /images/), AUßER wenn die CSS ist im Kopf innerhalb von script-tags. Siehe Datei-Struktur unten. Chrom-Verhalten ist anders. Im moment ich don ' T care über Chrome das problem.

, Was ich gemacht habe, die Frage:

Ich versucht, auf jsfiddle ohne viel Erfolg. http://jsfiddle.net/akakie/Pmpd8/

Habe ich drei Beispiele auf der web. Anzeigen der Quelle, um zu sehen Sie den code. (Sorry. Bin ich beschränkt auf 2 links.)

Sind die Unterschiede, wie die CSS-Datei wird abgerufen.

  • Die CSS datepicker ist enthalten im Dokument-head innerhalb <style>code from jquery-ui.datepicker.css pasted here</style>.
  • CSS retrived von <link href="/css/jquery-ui.datepicker.css" type="text/css" />

  • Ergebnisse variierten je nach browser:

    • Mit Firefox 4 oder Safari 5 oder Internet Explorer 8:
      Version 1 funktioniert wie es soll, Pfeile und alle. Die CSS datepicker ist enthalten im Dokument-head innerhalb <style>code from jquery-ui.datepicker.css pasted here</style>.

    • Versionen 2 und 3 nicht finden, die Bilder. Andere Formatierungen korrekt ist.

    • Mit Chrom, das layout ist korrekt (der Kalender erscheint in voller Größe und funktioniert), aber weder Farbe noch Pfeile angezeigt.

Datei-Struktur

WebRoot

  • /css

    • /reset.css
    • /basefont.css
    • jquery.ui.datepicker.min.js

  • /images

    • /ui-[xxx].png (mehrere Bilder)

  • /js

    • /libs
      • /jquery-1.6.1.min.js
      • /jquery.ui.datepicker.min.js
Zeig uns etwas code. jsfiddle.net ist sehr nützlich, in dieser Hinsicht.
wie dieses: jsfiddle.net/drQsr -- was zeigt, dass die Standardeinstellung, bei der CSS vorhanden ist, wird haben Pfeile, um zu navigieren Monate.
Ich schau jsfiddle.net scheint wirklich nützlich. In der Zwischenzeit entdeckte ich, wie hinzufügen von Dropdown-Listen für Monat und Jahr, das ist eine Möglichkeit, um das problem zu lösen. Ich bin nur zu stur, um zu beenden es. Ich werde morgen wieder, da ich zu Hause arbeiten. Ich kann auch die Seite, wo andere es sehen können. Es läuft jetzt auf meinem laptop dev-Website. Und vielen Dank für die Beantwortung.
Curiouser und curiouser. Ich habe entdeckt, dass datepicker zeigt die gewünschten Pfeile in manchen Browsern und anderen nicht. Es hängt auch davon ab, wie lade ich die CSS.
Was ich gefunden habe: wenn ich einfügen jquery-ui.datepicker.css direkt in den html-Kopf, ui datapicker funktioniert gut in Firefox und Safari. Chrome ignoriert einige der CSS. Wenn ich die css in einer externen Datei, und schließen Sie es entweder mit @include oder mit link rel=stylesheet habe ich nicht bekommen, Teile des CSS. Ich arbeite mit einer test-Datei und jsfiddle, um zu versuchen, das problem zu isolieren. Später mehr.

InformationsquelleAutor Lewy | 2011-05-28

  1. 1

    Diese sieht wie Sie sind, die fehlenden CSS-Dateien oder Bilder.

    Abgesehen von jQuery(UI), JavaScript-Dateien, müssen Sie jQueryUI CSS-Dateien einzubauen.
    Sie können download ganze Paket von http://jqueryui.com website mit js, css, Bilder.

    Beachten Sie, dass Bilder (Standard) benötigen, um in den images/Ordner relativ zur Platzierung der CSS-Datei. Wenn Sie möchten, ändern Sie diese Struktur, die Sie benötigen, zu ändern, Bild Pfade, die background-image: Deklarationen in der CSS-Datei.

    InformationsquelleAutor Tomasz Durka

  2. 0

    Nach dem hinzufügen, das fehlende Bild aus dem jquery-ui-base, als viele meinten, ich hätte den cache zu löschen in Chrome zu sehen, der Pfeil Bilder. Scheint zu funktionieren jetzt.

    InformationsquelleAutor mark

  3. 0

    Ich hatte die selbe Herausforderung. Wenn du mit der rechten Maustaste, wo Sie wissen, dass das Bild des Pfeils werden soll, und wählen Sie "view background image", Sie werden in der Lage sein, um herauszufinden, ob oder nicht der datepicker ist das finden der Bild. Wenn ich es angeklickt, es gab eine Meldung wie "konnte nicht das Bild ..." und musste dann den Pfad der Datei, die Sie war auf der Suche über das Bild. Dann fand ich die Datei mit dem gleichen Namen aus dem jquery-UI-Ordner, den ich runtergeladen hatte und zog es an den Datei-Pfad angezeigt, in der Fehlermeldung.

    Dass für mich gearbeitet. Nicht sicher, wenn Sie mit der gleichen Herausforderung. 🙂

    InformationsquelleAutor eatCitrus

  4. 0

    Ich denke, ich habe vielleicht die Antwort gefunden. Scheint so, als wenn ich entfernen Sie die 

    media="all"

    Teil aus dem Abschnitt es funktioniert.

    InformationsquelleAutor Teod0r

  5. 0

    Fand ich, dass die Bilder der Pfeile nicht angezeigt, weil der Berechtigungen, die von den image-Ordner. Ich hatte kopiert den gesamten image-Ordner aus der zip-Datei, die ich heruntergeladen http://jqueryui.com.

    Einmal wechselte ich die Berechtigungen für alle Benutzer in der Lage sein zu Lesen, nur die Bilder erschienen.

    InformationsquelleAutor Robert Smith

  6. 0

    Können Sie die jQuery UI-Dateien aus einer externen Quelle, anstatt Sie runterzuladen (es sei denn, Sie möchten eine individuelle theme). Ich habe ein JSFiddle, dass highlights der Datepicker ' s Pfeile. Für diese Geige, die ich ausgewählt habe, das folgende aus "Frameworks & Extentions" - segment der sidebar:

    • jQuery 2.0.2 mit jQuery-UI-1.10.3

    Beachten Sie, dass die obige Auswahl sind externe frameworks und sollte funktionieren auf die gleiche Weise für alle Benutzer.

    HTML

    <div id="datepicker">
    <!-- jQuery UI datepicker goes here -->
</div>

    CSS

    /* This CSS will put a solid red border around the arrow symbols. */
.ui-datepicker-header .ui-icon {
    border:2px solid #F00;
}

    jQuery

    //This jQuery will embed a datepicker widget into the page itself,
//not as an overlay element.

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

    InformationsquelleAutor 017Bluefield

Schreibe einen Kommentar