使用 jQuery DateTimePicker 插件答案

【问题标题】：Using jQuery DateTimePicker plugin使用 jQuery DateTimePicker 插件
【发布时间】：2015-12-07 16:31:22
【问题描述】：

我一直在尝试使用这里找到的 XD Soft jQuery 插件：

datetimepicker 我使用 NuGet 将其安装到我的 asp.net mvc 项目中。我想在表单中使用内联日期和时间选择器这是HTML

<head>
<title>Create</title>  

<link rel="stylesheet" href="~/Content/jquery.datetimepicker.css"/>

</head>

<h2>Create</h2>


@using(Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Event</h4>

<hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

<div class="form-group">
        @Html.LabelFor(model =>model.Name, htmlAttributes: new { @class =   "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>


    <div class="form-group">
        @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Date, new { @id = "datetimepicker3", @style ="width:150px" })
            @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
        </div>
    </div>


    <div class="form-group">
        @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">

            @Html.EditorFor(model => model.Description, new { htmlAttributes   = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Description, "", new {     @class = "text-danger" })
        </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>
}

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

@section Scripts {

<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.datetimepicker.js">       </script>
<script type="text/javascript">
jQuery('#datetimepicker3').datetimepicker({
    format: 'd.m.Y H:i',
    inline: true,
    lang: 'ru'
});
</script>

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

 }

但是，目前只显示一个普通日历，允许用户选择日期、月份和年份，但不能选择我需要的时间。我尝试了一些不同的插件和教程，但我无法获得一个按预期工作的。任何帮助都会很棒，因为我已经坚持了很长时间并且没有得到任何帮助。

【问题讨论】：

试试这个插件DateTime Picker
为了帮助缩小问题范围，删除所有页面元素（表单）并简单地使用<input id="datetimepicker3" type="text" />。让它工作以验证您是否正确加载了所有正确的脚本和样式。然后添加助手，表单，...根据该插件的github page lang 选项已过时。
@Jasen 我删除了所有表单元素并放入您建议的行，同时保持我所有的脚本和样式以及日历以我想要的方式显示。你对我的表格有什么问题有什么建议吗？谢谢！
重新引入您删除的部分，一次一个。从日期选择器的EditorFor() 开始，看看呈现的 html 是如何变化的。这样做直到它中断或直到您重新创建所需的页面。
@Jasen 非常感谢你，我将 EditorFor 更改为 TextBoxFor，这似乎有效

标签： javascript jquery asp.net-mvc nuget jquerydatetimepicker

【解决方案1】：

我发现我需要在表单中使用 TextBoxFor 而不是 EditorFor 出了什么问题。这是实施了更改的视图。

<head>
<title>Create</title>

<link rel="stylesheet" href="~/Content/jquery.datetimepicker.css" />

</head>

<h2>Create Event</h2>


@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">

    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Location, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Location, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
            @Html.LabelFor(model => model.Date, htmlAttributes: new { @class  = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.Date, new { id =   "datetimepicker3", @style = "width:150px" })
            @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Description, htmlAttributes: new {   @class = "control-label col-md-2" })
        <div class="col-md-10">

            @Html.EditorFor(model => model.Description, new { htmlAttributes   = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Description, "", new {   @class = "text-danger" })
        </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>
}

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

@section Scripts {

<script type="text/javascript" src="~/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.datetimepicker.js"></script>
<script type="text/javascript">
    jQuery('#datetimepicker3').datetimepicker({
        format: 'd.m.Y H:i',
        inline: true,
        lang: 'en'
    });
</script>

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

}

【讨论】：

如果您能解释标记差异，这将对其他人有用。