Question

在MVC 5中，当我点击Bootstrap图标时，我试图让jquery UI datepicker打开。

我有这个代码可以工作，但它没有链接附加图标。它只链接文本框。

$(function () {
    $("#ReportRunDate").datepicker();
});

<div class="input-group">
    @Html.TextBoxFor(m => m.ReportRunDate, new { @class = "form-control datepicker" })
    <span class="input-group-addon">
        <span class="fas fa-calendar-alt"></span>
    </span>
</div>

我找到了使附加组件可点击的示例，但没有使用TextboxFor，只有输入字段。我也尝试添加和id到输入组div并从JQuery调用，但它根本没有渲染，所以它显示所有堆叠的文本框，日历和图标。

$(function () {
    $("#reportDatePicker").datepicker();
});

<div class="input-group datepicker" id="reportDatePicker">
    @Html.TextBoxFor(m => m.ReportRunDate, new { @class = "form-control" })
    <span class="input-group-addon">
        <span class="fas fa-calendar-alt"></span>
    </span>
</div>

更新 - 已修复

    $(function () {
        $(".date-picker").datepicker();
    });

 <div class="col-md-3">
    <div class="input-group">
        @Html.TextBoxFor(m => m.ReportRunDate, new { @class = "form-control date-picker" })
        <label for="ReportRunDate" class="input-group-addon btn">
            <span class="fas fa-calendar-alt"></span>
        </label>
    </div>
    @Html.ValidationMessageFor(m => m.ReportRunDate, "", new { @class = "error-msg" })
</div>

带有Bootstrap 3的MVC 5 TextboxFor图标无法打开datepicker？

0 个答案: