如何获取文本框输入旁边的 JQuery DatePicker 图标？

Posted 2023-05-08

【中文标题】如何获取文本框输入旁边的 JQuery DatePicker 图标？

【英文标题】：How to get JQuery DatePicker icon next to the TextBox input?

【发布时间】：2021-03-29 21:56:54

【问题描述】：

我一直在开发一个 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));

【问题讨论】：

你可以试试：$('#min').closest('span').find('.fa.fa-calendar')

【参考方案1】：

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

解决方案：

将样式添加到#min：

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

结果：

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