Comment aligner le Datepicker de zone de texte à droite de bord?

J'ai jQuery UI Datepicker sur le bord supérieur droit de ma mise en page.
Par défaut, il s'ouvre aligné sur le bord gauche de sa zone de texte.
Ainsi, il tombe de la mise en page:

Comment faire ouvrir aligné sur le bord droit de sa zone de texte?

OriginalL'auteur Michał Pękała | 2010-06-17

17

Il m'a fallu un certain temps pour comprendre cela.
```
$('.date').datepicker({
    beforeShow: function(input, inst) {
        var widget = $(inst).datepicker('widget');
        widget.css('margin-left', $(input).outerWidth() - widget.outerWidth());
    }
});
```
Si vous avez 2 datepicker champs sur une seule page, dès que vous ouvrez l'un avec ce script, tous les autres datepicker champs deviennent aligné à droite.
Si le widget à gauche de la position déjà ajusté en raison de la petite fenêtre, la marge laissée trop.

OriginalL'auteur Alex Barker

Je sais que c'est une vieille question... mais toujours pas de solution native... voici une mise à jour de bout de code:

$('.datepicker').datepicker({
    beforeShow:function( input, inst )
    {
        var dp = $(inst.dpDiv);
        var offset = $(input).outerWidth(false) - dp.outerWidth(false);
        dp.css('margin-left', offset);
    }
});

OriginalL'auteur Bradley

Alex solution était gentil, mais il ne fonctionne pas bien si vous avez essayé de redimensionner la fenêtre vers le bas. Le problème est que jquery ui est en train de calculer la position de widget, de sorte qu'il n'est jamais hors de la vue. Le truc, c'est qu'il ne fonctionne pas bien avec Alex de la solution. J'ai changé le code source (qui n'est pas très agréable, mais la seule solution que j'ai trouvé) pour atteindre le résultat. Voici la fonction en ligne 3960 que j'ai changé:

/* Check positioning to remain on screen. */
_checkOffset: function(inst, offset, isFixed) {
//CHANGED This way I can add class date-right to the input to make it right aligned
var isRightAlign = inst.input.hasClass('date-right');
var dpWidth = inst.dpDiv.outerWidth();
var dpHeight = inst.dpDiv.outerHeight();
var inputWidth = inst.input ? inst.input.outerWidth() : 0;
var inputHeight = inst.input ? inst.input.outerHeight() : 0;
var viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft());
var viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : $(document).scrollTop());
//CHANGED Alex's solution is implemented on the next line (just add || isRightAlign)
offset.left -= (this._get(inst, 'isRTL') || isRightAlign ? (dpWidth - inputWidth) : 0);
offset.left -= (isFixed && offset.left == inst.input.offset().left) ? $(document).scrollLeft() : 0;
offset.top -= (isFixed && offset.top == (inst.input.offset().top + inputHeight)) ? $(document).scrollTop() : 0;
//CHANGED Do not check if datepicker is outside of the viewport if it's right aligned
if(!isRightAlign){
//now check if datepicker is showing outside window viewport - move to a better place if so.
offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
Math.abs(offset.left + dpWidth - viewWidth) : 0);
}
offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
Math.abs(dpHeight + inputHeight) : 0);
return offset;
},

OriginalL'auteur Žan Kusterle

1

Cela a été la réponse ici: https://stackoverflow.com/a/28113070/6173628

L'option d'orientation est-ce qui fonctionne:
```
//datepicker
$('dob').on('click',function(){
$('.datepicker').datepicker({
"format": "dd/mm/yyyy",
"autoclose": true,
"orientation": right
});
});
```
Je crois que cette réponse est pour des bottes datepicker tandis que les op se pose au sujet de l'jQuery UI datepicker.

OriginalL'auteur Zachary Vorwaller
0

Vous pouvez aligner jQuery UI date-picker de droite correspondant au champ de saisie.

[Ici -176 est la largeur de mon datepicker div, vous pouvez modifier en fonction de votre besoin.]

Veuillez Vérifier L'Exécution De Démonstration

http://jsfiddle.net/VijayDhanvai/m795n3zx/

http://jsfiddle.net/m795n3zx/
```
$(document).ready(function () {
$('#txtDateFrom,#txtDateTo').datepicker({
changeYear: true,
beforeShow: function (textbox, instance) {   
instance.dpDiv.css({
marginLeft: textbox.offsetWidth+ (-176) + 'px'
});
}
});
});
```
OriginalL'auteur Vijay Dhanvai

C'est simple. Vous pouvez le faire de cette manière. La clé est d'utiliser la marge de gauche plutôt de changer à gauche de la valeur. Ce code fonctionne pour un de trop. Cela signifie que si il n'y a pas assez d'espace dans le côté gauche de la zone de texte qu'il va rendre à partir de la gauche:0 plutôt que de droit:0 de la zone de texte.

$(".date").datepicker({
dateFormat: "yy-mm-dd",
changeYear: true,
minDate:0,
yearRange: "+0:+2",
beforeShow: function (textbox, instance) {
marginLeftDatepicker=  $(instance.dpDiv).outerWidth() - 
$(textbox).outerWidth()
datePickerWidth = $(instance.dpDiv).outerWidth();
var datepickerOffset = $(textbox).offset();
if(datepickerOffset.left > datePickerWidth){ //this condition 
will allign right 0 according to textbox
instance.dpDiv.css({
marginLeft: -marginLeftDatepicker + 'px'
});
} else { //for resize if you resize and dont have enough 
space to align from righ so keep it allign left
instance.dpDiv.css({
marginLeft: 0
});
}
}
});

C'est la façon la plus appropriée de beaucoup de disponibles.

OriginalL'auteur Must Keem J

L'amélioration de Alex Barker réponse lorsque la fenêtre est assez petit pour déplacer le widget.

$('.date').datepicker({
beforeShow: function(input, inst) {
var widget = $(instance).datepicker('widget');
var marginLeft = $(input).outerWidth() - widget.outerWidth();
if ($(input).offset().left + $(widget).outerWidth() > $(window).width()) {
marginLeft += ($(input).offset().left + $(widget).outerWidth()) - $(window).width();
}
marginLeft = marginLeft > 0 ? 0: marginLeft;
widget.css('margin-left', marginLeft);
}
});

OriginalL'auteur Stacker

-1
```
options.widgetPositioning={
horizontal:'right'
,vertical: 'auto'
};
```
cf. https://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning

OriginalL'auteur Herve
-2

Simplement, vous pouvez définir le rtl(Arabes façon) option dans le jQuery. Recherche pour isRTL, puis modifiez la valeur de false à true. ( isRTL:true )

Si vous avez seulement besoin de les aligner ensemble de la boîte de pop-up, eh bien, il vous suffit de définir rtl option et retirer le
la direction de l'attribut dans le css personnalisé.
Par exemple: .ui-datepicker-rtl { }

Mais, ce ne sera pas mis à flèches pour naviguer à travers les mois. Si vous avez besoin de cette fonctionnalité que bien, alors vous avez à faire plus de travail. Vous devez modifier les fonctions de base liées à rtl(recherche de isrtl et changer les valeurs en conséquence) & la modification de la css relatif à rtl.

son non-sens et un hack pour revenir au mode rtl juste pour aligner à droite quelque chose

OriginalL'auteur zap - CG

Vous devez vous connecter pour publier un commentaire.