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

本文关键字：日期 字段 模型 文本 绑定 选择器 应用于 mvc | 更新日期: 2023-09-27 18:10:15

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

例如，我有两个文本框，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>

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

使用

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

和move 

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

在</div>

之后

如果你正在使用bootstrap-datepicker(你可以用这个NuGet包安装它)，你可以用

创建一个数据范围
<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”);
});

我面临同样的问题，这是我解决它的步骤:
1. 安装引导程序日期选择器:
右键单击解决方案->管理解决方案的nuget包->搜索bootstrap datepicker并安装它
2. 在file_layout中。添加这些文件"bootstrap-datepicker.css &bootstrap-datepicker.js":
注:在bootstrap和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。TextBox("datepicker1"， 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>

    相关文章：