搜索
搜索

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

Dawid Sibiński 发表于 Dev
60
达维德·西比恩斯基（DawidSibiński）

在我的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属性中设置事件的日期和时间。

目前，我允许在视图中Date使用进行编辑@Html.JQueryUI().DatepickerFor(model => model.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 jquery-ui-1.11.4.js：14 jquery-ui-1.11.4.js：6 ReferenceError：未定义$错误：Bootstrap的JavaScript需要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安装了它，并且：

  1. 根据@coderealm的建议，我将<head>示例代码的一部分放入_Layout.cshtml文件中，以在所有视图中通用。我把它放在本<head>节末尾：这里（对PasteBin抱歉，此消息已经太长了）。

在我重新加载View并将代码粘贴到此处之后，它就会改变外观（实际上只需要粘贴<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 [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>
  1. If I now put the <body>'s part of the sample HTML code provided by @coderealm into my Create.cshtml view file (I put it just before the last div element which adds ActionLink to go back to the Index.cshtml within the same controller): here

It adds the new DateTimePicker, however after choosing the day and time it is stuck in this state:

在此处输入图片说明

and I'm not able to close this DatetimePicker, when I click somewhere it does not disappear. The HTML code it produced this time is (sorry I need to put this on PasteBin, as the message's length is exceeded): here.

I hope someone will now be able to help me, as it's already driving me crazy... I'm not originally web developer, so probably I messed something up within my views, maybe I load scripts not properly or something...

Once more - thank you in advance for your help!

Dawid Sibiński

I finally found the solution.

Regarding my original issue I still don't know what was happening it was not working, however I found another way :).

I decided to make a use of this JQueryUI DateTimePicker addon.

All you need to do to make it working (in my case with my Date field):

  1. You need jQuery and jQueryUI installed within your project (if you are already using jQueryUI.Datepicker you have these already)

  2. Now it's the time to install jQueryUI datetimepicker addon, you have two possibilities:

    A) Install it manually:

    • from this website download .js and .css file (links on the given page under Download section)
    • add the jquery-ui-timepicker-addon.js file into your solution's Scripts folder
    • 将添加jquery-ui-timepicker-addon.css到解决方案的Content文件夹中

    B）使用NuGet安装（我更喜欢这种方法）：

  3. 在您的_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" />
  1. 最后，您认为以这种方式使用它：
<input type="text" id="selectedDateTime" name="Date"/>

这将为您提供美丽的DateTimePicker：

在此处输入图片说明

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

我希望它对将来的人有所帮助；）。

谢谢您的所有时间:)。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

ASP.Net MVC5日期选择器

使用日期时间选择器进行日期和时间验证（ASP.Net MVC Core v1.1）

Asp.Net MVC 5日期格式

使用Bootstrap日期时间选择器（Asp.Net MVC4应用程序中的Jquery验证插件）验证日期和日期时间

可为空的对象必须具有一个值ASP.NET MVC日期时间选择器

ASP.NET MVC从已实现的日期选择器获取日期

Chrome中不会显示ASP.NET MVC 5日期

asp.net mvc HTML5日期输入类型

日期选择器ASP.NET C＃MVC4

ASP.NET，MVC 5，邮政编码验证，数字选择器

ASP.NET MVC选择器和过滤器之间的区别？

ASP.NET MVC日期时间编辑器

无法在 ASP.Net MVC 5 中传递日期时间

Asp.Net MVC 5选择元素

如何在Asp.Net MVC Razor中将值设置为HTML5日期字段？

Asp.net MVC 4日期输入隐藏最旧的日期

asp.net 5与asp.net mvc是否不同？

ASP.NET MVC JsonResult日期格式

ASP.NET MVC 日期输入格式

ASP.NET MVC 多项选择调查

ASP.NET MVC 5 ViewModel绑定

ASP.NET MVC（Razor）与Angular 5

VueJS 2 + ASP.NET MVC 5

ASP .NET MVC 5中的异步任务

asp.net 4.6 MVC 5的未来

ASP.NET MVC 5 和会话

ASP.Net MVC 5中的Cookie

ASP.NET MVC 5 获取声明

ASP.NET MVC5：RedirectToAction

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    计算数据帧R中的字符串频率

  3. 3

    如何使用Redux-Toolkit重置Redux Store

  4. 4

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  5. 5

    如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

  6. 6

    TreeMap中的自定义排序

  7. 7

    TYPO3：将 Formhandler 添加到新闻扩展

  8. 8

    遍历元素数组以每X秒在浏览器上显示

  9. 9

    在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

  10. 10

    警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

  11. 11

    无法连接网络并在Ubuntu 14.04中找到eth0

  12. 12

    将辅助轴原点与主要轴对齐

  13. 13

    我可以ping IPv6但不能ping IPv4

  14. 14

    在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

  15. 15

    提交html表单时为空

  16. 16

    使用C ++ 11将数组设置为零

  17. 17

    如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称

  18. 18

    尝试在Dell XPS13 9360上安装Windows 7时出错

  19. 19

    如何在R中转置数据

  20. 20

    无法使用 envoy 访问 .ssh/config

  21. 21

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

热门标签

归档