TextBox MVC上的jQuery DataPicker

Question

我想在TextBox上安装jQuery DataPicker。 一切正常，但我必须手动输入日期。 我无法通过jQuery日历设置日期。 我从Search the details using date

获得了此代码

http://prntscr.com/91rbas 这就是我想要做的。

    @model IEnumerable<AutoMonit.Models.Oplata>

<h2>Zestawienie opłat pojazdów</h2>

<script type="text/javascript">
    $(document).ready(function () {
        $(".DatePicker").datepicker({
            dateFormat: 'yyyy MM dd',
            changeMonth: true,
            changeYear: true,
            changeDay: true,
        });
    });
</script>

<p>
    @Html.ActionLink("Utwórz", "Create")
</p>

@{
    var fromDate = (DateTime)ViewBag.fromDate;
    var toDate = (DateTime)ViewBag.toDate;
}

@using (Html.BeginForm("Index", "Oplatas", FormMethod.Get))
{
    <p>
        Rodzaj oplaty: @Html.DropDownList("oplataTyp", "Wszystkie")<br />
        Numer rejestracyjny: @Html.TextBox("szukajRej") <br />
        Od: @Html.TextBox("fromDate", string.Format("{0:yyyy-MM-dd}", fromDate), new { @class = "DatePicker" })
        Do: @Html.TextBox("toDate", string.Format("{0:yyyy-MM-dd}", toDate), new { @class = "DatePicker" })
        <br />
        <input type="submit" value="Szukaj" />
    </p>
}

<br />
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.TablicaRejstracyjna)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Pojazd.Marka)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DataOplaty)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PrzebiegOplaty)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.RodzajOplaty)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.KwotaOplaty)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DodatkoweInformacjeOplaty)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.TablicaRejstracyjna)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Pojazd.Marka)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DataOplaty)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PrzebiegOplaty)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RodzajOplaty)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.KwotaOplaty)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DodatkoweInformacjeOplaty)
            </td>
            <td>
                @Html.ActionLink("Edytuj", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Szczegóły", "Details", new { id = item.ID }) |
                @Html.ActionLink("Usuń", "Delete", new { id = item.ID })
            </td>
        </tr>
    }

</table>

@if (ViewBag.SumowanieOplat != null)
{
    <hr />
    <h2>
        Suma kosztów:
        @ViewBag.SumowanieOplat zł
    </h2>
}