ブートストラップ3からグリフコンをhtmlヘルパーtextboxforに追加する

Question

私は、jquery datepickerを呼び出すテキストボックスをクリックするための次の実装を持っています。テキストボックスの隣にglphyiconを追加して、InputModelにバインドするように同じテキストボックス/ InputModelを設定するjqueryのdatepickerを呼び出します。

$('.my-button').click(function(e){ 
    $('.my-datepicker').datepicker('show'); 
} 

を取得するときにユニークなID /クラスを使用してください：

// in view 
@Html.TextBoxFor(m => m.InputModel.InputFromDate, 
new { @class ="datepicker", @placeholder = "Enter Date" })}) 

// in js 
$(document).ready({ 
     $('.datepicker').datepicker(); 
    }); 

//add glyphicon 
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 

Answer 1

ちょうどその日付ピッカーに対するshow()メソッドを呼び出すボタンのonclickイベントを作成ボタン内Glyphiconを置きますボタンと入力そのものを入力しなければ、フォーム全体からdatepickersを開くことができます！

Answer 2

<div class="form-group"> 
    <label class="control-label col-md-3">Input From Date</label> 
    <div class="col-md-3"> 
     <div class="input-group input-medium date date-picker" data-date-format="dd-mm-yyyy"> 
      @Html.TextBoxFor(m => m.InputModel.InputFromDate, 
new { @class = "datepicker form-control", @placeholder = "Enter Date" }) 
      <span class="input-group-btn"> 
       <button class="btn default" type="button"> 
        <i class="glyphicon glyphicon-calendar"></i> 
       </button> 
      </span> 
     </div> 
     <!-- /input-group --> 
     <span class="help-block"> Select date </span> 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.datepicker').datepicker(); 
    }); 
</script> 

Answer 3

私は、この問題を解決する方法を発見しました。この回答を得ましたHow to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups

//in js 
<script> 
    $(document).ready(function() { 
     $("#datepicker-from").datepicker(); 
     $("#datepicker-to").datepicker(); 
     $('#fromBtn').click(function() { 
      //alert('clcikec'); 
      $("#datepicker-from").focus(); 
     }); 
     $('#toBtn').click(function() { 
      //alert('clcikec'); 
      $("#datepicker-to").focus(); 
     }); 
    }) 
</script> 

<div class="col-md-3"> 
        <label class="control-label">Date From</label> 
        <div class="input-group">       
         @Html.TextBoxFor(m => m.Input.InputFromDate, new { @id = "datepicker-from", @class = "form-control", @placeholder = "Enter from Date" }) 
         <span class="input-group-addon" id="fromBtn" style="cursor:pointer;"> 
          <span class="glyphicon glyphicon-calendar"></span> 
         </span> 
        </div> 
       </div>