MVC4 JQuery Datepicker для захвата даты из поля ввода

0

Кто-нибудь получил опыт использования jquery ui datepicker с Razor @Html.TextBoxFor(...)

Я пытаюсь разрешить пользователю выбирать дату с использованием метки Razor для генерации текстового поля, при нажатии будет отображаться Datepicker из пользовательского интерфейса jquery. Я не уверен, если:

@using (Html.BeginForm("New","Order"))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
    @Html.LabelFor(m => m.OrderInfo.installdate)
    @Html.TextBoxFor(m => m.OrderInfo.installdate, new {@id="dp"})
    </fieldset>
}

<script type="text/javascript">
 $(document).ready(function () {

        $("#dp").datepicker();
    });
</script>

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui")

Ran в этом порядке, и неважно, измените, не можете отобразить дату.

Можно ли это сделать так?

  • 0
    Вы также включили jquery (не только jqueryui)?
  • 0
    JQuery включить находится в нижней части моего макета, я обновил заказ
Показать ещё 5 комментариев
Теги:
razor
datepicker
asp.net-mvc-4

1 ответ

1
Лучший ответ

Убедитесь, что вы связали ресурсы

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js");
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js");
bundles.Add(new StyleBundle("~/bundles/themes/base").Include(
    "~/content/themes/base/jquery.ui.core.css",
    "~/Content/themes/base/jquery.ui.datepicker.css",
    ...
);

Включите их в надлежащем порядке

Layout.cshtml

<html>
<head>
    @Styles.Render("~/bundles/themes/base")
</head>
<body>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @RenderSection("page_scripts", required: false)
</body>

Теперь View... Поскольку скрипты были включены в макет, представление не нуждается в этом.

@Html.TextBoxFor(m => m.installdate, new { @id="dp" })

@section page_scripts {
    <script>
        $(document).ready(function () {
            $("#dp").datepicker({ ... });
        });
    </script>
}

Если у вас его нет на макете или не использовать

@Html.TextBoxFor(m => m.installdate, new { @id="dp" })

@Styles.Render("~/bundles/themes/base")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<script>
    $(document).ready(function () {
        $("#dp").datepicker({ ... });
    });
</script>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню