ASP .NET MVC 5 日期和时间选择器

Question

在我的 ASP .NET MVC 5 应用程序中，我有一个模型 class:

public class Event
{
    public int Id { get; set; }

    public string Name { get; set; }

    [Display(Name = "Date")]
    [DataType(DataType.DateTime)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)]
    public DateTime Date { get; set; }
}

在我看来，我希望有一个日期和时间选择器能够在其日期属性.

中设置事件的日期和时间

目前我允许使用 @Html.JQueryUI().DatepickerFor(model => model.Date) 编辑 Date，但是这只为我提供了日期选择器，没有 hour/minutes 可供选择。

我浏览了论坛并找到了 this post and I would really like to make a use of bootstrap-datetimepicker，但我无法正确安装和使用它。

我安装了 NuGet 包 Bootstrap.DateTimePicker 并尝试将 here 中的示例代码直接放入我的视图中：

    <div class="well">
    <div id="datetimepicker1" class="input-append date">
        <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
        <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
            </i>
        </span>
    </div>
</div>
<script type="text/javascript">
  $(function() {
    $('#datetimepicker1').datetimepicker({
      language: 'pt-BR'
    });
  });
</script>

但它只显示一个空的空白文本框，date/datetime 选择器根本没有出现。我什至不知道如何将这个潜在的 DateTimePicker 绑定到我模型的属性日期。

我想我忘记了什么，也许在某处包括一些脚本？我浏览了 manual 和网络，但无法正常工作...

在浏览器控制台我有：

ReferenceError: jQuery is not defined jquery-ui-1.11.4.js:14 jquery-ui-1.11.4.js:6 ReferenceError: $ is not defined Error: Bootstrap's JavaScript requires jQuery

编辑：我还附上了我的 _Layout.cshtml 文件的内容：

<!DOCTYPE html>
<html>
<head>

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
          href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


    <link rel="stylesheet" href="/Content/jquery-ui.css"/>

    <script src="/Scripts/jquery-ui-1.11.4.js"></script>



    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - NOMU</title>
    @Styles.Render("~/Content/css")

    @*style for vertical tabs*@
    <style>
        .ui-tabs-vertical .ui-tabs-nav {
            padding: .2em .1em .2em .2em;
            float: left;
            width: 12em;
        }

        .ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            border-bottom-width: 1px !important;
            border-right-width: 0 !important;
            margin: 0 -1px .2em 0;
        }

        .ui-tabs-vertical .ui-tabs-nav li a {
            display: block;
        }

        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
            padding-bottom: 0;
            padding-right: .1em;
            border-right-width: 1px;
            border-right-width: 1px;
        }

        .ui-tabs-vertical .ui-tabs-panel {
            padding: 1em;
            float: right;
            width: 40em;
        }
    </style>




    @section Scripts {
        @Scripts.Render("~/bundles/modernizr")


        <script src="~/Scripts/globalize/globalize.js"></script>
        <script src="~/Scripts/globalize/cultures/globalize.culture.@(System.Threading.Thread.CurrentThread.CurrentCulture.Name).js"></script>
        <script>
            $.validator.methods.number = function(value, element) {
                return this.optional(element) ||
                    !isNaN(Globalize.parseFloat(value));
            }
            $(document).ready(function() {
                Globalize.culture('@(System.Threading.Thread.CurrentThread.CurrentCulture.Name)');
            });
        </script>
        <script>
            jQuery.extend(jQuery.validator.methods, {
                range: function(value, element, param) {
                    //Use the Globalization plugin to parse the value
                    var val = Globalize.parseFloat(value);
                    return this.optional(element) || (
                        val >= param[0] && val <= param[1]);
                }
            });
            $.validator.methods.date = function(value, element) {
                return this.optional(element) ||
                    Globalize.parseDate(value) ||
                    Globalize.parseDate(value, "yyyy-MM-dd");
            }
        </script>

    <script type="text/javascript"
            src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript"
            src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
    </script>
    <script type="text/javascript">
      $('#datetimepicker').datetimepicker({
        format: 'dd/MM/yyyy hh:mm:ss',
        language: 'pt-BR'
      });

        </script>


    }

</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("HOME", "Index", "Home", new {area = ""}, new {@class = "navbar-brand"})
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Members", "Index", "Members")</li>
                <li>@Html.ActionLink("Addresses", "Index", "Addresses")</li>
                <li>@Html.ActionLink("Departments", "Index", "Departments")</li>
                <li>@Html.ActionLink("Events", "Index", "Events")</li>
                <li>@Html.ActionLink("Payments", "Index", "Payments")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr/>
    <footer>
        <p>&copy; @DateTime.Now.Year - Site Title</p>
    </footer>
