Usa JQuery UI Datepicker con icone di Jquery UI Tema

Question

Ho una configurazione di controllo di datepicker utilizzando l'interfaccia utente di JQuery, sto anche utilizzando i temi dell'interfaccia utente JQuery che forniscono una serie di icone predefinite che desidero utilizzare.

Il DatePicker permette di specificare un'immagine specifica, vale a dire:

<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 si usa qualcosa come:

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

v'è un facile da integrare le due o devo solo modificare manualmente gli stili/le immagini?

Answer 1

temo che dovrete farlo manualmente. Per impostazione predefinita, il plugin Datepicker utilizza il seguente codice HTML per inserire il specificato buttonImage:

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

A proposito, si potrebbe desiderare di utilizzare ...

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

... invece di ...

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

Answer 2

ho ottenuto che funziona in questo modo

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

modifica solo il pulsante che si inserisce accanto al tuo ingresso per il calendario. Di default lanciano tre ellissi nel testo, quindi rimuoverò anche quello.

Answer 3

Suggerisco di mettere l'immagine in ingresso

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 this icon dal bel progetto tango icons disponibile anche in png

Vantaggi:

• indipendente da JavaScript
• carichi istantaneamente con i DOM
• ingressi data futura facile aggiungere

Answer 4

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

Un buon esempio con il codice di esempio è fornito.

Answer 5

Prendendo in prestito da e estendere la risposta di Loktar, si potrebbe provare qualcosa di simile, nota ho provato solo questo FF10, ma non riesco a capire perché non dovrebbe funzionare 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, data-raccoglitrice-button-nascosto e data-raccoglitrice-icon sono le mie classi, dal momento che non mi piace lo styling direttamente le classi jQuery CSS. Applicare 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; 
} 

Questa è effettivamente posizionando un'icona di span jQuery normale dietro il pulsante. Il pulsante è completamente trasparente/opaco (tramite il CSS), tuttavia poiché è ancora in cima all'icona, facendo clic sull'icona si attiva l'evento clic del pulsante.

Answer 6

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

Funziona in IE8 troppo, e ho aggiunto CSS per modificare il cursore al passaggio del mouse:

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

Answer 7

Il modo migliore sarebbe quello di;

Per prima cosa utilizzare il javascript come si è già utilizzato.

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

Quindi, aggiungere 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 file ti aiuterà ad allineare correttamente l'immagine del calendario come richiesto.

Answer 8

Ho usato questo codice jquery per ottenere un datepicker per un campo textinput 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

cambiamento: a showOn: pulsante "entrambi", //

<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

Andando il percorso di impostare manualmente un/icona del pulsante, è possibile utilizzare questo esempio da How to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups per avere un evento click JS impostare lo stato attivo sul relativo campo di immissione della data, attivando così la funzionalità di data jQueryUI da visualizzare.

O, come i documentation stati, è possibile utilizzare il metodo show per visualizzare la selezione data (si noti che "Se il DatePicker è collegata ad un ingresso, l'ingresso deve essere visibile per il DatePicker per essere mostrato.").

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

Questo consente di utilizzare qualunque pulsante/immagine/icona accanto a un campo di input, ed essere in grado di fare clic sul pulsante/immagine/icona per attivare la funzionalità di data per il campo di input.