Ouvrez JQuery Datepicker en cliquant sur une image sans champ de saisie.

Question

Je veux avoir le Datepicker de JQuery ouvrir lorsque l'utilisateur clique sur une image. Il n'y a pas de champ de saisie où la date sélectionnée s'affiche par la suite; je vais enregistrer la date écrite sur le serveur via Ajax.

Actuellement, j'ai ce code:

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

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

Mais rien ne se passe quand je clique sur l'image. J'ai aussi essayé de sauvegarder le résultat de la datepicker() appel global var et puis l'appel de datepicker('show') de la onclick() l'événement de l'image, mais même résultat.

Answer 1

Il s'avère qu'un simple champ de saisie masqué fait le travail:

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

Et utilisez ensuite l'attribut buttonImage pour votre image, comme d'habitude:

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

Au départ, j'ai essayé un champ de saisie de texte, puis défini un style display:none , mais le calendrier est sorti du haut du navigateur plutôt que de l'endroit où l'utilisateur a cliqué. Mais le champ caché fonctionne comme vous le souhaitez.

Answer 2

La documentation de jQuery indique que datePicker doit être associé à un SPAN ou à un DIV lorsqu'il n'est pas associé à une zone de saisie. Vous pouvez faire quelque chose comme ça:

 <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

Si vous utilisez un champ de saisie et une icône (comme dans cet exemple):

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

Vous pouvez attacher le datepicker à votre icône (dans mon cas, dans la balise A via CSS) comme ceci:

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

Answer 4

Pour modifier le "..." lorsque la souris survole l'icône du calendrier, vous devez ajouter les éléments suivants dans les options de l'ordre DatePicker:

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

Answer 5

HTML:

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

CODE:

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