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

Question

我有以下实现，允许用户单击调用 jquery 日期选择器的文本框。我希望在文本框旁边添加一个 glphyicon，它将调用填充相同文本框/InputModel 的 jquery 日期选择器，以便它将绑定(bind)到 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>

Answer 1

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