使用jQuery DateTimePicker插件

Question

I have been trying to use the XD Soft jQuery plugin found here : 我一直在尝试使用在这里找到的XD Soft jQuery插件：

datetimepicker I used NuGet to install it to my asp.net mvc project. datetimepicker我使用NuGet将其安装到我的asp.net mvc项目中。 I want to use the inline date and time picker within my form Here is the HTML 我想在表单中使用内联日期和时间选择器这是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")

 }

However at the moment only an ordinary calendar is displayed allowing the user to choose the date, month and year but not the time as well which is what I need. 但是，目前仅显示普通日历，允许用户选择日期，月份和年份，但也不能选择我需要的时间。 I have tried a few different plugins and tutorials but I've not been able to get one that works as expected. 我尝试了几种不同的插件和教程，但未能获得预期的效果。 Any help would be great as I've been stuck on this for ages and haven't been getting anywhere thanks. 任何帮助都将是非常有用的，因为我已经坚持了很长时间并且没有得到任何帮助。

Answer 1

I worked out what was wrong I needed to use TextBoxFor rather than EditorFor within the form. 我弄清楚了我需要在表单中使用TextBoxFor而不是EditorFor的原因。 Here is the View with the change implemented. 这是已实施更改的视图。

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

}

使用jQuery DateTimePicker插件

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-12-07 20:19:44

使用jQuery DateTimePicker插件

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-12-07 20:19:44

解决方案1
0 已采纳 2015-12-07 20:19:44