Verwenden Sie JQuery UI Datepicker mit Icons von JQuery UI Theme

Question

Ich habe eine Datepicker Kontrolle Setup die JQuery UI, ich bin auch die JQuery UI Themen verwendet, die eine Reihe von Standard-Icons zur Verfügung stellen, die ich verwenden mag.

Die Datepicker ermöglicht ein bestimmtes Bild spezifiziert, das heißt:.

<script type="text/javascript">
  $(document).ready(function() {
    $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>  

Um ein Symbol aus dem Icon-Set anzuzeigen verwenden Sie so etwas wie:

<span class="ui-icon ui-icon-calendar"></span>

Gibt es eine einfache, die zwei oder tun integrieren Ich muss nur die Stile heraushacken / Bilder manuell?

Answer 1

Ich fürchte, Sie werden feststellen, dass manuell zu tun haben. Standardmäßig verwendet die Datumsauswahl-Plugin die folgende HTML die angegebene buttonImage einzufügen:

<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger">

Durch die Art und Weise, könnten Sie verwenden möchten ...

$(function() {
 // your code here
});

... statt ...

$(document).ready(function() {
 // your code here
});

Answer 2

Ich habe es funktioniert, indem Sie diese

$("#DateFrom").datepicker({
    showOn: 'button'
}).next('button').button({
    icons: {
        primary: 'ui-icon-calendar'
    }, text:false
});

ändert einfach die Taste, die es neben dem Eingang für den Kalender eingefügt. Standardmäßig werfen sie drei Ellipsen im Text, so entferne ich das auch.

Answer 3

Ich schlage vor, das Bild in die Eingabe setzen

input.date_picker {
  text-align: center;
  background-image: url("images/ui-icon-calendar.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 18px;
  width: 78px;
}

Wie

Ich benutzen dieses Symbol von den schönen < a href = "http://commons.wikimedia.org/wiki/Tango_icons"> Tango-Icons a href Projekt auch in <= "http://upload.wikimedia.org/wikipedia/commons/thumb/ 7/71 / X-office-calendar.svg / 200px-X-office-calendar.svg.png "> png

Vorteile:

• Unabhängig von Javascript
• Lasten sofort mit dem DOM
• Future Datum Eingänge einfach hinzufügen

Answer 4

Der beste Weg sein würde;

Sie zuerst die Javascript verwenden, wie Sie bereits verwendet haben.

 <script type="text/javascript">
   $(document).ready(function() {
        $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
   });
 </script>

Dann fügen Sie den folgenden CSS-Code;

<style type="text/css">
.ui-datepicker-trigger
{
        padding:0px;
        padding-left:5px;
        vertical-align:baseline;

        position:relative;
        top:4px;
        height:18px;
}
</style>

Diese CSS wird Ihnen helfen, den Kalender Bild korrekt auszurichten, wie Sie benötigen.

Answer 5

Nur ein kleines folge auf Evs' Antwort ... (große Hilfe und danke Evs!).

Es funktioniert auch in IE8, und ich fügte CSS den Cursor auf schweben zu ändern:

button.date-picker-button-hidden:hover
{
    cursor: pointer; 
}

Answer 6

http://jqueryui.com/demos/datepicker/#icon-trigger

Ein sehr gutes Beispiel mit dem Beispielcode bereitgestellt wird.

Answer 7

Ausleihe von und Loktar Antwort erstreckt, Sie so etwas wie dies versuchen könnten, bemerke ich nur diese in FF10 getestet habe, aber ich kann nicht sehen, warum es nicht in anderen Browsern funktionieren würde.

$('.date-picker').datepicker({showOn: 'button'})
    .next('button').addClass('date-picker-button-hidden')
    .after($('<span/>')
        .addClass('ui-icon').addClass('ui-icon-calendar').addClass('date-picker-icon'));

Beachten Sie, dass in diesem Beispiel Datumsauswahl-Taste versteckt und Datumsauswahl-Symbol sind meine eigenen Klassen, da ich die jQuery Styling nicht mag CSS-Klassen direkt. Wenden Sie das folgende CSS:

span.date-picker-icon
{
    display: inline-block;
    z-index: -1;
    position: relative;
    left: -16px;
}

button.date-picker-button-hidden
{
    opacity: 0.0;
    filter: alpha(opacity=0);
    height: 16px;
    width: 16px;
    margin: 0;
    padding: 0;
}

Dies ist effektiv ein regelmäßiges jQuery Spanne Symbol hinter der Schaltfläche platzieren. Die Taste ist vollständig see-through / opak (über die CSS), aber weil es immer noch oben auf das Symbol ist, das Symbol klicken löst die Schaltfläche Click-Ereignis.

Answer 8

Ich habe diesen jQuery-Code einen Datepicker für ein TextInput- Feld und ein jQuery UI-Symbol zu erhalten, wie ein Bild auf der Datumsauswahl-Taste zu arbeiten.

// Apply jQuery UI DatePicker to all controls with class = datepicker
    $('.datepicker').datepicker({
        showWeek: true,
        dateFormat: "yy-mm-dd",
        buttonImage: "ui-icon-calendar",
        regional: "sv",
        minDate: "-10Y",
        maxDate: "+10Y",
        showButtonPanel: true,
        buttonImageOnly: false,
        showWeekNumber: true,
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        showOn: "both"

    }).next('button').text('Show calendar').button({ icons: { primary: 'ui-icon-calendar' }, text: false });

Answer 9

Änderung: zu showOn: "beide", // Taste

<input type="text" name="date_from" id="date_from" />        
<input type="text" name="date_to" id="date_to" />

$(function() {
$("#date_from").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_to").datepicker("option", "minDate", selectedDate);
    }
});
$("#date_to").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_from").datepicker("option", "maxDate", selectedDate);
    }
});
});

http://jsfiddle.net/wimarbueno/fpT6q/

Answer 10

geht die Route der manuellen Einstellung eine Schaltfläche / Symbol oben, können Sie dieses Beispiel verwenden aus Wie die jQueryUI Datepicker des Icon-Trigger kombinieren mit Bootstrap 3 der Eingangsgruppen ein JS Click-Ereignis auf dem betreffenden Zeitpunkt den Fokus haben, eingestellt Eingabefeld und löst damit die jQueryUI Datum Funktionalität erscheinen.

Oder, wie die Dokumentation Zustände , können Sie die show Methode verwenden, um Anzeige der Datumsauswahl (beachten Sie, dass „Wenn die Datepicker mit einem Eingang angeschlossen ist, muss der Eingang sichtbar sein für die Datumsauswahl angezeigt werden.“).

$( ".selector" ).datepicker( "show" );

Auf diese Weise können Sie was auch immer Taste / Bild / Symbol neben einem Eingabefeld verwenden, und der Lage sein, auf die Schaltfläche / Bild / Symbol klicken, um das Datum Funktionalität für das Eingabefeld auszulösen.

Answer 11

habe ich dies zu arbeiten, um die HTML-Zugabe für mein Symbol Schaltfläche direkt in die buttonText Option und das Deaktivieren der Option buttonImage.

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});