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

Question

Please how can we apply a date-picker to a text-box that is not bound to any model field?

For example, I have a 2 text boxes, dt1 & dt2 used to pass a date range to a controller, but the model for the this controller has as no date fields.

My view:

<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

Use

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

and move

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

after the </div>

If you're using bootstrap-datepicker (you can install it with this NuGet package ), you can create a daterange with

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

and the javascript code,

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

Answer 2

I face the same problem and that is my steps to solve it:
1. install bootstrap datepicker:
right click on solution --> manage nuget packages for solution --> search for bootstrap datepicker and install it
2. in file _Layout.cshtml add those files "bootstrap-datepicker.css & bootstrap-datepicker.js" :
Note: add the files after bootstrap and jquery script files to be like that :

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

3. in your view page add the html element for the datepicker:

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

4. use this script:

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