个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 04:43:18 25 4
gpt4 key购买 nike

在我的 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)，但这只为我提供了日期选择器，没有小时/分钟可供选择。

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

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

    <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 绑定(bind)到我的模型的属性 Date。

我想我忘记了一些东西，也许在某个地方包含了一些脚本？我已经查看了 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 一样，它当然可以工作。

好吧，如果没有任何日期时间选择器，我的 View 看起来就是这样: enter image description here

以下是该 View 生成的 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(在 View 中我只是执行 @Html.JQueryUI().DatepickerFor(model => model.Date) 来使用它)并且它可以很好地显示简单的 jquery 日历，但正如我提到的，不可能选择小时。所以我决定使用上面提到的 bootstrap-datetimepicker ，所以我从 NuGet 安装了它并且:

  1. 根据 @coderealm 的建议，我将示例代码的 <head> 部分放入我的 _Layout.cshtml 文件中，以便在所有 View 中通用。我把它放在 <head> 部分末尾之前:here(对 PasteBin 表示抱歉，这条消息已经太长了)。

将这段代码粘贴到那里后，当我重新加载 View 时，它会改变它的外观(实际上只需将 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 粘贴到 _Layout.csthml 文件中就足以发生这种情况): enter image description here

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

<!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 View 文件中(我将其放在最后一个 div 元素之前，该元素添加 ActionLink 以返回到同一 Controller 内的 Index.cshtml ) : here

    • 它添加了新的 DateTimePicker，但是在选择日期和时间后，它陷入了这种状态:

    enter image description here

    并且我无法关闭此 DatetimePicker，当我单击某处时它不会消失。这次生成的 HTML 代码是(抱歉，我需要将其放在 PasteBin 上，因为超出了消息的长度): here 。

    我希望现在有人能够帮助我，因为它已经让我发疯了......我最初不是网络开发人员，所以可能我在我的观点中弄乱了一些东西，也许我加载脚本不正确或其他什么。 ..

    再次感谢您的帮助!

    最佳答案

    我终于找到了解决办法。

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

    我决定使用this JQueryUI DateTimePicker addon 。

    要使其正常工作，您需要做的所有事情(在我的例子中，使用我的 Date 字段):

    1. 您需要在项目中安装 jQuery 和 jQueryUI(如果您已经在使用 jQueryUI.Datepicker，那么您已经安装了这些)

    2. 现在是时候安装 jQueryUI datetimepicker 插件了，您有两种可能性:

      A) 手动安装:

      • 来自 this网站下载 .js 和 .css 文件(给定页面上下载部分下的链接)
      • 将 jquery-ui-timepicker-addon.js 文件添加到解决方案的 Scripts 文件夹中
      • 将 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" />
  • 最后，您认为这样使用它:
    • <input type="text" id="selectedDateTime" name="Date"/>

    这将为您提供漂亮的 DateTimePicker:

    enter image description here

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

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

    感谢您的宝贵时间:)。

    关于jquery - ASP .NET MVC 5 日期和时间选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34030419/

    25 4 0
    文章推荐： ajax - 参数不在ajax请求中发送
    文章推荐： 具有特定数据的 Django 装置
    文章推荐： 使用 ld 创建非 PIC 共享库
    文章推荐： python - Matplotlib 子图图形大小
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com