使用jQuery DateTimePicker插件

Question

我一直在嘗試使用在這里找到的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")

 }

但是，目前僅顯示普通日歷，允許用戶選擇日期，月份和年份，但也不能選擇我需要的時間。 我嘗試了幾種不同的插件和教程，但未能獲得預期的效果。 任何幫助都將是非常有用的，因為我已經堅持了很長時間並且沒有得到任何幫助。

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

}

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