Aprire JQuery Datepicker facendo clic su un'immagine senza campo di input

Question

Desidero che JQuery Datepicker sia aperto quando l'utente fa clic su un'immagine. Non esiste un campo di input in cui la data selezionata venga visualizzata in seguito; Sto solo andando a salvare la data inserita sul server tramite Ajax.

Attualmente ho questo codice:

<img src='someimage.gif' id="datepicker" /> 

$(document).ready(function() { 
    $("#datepicker").datepicker({ 
      changeMonth: true, 
      changeYear: true, 
     }).click(function() { $(this).datepicker('show'); }); 
}); 

ma non succede nulla quando si fa clic sull'immagine. Ho anche provato a salvare il risultato della chiamata datepicker() a una variabile globale e poi chiamare datepicker ('show') dall'evento onclick() dell'immagine, ma lo stesso risultato.

Answer 1

scopre che un semplice campo di input nascosto fa il lavoro:

<input type="hidden" id="dp" /> 

e quindi utilizzare l'attributo buttonImage per l'immagine, come normale:

$("#dp").datepicker({ 
     buttonImage: '../images/icon_star.gif', 
     buttonImageOnly: true, 
     changeMonth: true, 
     changeYear: true, 
     showOn: 'both', 
    }); 

Inizialmente ho provato un campo di inserimento del testo e quindi ho impostato uno stile display:none, ma questo ha causato l'emergere del calendario dalla parte superiore del browser, piuttosto che da dove l'utente fa clic ked. Ma il campo nascosto funziona come desiderato.

Answer 2

La documentazione di jQuery indica che datePicker deve essere collegato a uno SPAN oa un DIV quando non è associato a una casella di input. Si potrebbe fare qualcosa di simile:

<img src='someimage.gif' id="datepickerImage" /> 
<div id="datepicker"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#datepicker").datepicker({ 
      changeMonth: true, 
      changeYear: true, 
    }) 
    .hide() 
    .click(function() { 
     $(this).hide(); 
    }); 

    $("#datepickerImage").click(function() { 
     $("#datepicker").show(); 
    }); 
}); 
</script> 

Answer 3

HTML:

<div class="CalendarBlock"> 
    <input type="hidden"> 
</div> 

CODICE:

$CalendarBlock=$('.CalendarBlock'); 
$CalendarBlock.click(function(){ 
    var $datepicker=$(this).find('input'); 
    datepicker.datepicker({dateFormat: 'mm/dd/yy'}); 
    $datepicker.focus(); }); 

Answer 4

Se si utilizza un campo di input e un'icona (come in questo esempio):

<input name="hasta" id="Hasta" type="text" readonly /> 
<a href="#" id="Hasta_icono" ></a> 

è possibile collegare il DatePicker alla tua icona (nel mio caso all'interno del tag A tramite CSS) come questo:

$("#Hasta").datepicker(); 
    $("#Hasta_icono").click(function() { 
    $("#Hasta").datepicker("show"); 
    }); 

Answer 5

Per cambiare il "..." quando il mouse passa sopra l'icona del calendario, è necessario aggiungere il seguente nelle opzioni DatePicker:

showOn: 'button', 
    buttonText: 'Click to show the calendar', 
    buttonImageOnly: true, 
    buttonImage: 'images/cal2.png', 

Answer 6

$(function() { 
    $("#datepicker").datepicker({ 
     //showOn: both - datepicker will come clicking the input box as well as the calendar icon 
     //showOn: button - datepicker will come only clicking the calendar icon 
     showOn: 'button', 
     //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png' 
     buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png', 
     buttonImageOnly: true, 
     changeMonth: true, 
     changeYear: true, 
     showAnim: 'slideDown', 
     duration: 'fast', 
     dateFormat: 'dd-mm-yy' 
    }); 
}); 

Il codice di cui sopra appartiene a this link

Answer 7

Avere un campo di input nascosto causa problemi con il posizionamento della finestra di DatePicker (la finestra di dialogo è centrata orizzontalmente). È possibile modificare il margine del dialogo, ma c'è un modo migliore.

Basta creare un campo di input e "nasconderlo" impostando l'opacità su 0 e rendendolo largo 1px. Posizionalo anche vicino (o sotto) al pulsante, o dove vuoi che appaia il datepicker.

Quindi collegare il datario al campo di immissione "nascosto" e mostrarlo quando l'utente preme il pulsante.

HTML:

<button id="date-button">Show Calendar</button> 
<input type="text" name="date-field" id="date-field" value=""> 

CSS:

#date-button { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
    height 30px; 
} 

#date-field { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    width: 1px; 
    height: 32px; // height of the button + a little margin 
    opacity: 0; 
} 

JS:

$(function() { 
    $('#date-field').datepicker(); 

    $('#date-button').on('click', function() { 
     $('#date-field').datepicker('show'); 
    }); 
}); 

Nota: non testato con tutti i browser.

Answer 8

<img src='someimage.gif' id="datepicker" /> 
<input type="hidden" id="dp" /> 

$(document).on("click", "#datepicker", function() { 
    $("#dp").datepicker({ 
    dateFormat: 'dd-mm-yy', 
    minDate: 'today'}).datepicker("show"); 
    }); 

basta aggiungere questo codice per il clic sull'immagine o qualsiasi altro tag HTML che fa clic sull'evento. Ciò avviene avviando la funzione datepicker quando clicchiamo sul trigger.