2016-10-04 24 views
0

を整合していない私は、UI-ブートストラップ日付ピッカーを持ってUIは、ブートストラップ日付ピッカー

<div class="col-md-2"> 

    <label for="datepicker">Select Date<span class="compulsary">*</span></label><br> 

    <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/> 
    <span class="input-group-btn"> 
    <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> 
    </span> 

</div> 

これは、カレンダーボタンは、入力フィールドの下にはなく、それ以外にも表示され、入力フィールドにCSS

#datepicker{ 
    height: 50px; 
    width: 60%; 
} 

ですあたかも<br>が適用されているかのようになります。ボタンをフィールドの隣に表示します。どうすればこれを達成できますか?

+0

作業スニペットを作成できますか?また、私たちがあなたを助けることができるように見える方法についてのスクリーンショットも表示してください。 –

答えて

2

ブートストラップに従ってinput groupsを使用してください。

<div class="col-md-2"> 

    <label for="datepicker">Select Date<span class="compulsary">*</span></label><br> 

    <div class="input-group"> 
     <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> 
     </span> 
    </div> 

+0

ありがとう!チャームのように働いた! –

0

私はあなたがhorizontal formsを探していると思います。

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label for="datepicker">Select Date<span class="compulsary">*</span></label> 
     <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/> 
    </div> 
</form> 
関連する問題