javascript - 从Bootstrap 3将glyphicon添加到html helper textboxfor

我有以下实现，允许用户单击一个调用jquery datepicker的文本框。我希望在文本框旁边添加一个glphyicon图标，该文本框将调用填充相同文本框/ InputModel的jquery datepicker，以便将其绑定到InputModel。

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

最佳答案

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