如何在 TextBox 输入旁边获取 JQuery DatePicker 图标？

问题描述

我一直在研究 ASP.net MVC 应用程序。我似乎看不到文本框旁边的 JQuery Datepicker 图标。

有没有办法解决这个问题？非常感谢。

查看 HTML

//View
@using (Html.BeginForm())
{
    <table>
        <thead>
            <tr>
                <th style="padding: 4px; vertical-align:top;">
                    <div>
                        <span>
                            <input class="form-control" id="min" type="text" name="start" placeholder="Select a day of the week:" autocomplete="off" style="width:160px" readonly="readonly" />
                        </span>
                    </div>
                </th>
                <th style="padding: 4px; vertical-align:top;">
                    <input class="btn btn-primary" type="submit" formaction="/ScheduleView/SchCreate" formmethod="post" id="btnLoad" name="Load" value="Load Week" />
                    <input class="btn btn-danger" type="submit" formaction="/ScheduleView/SchCreate" formmethod="post" id="btnApprove" name="Approve" value="Approve" />
                </th>
            </tr>
        </thead>
    </table>
}

//Datepicker JQuery
            $("#min").datepicker({
                autoHide: true,firstDay: 1,dateFormat: "yy-mm-dd",minDate: new Date(ThisMonday),maxDate: new Date(sunday),showOn: "both",buttonText: "<i class='fa fa-calendar'></i>",onSelect: function () { table.draw(); },changeMonth: true,changeYear: true,autoclose: true

            }).datepicker("setDate",new Date(STDate));

解决方法

这是因为类 form-control 有 display:block：

解决方案：

为#min 添加样式：

<style>
    #min {
        display: inline;
    }
</style>

结果：

或者您可以删除class="form-control"