Usa Datepicker dell'interfaccia utente di JQuery con icone dal tema dell'interfaccia utente di Jquery

Question

Ho un'impostazione del controllo di datepicker usando l'interfaccia utente di JQuery, sto anche usando i temi dell'interfaccia utente di JQuery che forniscono un gruppo di icone predefinite che voglio usare.

DatePicker consente di specificare un'immagine specifica, ad es .:

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

Per visualizzare un'icona dal set di icone usi qualcosa come:

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

Esiste un modo semplice per integrare i due o devo solo hackerare manualmente gli stili / le immagini?

Answer 1

Temo che dovrai farlo manualmente. Per impostazione predefinita, il plug-in Datepicker utilizza il seguente HTML per inserire il buttonImage specificato:

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

A proposito, potresti voler usare ...

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

... invece di ...

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

Answer 2

L'ho fatto funzionare facendo questo

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

Modifica semplicemente il pulsante che inserisce accanto al tuo input per il calendario. Di default lanciano tre ellissi nel testo, quindi lo rimuovo anch'io.

Answer 3

Suggerisco di inserire l'immagine nell'input

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;
}

come

Ho usato questa icona dalla simpatica < a href = "http://commons.wikimedia.org/wiki/Tango_icons"> icone di tango disponibile anche in png

I vantaggi:

• Indipendente da JavaScript
• Carica istantaneamente con il DOM
• Inserimenti di date future facili da aggiungere

Answer 4

Il modo migliore sarebbe;

Prima usa il javascript come hai già usato.

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

Quindi, aggiungi il seguente codice css;

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

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

Questo CSS ti aiuterà ad allineare correttamente l'immagine del calendario come richiesto.

Answer 5

Solo un piccolo seguito alla risposta di Evs ... (grande aiuto e grazie Evs!).

Funziona anche in IE8 e ho aggiunto CSS per cambiare il cursore al passaggio del mouse:

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

Answer 6

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

Viene fornito un ottimo esempio con il codice di esempio.

Answer 7

Prendendo in prestito ed estendendo la risposta di Loktar, potresti provare qualcosa del genere, nota che l'ho testato solo in FF10, ma non riesco a capire perché non funzioni in altri browser.

$('.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'));

Nota che in questo esempio, selettore di date-nascosto-nascosto e selettore di date-icona sono le mie lezioni, dal momento che non mi piace disegnare lo jQuery Classi CSS direttamente. Applica il seguente 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;
}

Questo sta effettivamente posizionando una normale icona di span jQuery dietro il pulsante. Il pulsante è completamente trasparente / opaco (tramite CSS), tuttavia, poiché è ancora nella parte superiore dell'icona, facendo clic sull'icona viene attivato l'evento di clic sul pulsante.

Answer 8

Ho usato questo codice jquery per ottenere un datepicker per un campo di input di testo e un'icona dell'interfaccia utente jquery per funzionare come immagine sul pulsante datepicker.

// 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

modifica: per mostrareOn: " entrambi ", // pulsante

<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

Seguendo la procedura di impostazione manuale di un pulsante / icona, è possibile utilizzare questo esempio da Come combinare il trigger icona jQueryUI DatePicker con i gruppi di input di Bootstrap 3 per fare in modo che un evento JS click attivi la data rilevante campo di input, attivando in tal modo la funzionalità di data jQueryUI per apparire.

Oppure, come afferma la documentazione , puoi utilizzare il mostra il metodo per visualizzare il selettore della data (nota che " Se il datepicker è collegato a un input, l'input deve essere visibile affinché il datepicker sia mostrato. ").

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

Ciò ti consente di utilizzare qualsiasi pulsante / immagine / icona accanto a un campo di input e di essere in grado di fare clic sul pulsante / immagine / icona per attivare la funzionalità data per il campo di input.

Answer 11

Ho funzionato aggiungendo l'HTML per il mio pulsante icona direttamente nell'opzione buttonText e disabilitando l'opzione buttonImage .

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