Question

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

2015-12-01

9690

jquery asp.net asp.net-mvc jquery-ui datetimepicker

在我的 ASP .NET MVC 5 应用中，我有一个模型类：

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

在我看来，我希望有一个日期和时间选择器，以便能够在其 Date 属性中设置事件的日期和时间。

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

我浏览了论坛并找到了这个帖子，我真的很想使用 bootstrap-datetimepicker ，但我无法正确安装和使用它。

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

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

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

我想我忘记了一些东西，也许在某处包含了一些脚本？我查看了手册和网络，但我无法使其工作...

在浏览器控制台中我有：

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：

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

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

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

这是此视图生成的 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 [email protected] <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> 部分结束之前：这里（抱歉 PasteBin，这条消息已经太长了）。

粘贴此代码后，当我重新加载视图时，它的外观会发生变化（实际上，只需在 _Layout.csthml 文件中粘贴 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 即可实现此目的）：

如您所见，文本字段变小了，标题不再加粗。顺便说一句，我的旧 jquery Datepicker 目前仍可正常工作，但我认为这些文本框的视图和布局的总体变化是不正常的。上述视图生成的 HTML 现已更改为以下 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 [email protected] <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 ）：此处

它添加了新的 DateTimePicker，但在选择日期和时间后它停留在这种状态：

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

我希望现在有人可以帮助我，因为它已经让我抓狂了……我最初不是 Web 开发人员，所以可能我弄乱了我的视图中的某些内容，也许我没有正确加载脚本或其他什么……

再次 - 提前感谢您的帮助！

Answer 1

我终于找到了解决方案。

关于我最初的问题，我仍然不知道发生了什么，它没有工作，但是我找到了另一种方法:)。

我决定使用这个 JQueryUI DateTimePicker 插件。

要使其正常工作，您需要做的就是（在我的情况下，使用我的 Date 字段）：

您需要在项目中安装 jQuery 和 jQueryUI（如果您已经在使用 jQueryUI.Datepicker，则您已经拥有它们）
现在是时候安装 jQueryUI datetimepicker 插件了，您有两种选择：

A) 手动安装：
- 从此网站下载 .js 和 .css 文件（给定页面上的 Download 部分下的链接）
- 将 jquery-ui-timepicker-addon.js 文件添加到解决方案的 Scripts 文件夹中
- 添加将 jquery-ui-timepicker-addon.css 放入解决方案的 Content 文件夹中
B) 使用 NuGet 安装（我更喜欢这种方法）：
- 请参阅插件的 NuGet 页面，然后使用包管理器控制台进行安装
在您的 _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 参数是提交表单时将发布的参数的名称。

我希望它能在未来帮助到别人 ;)。

感谢您的所有时间 :)。

Answer 2

将其复制并粘贴到记事本编辑器中，并将其保存在磁盘上，命名为 test.html。现在在 Web 浏览器中打开 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>