從bootstrap 3添加glyphicon到html helper textboxfor

我有以下實現，允許用戶點擊調用jQuery日期選擇器的文本框。我希望在文本框旁邊添加一個glphyicon，該文本框將調用一個jQuery日期選擇器，該日期選擇器填充相同的文本框/ InputModel，以便綁定到InputModel。從bootstrap 3添加glyphicon到html helper textboxfor

// 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>

來源

2017-05-04 user1166085

只要把Glyphicon一個按鈕內再創建一個onclick事件按鈕調用對日期選擇器的show()方法：

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

一定要使用獲得當一個唯一的ID /班按鈕和輸入本身，否則你可能會從所有的形式打開datepickers！

來源

2017-05-04 09:32:42

<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>

來源

2017-05-04 09:39:50

抱歉，但它不工作。只點擊文本框生成日期選擇器，點擊glphyicon不會。我如何去調試這個 – user1166085

我已經找到一種方法來解決這個問題。得到了這個答案從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>

來源

2017-05-05 04:50:49 user1166085

從bootstrap 3添加glyphicon到html helper textboxfor

回答

相關問題