</div>

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

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



@RenderSection("scripts", required: false)

</body>

</html>

编辑 2015-12-05：

感谢您的帮助，但我仍然找不到解决方案...我会尝试提供尽可能多的细节。

当然，我将其集成到我的解决方案中很糟糕，就好像我使用 HTML 代码创建示例 HTML 文件一样，@coderealm 在下面建议当然可以。

好的，所以在没有任何日期时间选择器的情况下，我的视图看起来是这样的：

这是此视图生成的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <script src="/Scripts/jquery-1.10.2.js"></script>

    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

    <script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery-ui.unobtrusive-3.0.0.js"></script>


    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>



    <style type="text/css">
        ul.nav li.dropdown:hover > ul.dropdown-menu {
            display: block;
        }
    </style>




    <link rel="stylesheet" href="/Content/jquery-ui.css"/>

    <script src="/Scripts/jquery-ui-1.11.4.js"></script>


    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create - Event</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>



    <style>
        .ui-tabs-vertical .ui-tabs-nav {
            padding: .2em .1em .2em .2em;
            float: left;
            width: 12em;
        }

        .ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            border-bottom-width: 1px !important;
            border-right-width: 0 !important;
            margin: 0 -1px .2em 0;
        }

        .ui-tabs-vertical .ui-tabs-nav li a {
            display: block;
        }

        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
            padding-bottom: 0;
            padding-right: .1em;
            border-right-width: 1px;
            border-right-width: 1px;
        }

        .ui-tabs-vertical .ui-tabs-panel {
            padding: 1em;
            float: right;
            width: 40em;
        }
    </style>







</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">HOME</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/Members">Members</a></li>
                <li><a href="/Addresses">Addresses</a></li>
                <li><a href="/Departments">Departments</a></li>
                <li><a href="/Events">Events</a></li>
                <li><a href="/Payments">Payments</a></li>
                    <li><a href="/Messages/Create">Send message</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">Users & Roles</li>
                            <li><a href="/Account/Register">Create new user</a></li>
                            <li><a href="/Roles">Manage roles</a></li>

                        </ul>
                    </li>

            </ul>




<style type="text/css">
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    }
</style>



<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="esfmyOwwGOynXzXzmRDd8FnKUZX5pNVDXdpcZwtBEq4y5j1d9fPS-0ce2pemBsSi3Yp4l8NOWs5hXvgxQpQP3t-n-9V3P1SuvEurk2RCd9WJO9gilnBwQqgSll4F2WsGHR3NMNKFkrdZD0uy8lJQdw2" />    <ul class="nav navbar-nav navbar-right">
        <li>

        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello user@gmail.com <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="dropdown-header">Account</li>
                <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
                <li><a href="/Manage">Manage</a></li>
            </ul>
        </li>
    </ul>
</form>
        </div>
    </div>
</div>
<div class="container body-content">





<h2>Create</h2>

<form action="/Events/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="ChQ9Bowi5lfzRdqywpBOd6DW8xX7EDm19zq0IL3f_MqTAjOXPlL6fiK-pLbdDeonHzsCQfWOEQ7lU3j-t1lCBpqGL7rOu1vlapqJpM2zUbcHGicp4QpaIvxrQpOihUlVy9qypWEHhuRHEHJ-Q--rkw2" />    <div class="form-horizontal">
        <h4>Event</h4>
        <hr />



        <div class="form-group">
            <label class="control-label col-md-2" for="Name">Name</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Date">Date</label>
            <div class="col-md-10">

                <input data-jqui-dpicker-dateformat="yy-mm-dd" data-jqui-type="datepicker" data-val="true" data-val-date="The field Date must be a date." id="Date" name="Date" type="text" value="" />

                <span class="field-validation-valid text-danger" data-valmsg-for="Date" data-valmsg-replace="true"></span>
            </div>
        </div>         

        <div class="form-group">
            <label class="control-label col-md-2" for="Place">Place</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="Place" name="Place" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Place" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Mandatory">Mandatory</label>
            <div class="col-md-10">
                <div class="checkbox">
                    <input class="check-box" id="Mandatory" name="Mandatory" type="checkbox" value="true" /><input name="Mandatory" type="hidden" value="false" />
                    <span class="field-validation-valid text-danger" data-valmsg-for="Mandatory" data-valmsg-replace="true"></span>
                </div>
            </div>
        </div>



        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>






