déplacer la position de bootstrap datepicker

déplacer la position de bootstrap datepicker Puis-je en mesure de déplacer le datepicker près de l'icône de calendrier ??? Un correctif pour ce serait apprécié. datepicker est généré dynamiquement.

J'ai donné l'id de la div

<div class="datepick col-sm-6">
                            <div class='input-group date' id='datetimepicker1' >
                                <input type='text' class="form-control" placeholder="Select Start Date"/>
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                    </div>
    <script>
     $('#datetimepicker1').datepicker({
            autoclose: true,
            startDate: '-0m',
            todayHighlight: true
        }).on('changeDate', function(ev){
            $('#sDate1').text($('#datetimepicker1').data('date'));
            $('#datetimepicker1').datepicker('hide');
        });
    </script>

déplacer la position de bootstrap datepicker

ce qui signifie près de l'icône de calendrier?
À la fin de la div . Maintenant, c'est au début de droite
l'icône qui est à droite est ce que j'ai mentionné calendrier, icône

InformationsquelleAutor Owner | 2016-10-20

2

Ce que vous avez besoin est un peu de jquery

voir ici

JQuery
```
$('#datetimepicker1').click(function(){
    var popup =$(this).offset();
    var popupTop = popup.top - 40;
    $('.ui-datepicker').css({
      'top' : popupTop
     });
});
```
Sur le positionnement de datepicker lire ici
- La accepté de réponse à cette question est en fait pas à la jQuery UI Datepicker. Pour modifier la position de l'jQuery UI Datepicker juste de modifier .ui-datepicker dans le fichier css. La taille de la Datepicker peut également être modifié de cette façon, il suffit de régler la taille de la police.
- La réponse ci-dessus m'a aidé . Merci beaucoup
- Si cela vous aide alors s'il vous plaît accepter cette réponse afin que les utilisateurs avec un problème similaire peut trouver utile. Merci
InformationsquelleAutor Leo the lion
1

Simplement que vous pouvez utiliser a suivi l'exemple de code;
```
$('#input').datepicker({
    orientation: "top right"
});
```
- désolé .. Sa ne fonctionne pas.
- Ensuite, vous pouvez obtenir dynamiquement datepicker du courant de gauche de la position et de la largeur d'entrée et vous pouvez définir la nouvelle position de gauche dynamiquement comme ça [new_left = current_left + input_width]
- Ce travail est pour moi, avec bootstrap-datepicker 1.8.0
InformationsquelleAutor mantissa
1

Pour modifier la valeur par défaut de Bootstrap datetimepicker:

1-) De Jquery
```
$("#datetimepicker1").datetimepicker({
     pickerPosition: 'top-left'
});
```
Autres postes options: en bas à gauche, en haut à droite
- yep utile , mieux que d'utiliser les css personnalisé .. je pense que cela devrait être sélectionné réponse
InformationsquelleAutor dCrystal
0

Vous pouvez remplacer la valeur par défaut de la classe de css de sélecteur de date. Ajouter de style en ligne pour la div de sélecteur de date, par exemple,

changement
```
<div class="datepick col-sm-6">
```
à
```
<div class="datepick col-sm-6" style="position: absolute; left: 865.15px; display: block;">
```
Il remplace le css par défaut. Vous avez besoin d'essayer différentes valeurs pour la gauche de la propriété, pour le rendre meilleur ajustement sur le formulaire.
- Comment puis-je postuler à gauche de la propriété lorsque les attributs de style sont à aller chercher de façon dynamique
- réponse de mise à jour, de l'essayer.
InformationsquelleAutor Qammar Feroz
0

"Container" disponible en option dans le plugin peut venir dans maniable. Vous pouvez utiliser les CSS pour positionner le calendrier où vous en avez besoin. Voici un exemple que j'ai créé sur jsFiddle.

https://jsfiddle.net/giri_jeedigunta/6patf4L5/

HTML:
```
<div class="dt-cont">
  <input type="text" class="datepicker">
</div>
<div id="custom-pos"></div>
```
JS:
```
$('.datepicker').datepicker({
  container: '#custom-pos'
});
```
CSS:
```
#custom-pos {
  position: relative;
  right: -70px;
}
.dropdown-menu {
   left: auto !important;
}
```
InformationsquelleAutor giri-jeedigunta

Vous devez vous connecter pour publier un commentaire.