jquery: faire un sélecteur de date afficher/masquer via l'image?

Question

Je souhaite utiliser une image d'un calendrier pour afficher/masquer le quantième jquery. Basé sur la documentation, il semble que je dois définir buttonImage et buttonImageOnly, ce que j'ai. le sélecteur de date fonctionne mais il est toujours visible. voici mon code:

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#datepicker").datepicker({ 
    altField: '#from', 
    altFormat: 'yymmdd', 
    buttonImage: 'datepicker.png', 
    buttonImageOnly: true, 
    defaultDate: <?=getDaysFromToday($_GET['from'])?>, 
    showOn: 'focus' 
    }); 
}); 

$('#datepicker').datepicker({ 
    onSelect: function(dateText, inst) { 
    $("#myform").submit(); 
    } 
}); 
</script> 

Je tente aussi de le faire soumettre un formulaire lorsque vous choisissez une date, je ne peux pas sembler obtenir que ce soit pour travailler.

Est-ce que je fais quelque chose de mal?

Merci!

Answer 1

Remplacer

showOn: 'focus' 

avec

showOn: 'button' 

Cela rendra le datepicker apparaissent uniquement lorsque le bouton est cliqué, pas quand le champ de texte obtient le focus.

Impossible de vous expliquer pourquoi le formulaire submit ne fonctionne pas. Avez-vous lié des événements de soumission au formulaire qui pourrait renvoyer faux?

Depuis this Refres à l'élément d'entrée à l'intérieur du gestionnaire d'événements, peut-être vous pouvez essayer pour le soumettre:

this.form.submit(); 

Modifier après commentaire: Jetez un oeil à this example, le bouton est ajouté automatiquement.

Je viens de me rendre compte que vous avez deux appels distincts au datepicker. La combinaison des deux en un seul pourrait aider à résoudre vos problèmes d'événement:

$("#datepicker").datepicker({ 
    altField: '#from', 
    altFormat: 'yymmdd', 
    buttonImage: 'datepicker.png', 
    buttonImageOnly: true, 
    defaultDate: <?=getDaysFromToday($_GET['from'])?>, 
    showOn: 'focus'. 
    onSelect: function(dateText, inst) { 
     $("#myform").submit(); 
    } 
}); 

Answer 2

Pour ceux qui cherchent à positionner l'icône pas trop près à côté du champ de saisie:

http://forum.jquery.com/topic/altering-position-of-datepicker-icon#14737000001522067

.ui-datepicker-trigger { 
margin-left : 5px; 
vertical-align : top; 
}