<div>
    <a href="/Events">Back to List</a>
</div>


    <hr/>
    <footer>
        <p>&copy; 2015 - Title</p>
    </footer>
</div>






<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"841bbc2758464834b8d3ce225ba16e58"}
</script>
<script type="text/javascript" src="http://localhost:2142/e8ea71ac5d3f49bd91e335052d0353be/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

我的 Date 字段目前使用 jquery DatePicker（在视图中我只是 @Html.JQueryUI().DatepickerFor(model => model.Date) 使用它）并且它显示简单的 jquery 日历，但正如我所提到的，无法选择时间。所以我决定使用上面提到的 bootstrap-datetimepicker，所以我从 NuGet 安装它并且：

根据@coderealm 的建议，我将示例代码的 <head> 部分放入我的 _Layout.cshtml 文件中，以便在所有视图中通用。我把它放在 <head> 部分结束之前：here（抱歉 PasteBin，这条消息已经太长了）。

并且在我重新加载我的视图时将此代码粘贴到那里后，它改变了它的外观（实际上只需要将 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 粘贴到 _Layout.csthml 文件中就可以实现此目的）：

如您所见，文本字段更小了，标题现在不再是粗体了。顺便说一句，我的旧 jquery Datepicker 目前仍然可以正常工作，但我认为这些文本框的视图和一般的布局发生变化是不行的。上述视图生成的 HTML 现在已更改为以下视图：

<!DOCTYPE html>
<html>
<head>
    <script src="/Scripts/jquery-1.10.2.js"></script>

    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

    <script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery-ui.unobtrusive-3.0.0.js"></script>


    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>



    <style type="text/css">
        ul.nav li.dropdown:hover > ul.dropdown-menu {
            display: block;
        }
    </style>




    <link rel="stylesheet" href="/Content/jquery-ui.css"/>

    <script src="/Scripts/jquery-ui-1.11.4.js"></script>


    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create - Event</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>



    <style>
        .ui-tabs-vertical .ui-tabs-nav {
            padding: .2em .1em .2em .2em;
            float: left;
            width: 12em;
        }

        .ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            border-bottom-width: 1px !important;
            border-right-width: 0 !important;
            margin: 0 -1px .2em 0;
        }

        .ui-tabs-vertical .ui-tabs-nav li a {
            display: block;
        }

        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
            padding-bottom: 0;
            padding-right: .1em;
            border-right-width: 1px;
            border-right-width: 1px;
        }

        .ui-tabs-vertical .ui-tabs-panel {
            padding: 1em;
            float: right;
            width: 40em;
        }
    </style>





   <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
          href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">HOME</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/Members">Members</a></li>
                <li><a href="/Addresses">Addresses</a></li>
                <li><a href="/Departments">Departments</a></li>
                <li><a href="/Events">Events</a></li>
                <li><a href="/Payments">Payments</a></li>
                    <li><a href="/Messages/Create">Send message</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">Users & Roles</li>
                            <li><a href="/Account/Register">Create new user</a></li>
                            <li><a href="/Roles">Manage roles</a></li>

                        </ul>
                    </li>

            </ul>




<style type="text/css">
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    }
</style>



<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="DuIycgdv9rnUap62YqrY4A0imdnNK99uk3sK_LNm8OFv2fj3PKnhDYAp1gr87Cke0r-EDSb2cZGhCoH3x8kcu0bU7GqCQQlHEvntgaRNsqU8rpRcJHzVY40LTk-S56i3OfWeJQGqsc7azegYEodNmw2" />    <ul class="nav navbar-nav navbar-right">
        <li>

        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello test@gmail.com <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="dropdown-header">Account</li>
                <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
                <li><a href="/Manage">Manage</a></li>
            </ul>
        </li>
    </ul>
</form>
        </div>
    </div>
</div>
<div class="container body-content">





<h2>Create</h2>

