Question

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

例如，我有一个2个文本框，dt1＆amp; 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>

Answer 1

使用

@Html.TextBox("dt1", null, new {@class="date-picker"})

并移动

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

在</div>

之后

如果您正在使用https://github.com/whatwg/wattsi/blob/master/src/lib/compile.sh（可以使用此bootstrap-datepicker进行安装），则可以使用

创建日期范围

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

和javascript代码，

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

Answer 2

我面临同样的问题，这是我要解决的步骤：
1.安装引导程序日期选择器：
右键单击解决方案->管理解决方案的nuget软件包->搜索bootstrap datepicker并安装
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>

在您的视图页面中，为datepicker添加html元素：

@ Html.TextBox（“ datepicker1”，null，新的{@class =“ date-picker”}）
使用此脚本：

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

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

2 个答案: