Bootstrap 3 Placer l'icône dans le champ de saisie

Je travaille dans le Bootstrap 3 et essaye de devenir une icône de calendrier à l'intérieur du côté droit de la zone d'entrée.

Mon code html ressemble à ceci:

<div class="col-md-12">
    <div class='right-inner-addon col-md-2 date datepicker' 
         data-date-format="yyyy-mm-dd">
        <input name='name' value="" type="text" class="form-control date-picker"
               data-date-format="yyyy-mm-dd"/>
        <i class="fa fa-calendar"></i>
    </div>
</div>

J'ai essayé position: absolute comme ceci:

.right-inner-addon i {
    position: absolute;
    right: 5px;
    top: 10px;
    pointer-events: none;
    font-size: 1.5em;
}
.right-inner-addon {
    position: relative;
}

Mais quand je le fais, il aura fière allure dans un seul endroit, mais ne sera pas positionné correctement dans une autre instance.

J'ai aussi essayé de voir si je pouvais utiliser text-indent pour voir si cela fonctionnerait dans l'ensemble, mais il a eu le même effet.

.right-inner-addon i, 
.form-group .right-inner-addon i {
    display: inline-block;
    z-index: 3;
    text-indent: -15px;
    font-size: 1.3em;
}

Voici un jsFiddle qui pourraient aider

source d'informationauteur zazvorniki

Vous pouvez utiliser input-group add-on avec un input-group-btn.

<div class="col-md-12">
    <div class='input-group add-on col-md-2 date datepicker' 
         data-date-format="yyyy-mm-dd">
        <input name='name' value="" type="text" class="form-control date-picker" 
               data-date-format="yyyy-mm-dd"/>
        <div class="input-group-btn">
            <button class="btn btn-default">
                <i class="fa fa-calendar"></i>
            </button>
        </div>
    </div>
</div>

Avec un peu de CSS pour masquer le bouton de la frontière:

/* remove border between controls */
.add-on .input-group-btn > .btn {
    border-left-width: 0;
    left:-2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
    -webkit-box-shadow: none; 
            box-shadow: none;
    border-color:#cccccc; 
}

Démo: http://bootply.com/128059

10

À l'aide de bootstrap natif des états de validation est probablement préférable à l'écriture de CSS personnalisé ici.

^{Et je suis assez sûr que je suis le seul qui est venu avec le CSS en question.}

Suffit d'utiliser .has-feedback sur votre formulaire-groupe et .form-control-feedback sur votre icône:
```
<div class="form-group has-feedback">
    <label class="control-label sr-only">DatePicker</label>
    <input type="text" class="form-control date-picker" /> 
    <i class="fa fa-calendar form-control-feedback"></i>
</div>
```
La démo en jsFiddle
2

Vérifiez ce violonadapté de cette réponse

La différence étant que, dans votre cas, la <i> a été placé après <input>. La permutation leur permet de travailler. C'est pourquoi le positionnement a été la création d'un gâchis, par opposition à la cité de réponse.

Dans les réponses ci-dessus, Saisie, cliquez sur les œuvres, mais cliquez sur j'ai de la balise ne fonctionne pas.
j'ai donc ajouté mon code en réponse @KyleMit

<div class="form-group has-feedback">
  <input type="text" name="txtDatepicker" class="form-control date-picker" /> 
  <i class="glyphicon glyphicon-calendar" 
    onclick="javascript:$('input[name=txtDatepicker]').data('DateTimePicker').show();">
  </i>
</div>

J'ai modifié le css peu pour mon UI. Vous pouvez également changer.

<style>
  .right-inner-addon {
    position: relative;
   }

    .right-inner-addon input {
        padding-right: 30px;
    }

    .right-inner-addon i {
        position: absolute;
        left: 256px;
        padding: 14px 12px;
    }
</style>

Vous devez vous connecter pour publier un commentaire.

La démo en jsFiddle