web-dev-qa-db-fra.com

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

Je souhaite que JQuery Datepicker soit ouvert lorsque l'utilisateur clique sur une image. Il n'y a pas de champ de saisie où la date sélectionnée apparaît ensuite; Je vais juste sauvegarder la date entrée 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 lorsque je clique sur l'image. J'ai également essayé d'enregistrer le résultat de l'appel datepicker () dans une variable globale, puis d'appeler datepicker ('show') à partir de l'événement onclick () de l'image, mais le même résultat.

jquerydatepicker
70
ep4169

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',
     });

Initialement, j'ai essayé un champ de saisie de texte, puis défini un display:none _ style, mais le calendrier est sorti du haut du navigateur et non de celui sur lequel l'utilisateur a cliqué. Mais le champ caché fonctionne comme vous le souhaitez.

117
ep4169

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, à l'intérieur de la balise A via CSS), comme ceci:

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

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>
23
Jose Basilio

Pour modifier le "..." lorsque la souris survole l'icône de 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',
8
Mohamed Ghr

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(); });
3
Rahen Rangan

Le fait de masquer un champ de saisie entraîne des problèmes de positionnement du dialogue datepicker (le dialogue est centré horizontalement). Vous pouvez modifier la marge du dialogue, mais il existe un meilleur moyen.

Il vous suffit de créer un champ de saisie et de le "masquer" en définissant son opacité sur 0 et en lui donnant une largeur de 1 px. Placez-le également près (ou sous) le bouton, ou à n'importe quel endroit où vous souhaitez que le sélecteur de date apparaisse.

Puis attachez le sélecteur de date au champ de saisie "masqué" et affichez-le lorsque l'utilisateur appuie sur le bouton.

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

Remarque: non testé avec tous les navigateurs.

2
Jari
$(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'
  });
});

Le code ci-dessus appartient à ce lien

1
Kailas
<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" ); 
  });

vous venez d'ajouter ce code pour un clic sur une image ou tout autre événement de clic en cliquant sur une balise html. Ceci est fait en lançant la fonction datepicker quand on clique sur le déclencheur.

0
karthikeyan ganesan