如何在mvc4中实现datetimepicker

Question

在mvc 4中，我使用razor语法作为我的视图。以前我使用datepicker，它工作得很好。现在我需要在设置时间时更加具体，我需要使用dateTimePicker。在我的脚本文件夹中，我有jquery.datetimepicker.js，但我想我错过了一些如何显示它的参考。在内容文件夹中，我还有jquery.datetimepicker.css。此外，如果我创建新的JavaScript，我无法使用.datetimepicker，但.datepicker.

编辑：请注意，我没有在BundleConfig.cs文件中编辑任何内容

所以我的问题是如何在编写javascript时使用.datetimepicker，如果不可能如何修复我的视图中的datetimepicker外观，因为目前是这样的：

这是我的View.cshtml

      @model MvcTestApplication.Models.Test
    @using MvcTestApplication.Models

    @{
        ViewBag.Title = "Create";
    }

    <h2>Create</h2>

    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)

        <fieldset>
            <legend>Test</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.TestTitle)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.TestTitle)
                @Html.ValidationMessageFor(model => model.TestTitle)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.TestDescription)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.TestDescription)
                @Html.ValidationMessageFor(model => model.TestDescription)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.StartTime)
            </div>
            <div class="editor-field">
               <input type="text" name="StartTime" id="datetimepicker1" />
                @Html.ValidationMessageFor(model => model.StartTime)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.EndTime)
            </div>
            <div class="editor-field">
                <input type="text" name="EndTime" id="datetimepicker2" />
                @Html.ValidationMessageFor(model => model.EndTime)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.AvailableFor, "Available For")
            </div>

            <div class="editor-field">
                @Html.DropDownList("AvailableFor", String.Empty)
                @Html.ValidationMessageFor(model => model.AvailableFor)
            </div>


            <div class="editor-field">
                @if (ViewBag.CourseNames != null )
                { 
                     @Html.DropDownList("CourseNames", String.Empty)
                }

            </div>

            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    }

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")

     <script src="~/Scripts/jquery-2.1.3.js"></script>
     <script src="~/Scripts/jquery.datetimepicker.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#datetimepicker1").datetimepicker();
        });
    </script>
}

Answer 1

所以我自己找到了解决方案。我以为我必须将CSS引用添加到我的网页。为此，我必须首先编辑放置在BundleConfig.cs文件夹中的App_Start。我添加了这样的新风格：

 bundles.Add(new StyleBundle("~/Content/Jcss").Include("~/Content/jquery.datetimepicker.css"));

在我的视图中，我仍然保留对javascript和脚本的引用，我在@Section Scripts

中添加了一行

 @Styles.Render("~/Content/Jcss")

现在脚本本身工作正常，这是最终的结果。