C# 如何将datepicker应用于MVC5中的文本框而不绑定到模型日期字段

请问如何将日期选择器应用于未绑定到任何模型字段的文本框

例如，我有两个文本框，dt1和dt2用于将日期范围传递给控制器，但此控制器的模型没有日期字段

我的看法是：

<script type="text/javascript">
    $(function () {
        // This will make every element with the class "date-picker" into a DatePicker element
        $('.date-picker').datepicker();
    })
</script>

<div>
    <h2>Settled Report</h2><br />
    @using (Html.BeginForm("SettledReports", "POSReportController", FormMethod.Get))
    {
        <p>
            Accounts: @Html.DropDownList("accountNumber")
            Start Date: @Html.TextBox("dt1")
            End Date: @Html.TextBox("dt2")

            <input type="submit" value="View Report" />
        </p>
    }
    <h3>Transaction Breakdown</h3><br />
    <table class="table">
        <tr><th>SN</th><th>Card Type</th><th>Trans Count</th><th>Total Gross</th><th>Total Surcharge</th><th>Total Net</th></tr>
        @foreach (var item in Model.summary)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.sn)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.cardType)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.transCount)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.gross)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.surcharge)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.net)
                </td>
            </tr>
        }
    </table>
    <br />
    <table class="table">
        <tr><td>SN</td><td>Merchant</td><td>Trans Date</td><td>Merchant ID</td><td>Terminal ID</td><td>STAN</td><td>Card No.</td><td>Trans Type</td><td>Approval Code</td><td>Gross Amount</td><td>POS Charge</td><td>Net Amount</td><td>Settlement Date</td></tr>
        @foreach (var item in Model.detail)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.sn)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.merchant)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.transDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.merchantID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.terminalID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.stan)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.cardNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.transType)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.approvalCode)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.gross)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.posCharge)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.net)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.settlementDate)
                </td>
            </tr>
        }
    </table>
</div>

使用

搬家

<script type="text/javascript">
    $(function () {
        // This will make every element with the class "date-picker" into a DatePicker element
        $('.date-picker').datepicker();
    })
 </script>

---

我面临同样的问题，这就是我解决问题的步骤： 1.安装引导日期选择器： 右键单击解决方案->管理解决方案的nuget软件包->搜索引导数据采集器并安装它 2.在文件_Layout.cshtml中添加那些文件bootstrap-datepicker.css和bootstrap-datepicker.js： 注意：在引导和jquery脚本文件之后添加如下文件：

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/bootstrap.js"></script>

@*Define Bootstrap DatePicker to use in index page*@
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-datepicker.js"></script>

在视图页面中，为日期选择器添加html元素：

@Html.TextBoxdatepicker1，null，新{@class=date picker}

使用以下脚本：

$function{ //这将使具有类date picker的每个元素都成为DatePicker元素 $'.date picker'.date picker； }

---

您应该使用一个视图模型，但是什么datepicker-HTML5 datepicker的jquey插件？请选择其中一个。谢谢展示你的观点。如果您需要HTML5日期选择器，那么输入需要type=date，否则您需要使用id或类名将jquery插件附加到元素。我已附加了有问题的视图$'.date picker'。日期选择器需要有引导日期选择器插件，你有本节中的参考资料吗？我想引导datepicker插件没有随MVC5一起提供？没有，但你可以使用Nuget@CharlesO安装它，你也可以使用jquery ui datepicker，默认情况下它已经包含在你的应用程序中。@CharlesO是对的，只需将它包含在你的布局中即可。

<div class="input-daterange">
    @Html.TextBox("dt1", null, new {@class="input-small"})
    <span class="add-on">to</span>
    @Html.TextBox("dt2", null, new {@class="input-small"})
</div>

$(".input-daterange input").each(function (){
    $(this).datepicker(“clearDates”);
});

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/bootstrap.js"></script>

@*Define Bootstrap DatePicker to use in index page*@
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-datepicker.js"></script>