Fatal编程技术网
  • javascript/
  • Javascript 使用jQuery DateTimePicker插件

Javascript 使用jQuery DateTimePicker插件

javascript jquery asp.net-mvc nuget

Javascript 使用jQuery DateTimePicker插件,javascript,jquery,asp.net-mvc,nuget,jquerydatetimepicker,Javascript,Jquery,Asp.net Mvc,Nuget,Jquerydatetimepicker,我一直在尝试使用这里找到的XD Soft jQuery插件： 我使用NuGet将其安装到我的asp.NETMVC项目中。 我想在表单中使用内联日期和时间选择器 这是HTML <head> <title>Create</title> <link rel="stylesheet" href="~/Content/jquery.datetimepicker.css"/> </head> <h2>Create</h

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

我使用NuGet将其安装到我的asp.NETMVC项目中。 我想在表单中使用内联日期和时间选择器 这是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")

 }


创造
创造
@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
事件


@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@LabelFor（model=>model.Name，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Name，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Name，“，new{@class=“text danger”}）
@LabelFor（model=>model.Date，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Date，新的{@id=“datetimepicker3”，@style=“width:150px”}）
@Html.ValidationMessageFor（model=>model.Date，“，new{@class=“text danger”}）
@LabelFor（model=>model.Description，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Description，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Description，“，new{@class=“text danger”}）
}
@ActionLink（“返回列表”、“索引”）
@节脚本{
jQuery（“#datetimepicker3”）.datetimepicker({
格式：“d.m.Y H:i”，
是的，
郎：“如”
});
@Scripts.Render（“~/bundles/jqueryval”）
}
然而，目前只有一个普通的日历显示，允许用户选择日期，月份和年份，但不包括时间，这是我需要的。我尝试了一些不同的插件和教程，但没有得到一个能像预期的那样工作。任何帮助都会很好，因为我已经在这个问题上纠缠了很长时间，而且一直没有取得任何进展。谢谢。

我找到了在表单中使用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")

}


创造
创建事件
@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）


@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@LabelFor（model=>model.Name，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Name，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Name，“，new{@class=“text danger”}）
@LabelFor（model=>model.Location，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Location，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.Location，“，new{@class=“text danger”}）
@LabelFor（model=>model.Date，htmlAttributes:new{@class=“controllabel col-md-2”}）
@Html.TextBoxFor（model=>model.Date，新的{id=“datetimepicker3”，@style=“width:150px”}）
@Html.ValidationMessageFor（model=>model.Date，“，new{@class=“text danger”}）
@LabelFor（model=>model.Description，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Description，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Description，“，new{@class=“text danger”}）
}
@ActionLink（“返回列表”、“索引”）
@节脚本{
jQuery（“#datetimepicker3”）.datetimepicker({
格式：“d.m.Y H:i”，
是的，
朗：“恩”
});
@Scripts.Render（“~/bundles/jqueryval”）
}
尝试使用此插件来缩小问题范围，删除所有页面元素（表单），只需使用
。让它发挥作用，以验证是否已正确加载所有正确的脚本和样式。然后添加帮助程序、表单。。。根据该插件的说明，
lang
选项已过时。@Jasen我删除了所有表单元素，并按照您建议的行放置，同时保留了我所有的脚本和样式以及我希望的日历显示方式。你对我的表格有什么问题有什么建议吗？谢谢一次一个地重新引入您拆下的零件。从datepicker的
EditorFor（）
开始，查看呈现的html是如何变化的。这样做直到它中断或您重新创建了所需的页面。@Jasen非常感谢，我将EditorFor更改为TextBoxFor，这似乎很有效。如果您能解释标记的差异，对其他人会很有用。