<form action="/Events/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="a-m23Z2lGhcnMvAvJit74BPW2oqJFPsP9qQ4KjUASZobUsiYp5Q48K-rCR7ZjGm4GPD0dihBjBRuMmAVUiIM9qOjojMLFIQ2_X2i0EtgvGUY3OKVJ9BB_wzb8tcTTiN4wxURNAK1M2VDPKjLkjEDig2" />    <div class="form-horizontal">
        <h4>Event</h4>
        <hr />



        <div class="form-group">
            <label class="control-label col-md-2" for="Name">Name</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Date">Date</label>
            <div class="col-md-10">

                <input data-jqui-dpicker-dateformat="yy-mm-dd" data-jqui-type="datepicker" data-val="true" data-val-date="The field Date must be a date." id="Date" name="Date" type="text" value="" />

                <span class="field-validation-valid text-danger" data-valmsg-for="Date" data-valmsg-replace="true"></span>
            </div>
        </div>         

        <div class="form-group">
            <label class="control-label col-md-2" for="Place">Place</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="Place" name="Place" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Place" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Mandatory">Mandatory</label>
            <div class="col-md-10">
                <div class="checkbox">
                    <input class="check-box" id="Mandatory" name="Mandatory" type="checkbox" value="true" /><input name="Mandatory" type="hidden" value="false" />
                    <span class="field-validation-valid text-danger" data-valmsg-for="Mandatory" data-valmsg-replace="true"></span>
                </div>
            </div>
        </div>



        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>






<div>
    <a href="/Events">Back to List</a>
</div>


    <hr/>
    <footer>
        <p>&copy; 2015 - Title</p>
    </footer>
</div>






<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"3ca3ab4389224867b6caa3f9435eeb1d"}
</script>
<script type="text/javascript" src="http://localhost:2142/e8ea71ac5d3f49bd91e335052d0353be/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

如果我现在将@coderealm 提供的示例 HTML 代码的 <body> 部分放入我的 Create.cshtml 视图文件中（我将其放在最后一个 div 元素添加 ActionLink 以返回同一控制器内的 Index.cshtml：here

它添加了新的DateTimePicker，但是在选择了日期和时间之后它卡在了这个状态：

而且我无法关闭此 DatetimePicker，当我单击某处时它不会消失。这次它生成的 HTML 代码是（抱歉，我需要把它放在 PasteBin 上，因为消息的长度已超出）：here.

我希望现在有人能够帮助我，因为它已经让我发疯了......我最初不是网络开发人员，所以可能我在我的观点中搞砸了一些东西，也许我没有正确加载脚本或者某事...

再次感谢您的帮助！

Answer 1

将其复制并粘贴到记事本编辑器中并将其保存在磁盘上，将文件命名为 test.html。现在打开 test.html 是一个网络浏览器，它可以工作。现在跟随这个文件到后面并在你的解决方案中实施

<!DOCTYPE HTML>
    <html>
      <head>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" media="screen"
         href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
      </head>
      <body>
        <div id="datetimepicker" class="input-append date">
          <input type="text"></input>
          <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
          </span>
        </div>
        <script type="text/javascript"
         src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script> 
        <script type="text/javascript"
         src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
         src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
         src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
          $('#datetimepicker').datetimepicker({
            format: 'dd/MM/yyyy hh:mm:ss',
            language: 'pt-BR'
          });
        </script>
      </body>
    <html>

Answer 2

我终于找到了解决办法。

关于我原来的问题，我仍然不知道发生了什么，它不起作用，但是我找到了另一种方法:)。

我决定利用 this JQueryUI DateTimePicker addon。

你需要做的就是让它工作（在我的例子中，我的 Date 字段）：

您需要在您的项目中安装 jQuery 和 jQueryUI（如果您已经在使用 jQueryUI.Datepicker，那么您已经安装了这些）
现在是时候安装 jQueryUI datetimepicker 插件了，你有两种可能：

A) 手动安装：
- 从 this 网站下载 .js 和 .css 文件（给定页面上 Download 部分下的链接）
- 将 jquery-ui-timepicker-addon.js 文件添加到解决方案的 Scripts 文件夹中
- 将 jquery-ui-timepicker-addon.css 添加到解决方案的 Content 文件夹中
B) 使用 NuGet 安装（我更喜欢这种方法）：
- 参考addon's NuGet page并使用包管理器控制台安装
在你的 _Layout.cshtml 添加：

<script type="text/javascript">
    $(function () { $('#selectedDateTime').datetimepicker(); });
</script>

和：

<link rel="stylesheet" media="all" type="text/css" href="/Content/jquery-ui-timepicker-addon.css" />

最后，在你看来这样使用它：

<input type="text" id="selectedDateTime" name="Date"/>

这将为您提供漂亮的 DateTimePicker：

请记住，input 字段的这个 name 参数是将在您提交表单时发布的参数的名称。

我希望它对以后的人有所帮助 ;)。

感谢您的宝贵时间:)。

ASP .NET MVC 5 日期和时间选择器

ASP .NET MVC 5 Date and time picker

asp.net

asp.net-mvc

jquery

jquery-ui

datetimepicker