web-dev-qa-db-fra.com

Afficher le sélecteur de date de l'interface utilisateur JQuery dans le champ de saisie, cliquez sur?

OK, c'est peut-être un problème trivial, mais je suis très intéressé de voir si quelqu'un a des idées à ce sujet:

J'utilise l'interface utilisateur de JQuery. J'ai un champ <input id="#myfield" type="text"> et j'appelle $('#myfield').datepicker(). Le sélecteur de date indique chaque fois que le champ est mis en évidence. Mais le champ est le premier de mon formulaire et est déjà actif lors du chargement. Un clic sur le champ ne l’affiche donc pas. De plus, si je ferme le sélecteur de date avec la touche Échap, je ne pourrai plus l'ouvrir en cliquant sur le champ, pour la même raison: il est déjà actif.

Je suis conscient que je pourrais définir le paramètre .datepicker({showOn: 'button'}) mais je ne veux pas le bouton. Existe-t-il un moyen d’afficher le sélecteur de date lorsque le champ est mis en évidence OR est cliqué alors qu’il est déjà activé? J'ai déjà essayé $('#myfield').click( function () { $(this).focus() } ) et le sélecteur de date s'ouvre correctement lorsque je clique sur le champ de saisie, mais lorsque je sélectionne une date, celle-ci n'apparaît pas dans le champ.

jqueryjquery-uifocusdatepickerjquery-ui-datepicker
8
alexg

Essaye ça

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#date1').datepicker();

$('#date1').focus(function(){
    $('#date1').datepicker('show');
});

$('#date1').click(function(){
    $('#date1').datepicker('show');
});
//$('#ui-datepicker-div').show();
$('#date1').datepicker('show');
});
</script>
</head>
<body>
<input type="text" name="date1" id='date1'>
</body>
</html>
17
Rajan Rawal

Ce problème ne répondra pas à votre question, mais pourrait être un problème, si votre problème de ne pas avoir le bouton sélecteur de date, est lié à avoir le bouton sélecteur de date ... si cela a un sens?

J'ai eu un problème où je ne voulais pas avoir le bouton à cause des utilisateurs qui parcouraient mon formulaire/page, et je ne voulais pas que le bouton ait le focus. (Expérience UI étrange)

Si c'est également votre cas ... vous pouvez toujours supprimer son objectif en procédant comme suit ... (Cela résoudra également le problème que vous rencontrez maintenant.)

$('#field').datepicker({
      showOn: 'button',
      buttonImage: "/image_path/image.png",
 }).next('img.ui-datepicker-trigger').attr('tabIndex', "-1");
2
Rohan Büchner

J'ai eu un scénario similaire: premier champ sur la page et il devrait charger fermé, sans le bouton, et être ouvert uniquement sur le clic de l'utilisateur. Mais c'était dans un composant 'searchbar' fermé, donc changer le comportement par défaut n'était pas une option. Voici ma solution de contournement:

$(document).ready(function () {
        //getting the controls on the form context
        var calendarios = $('.calendarBox', "#frmOccurrencesHistory");
        //set an invalid option - avoid open on focus and show the buttons
        calendarios.datepicker("option", "showOn", "click");
        //handle click button
        calendarios.each(function () {
            $(this).click(function () {
                $(this).datepicker('show');
            });
        });
    });

Pas joli, pas parfait, il y a un flash du calendrier quand les pages se chargent, mais c'est comme ça que je suis allé

1
Alexandre
 $("#datepicker").datepicker({
   dateFormat:'dd/M/yy',
   minDate: 'now',
   changeMonth:true,
   changeYear:true,
   showOn: "focus",
   //buttonImage: "YourImage",
   buttonImageOnly: true, 
   yearRange: "-100:+0",  
}); 

  $( "datepicker" ).datepicker( "option", "disabled", true );
0
Girish