Comment changer la position contextuelle du contrôle jQuery DatePicker

Question

Aucune idée de la façon d'obtenir le DatePicker à apparaître à la fin de la zone de texte associée au lieu d'être directement en dessous? Ce qui tend à se produire est que la zone de texte est vers le bas de la page et le DatePicker déplace jusqu'à en tenir compte et totalement couvre la zone de texte. Si l'utilisateur veut saisir la date au lieu de le chercher, ils ne peuvent pas. Je préfère qu'elle s'affiche juste après la zone de texte de sorte qu'il n'a pas d'importance la façon dont il s'adapte à la verticale.

Aucune idée de la façon de contrôler le positionnement? Je ne vois pas de paramètres pour le widget, et je n'ai pas eu de chance, le fait de modifier les CSS, mais je pourrais facilement être raté quelque chose.

Answer 1

Je le fais directement dans le CSS:

 .ui-datepicker { 
  margin-left: 100px;
  z-index: 1000;
}
 

Mes champs de saisie de date ont tous une largeur de 100 pixels. J'ai également ajouté l'index z afin que le calendrier apparaisse également au-dessus des fenêtres AJAX.

Je ne modifie pas le fichier CSS jquery-ui; Je surcharge la classe dans mon fichier CSS principal, ce qui me permet de changer de thème ou de mettre à jour le widget sans avoir à entrer à nouveau dans mes mods spécifiques.

Answer 2

Voici ma variante de l'alignement du calendrier Datepicker.

Je pense que c'est très agréable, car vous pouvez contrôler le positionnement via jQuery UI Position util.

Une restriction: jquery.ui.position.js requise.

Code:

 $('input[name=date]').datepicker(
    beforeShow: function(input, inst) {
        // Handle calendar position before showing it.
        // It's not supported by Datepicker itself (for now) so we need to use its internal variables.
        var calendar = inst.dpDiv;

        // Dirty hack, but we can't do anything without it (for now, in jQuery UI 1.8.20)
        setTimeout(function() {
            calendar.position({
                my: 'right top',
                at: 'right bottom',
                collision: 'none',
                of: input
            });
        }, 1);
    }
)
 

Answer 3

La réponse acceptée pour cette question ne concerne en réalité pas jpu uu datepicker. Pour changer la position du Datepicker de l'interface utilisateur jQuery, il suffit de modifier .ui-datepicker dans le fichier css. La taille du Datepicker peut également être modifiée de cette façon, il vous suffit d'ajuster la taille de la police.

Answer 4

Cela fonctionne pour moi:

  beforeShow: function(input, inst) {
     var cal = inst.dpDiv;
     var top  = $(this).offset().top + $(this).outerHeight();
     var left = $(this).offset().left;
     setTimeout(function() {
        cal.css({
            'top' : top,
            'left': left
        });
     }, 10);