Fatal编程技术网
  • csharp/
  • C# 对HTML表单元素使用日期选择器

C# 对HTML表单元素使用日期选择器

c# jquery html asp.net-mvc jquery-ui

C# 对HTML表单元素使用日期选择器,c#,jquery,html,asp.net-mvc,jquery-ui,C#,Jquery,Html,Asp.net Mvc,Jquery Ui,我正在制作一个asp.NETMVC网站，并试图在视图中的表单中为我的一个模型属性添加一个日期时间选择器。此时会显示日期选择器，但当我选择日期并提交表单时，数据不会保存。在我尝试添加日期选择器之前，我保存了一些信息，因此我认为是日期选择器导致了我的问题。如何准确地将日期选择器添加到HTML表单中？我应该使用jQuery UI日期选择器还是在线提供的众多其他日期选择器之一？我没有使用jQuery的经验，所以可能是我不了解datepicker是如何工作的，或者没有正确的js脚本。谢谢 <head

我正在制作一个asp.NETMVC网站，并试图在视图中的表单中为我的一个模型属性添加一个日期时间选择器。此时会显示日期选择器，但当我选择日期并提交表单时，数据不会保存。在我尝试添加日期选择器之前，我保存了一些信息，因此我认为是日期选择器导致了我的问题。如何准确地将日期选择器添加到HTML表单中？我应该使用jQuery UI日期选择器还是在线提供的众多其他日期选择器之一？我没有使用jQuery的经验，所以可能是我不了解datepicker是如何工作的，或者没有正确的js脚本。谢谢

<head>
<title>Create</title>
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css" /> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-     lightness/jquery-ui.min.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.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.EditorFor(model => model.Date, new {id = "news_date"})
            @Html.ValidationMessageFor(model => model.Date, "", new { @class  = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.StartTime, htmlAttributes: new {  @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.StartTime, new { htmlAttributes =  new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.StartTime, "", 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>
<script>
$(document).ready(function () {
    $("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script type="text/javascript"     src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-     ui.min.js"></script>
将dateFormat更改为使用默认值：

$("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });
到

或

请注意，为了修复它，您需要指定月/日/年，而不是日/月/年。这是因为服务器端预期的是mm/dd/yy，而客户端提供的是dd/mm/yy。

EditorFor呈现为：

在Chrome浏览器中，EditorFor呈现了一个日期选择器默认值，但IE这不起作用

我建议您尝试使用@Html.TextBoxFor（model=>model.Date，new{@type=“Date”}），并在脚本中添加如下内容：

$（函数（）{
$（'#Date'）.datepicker（）；

});
你能发布你的模型代码吗？首先删除
新的{id=“news\u date”}
-它什么也不做，幸运的是，它不起作用。你的日期选择器不能工作，因为你引用了错误的
id
。接下来删除最后一个脚本（
jquery/1.10.2/jquery.min
），因为您正在删除由
bundles/jqueryval
呈现的脚本（不确定
src=“jquery.js”
是什么，但可能也需要删除）。您需要确保脚本以正确的顺序呈现。接下来删除jquery.datetimepicker.js，因为您有两个日期选择器脚本（这一个和jquery ui一个）。当您说“我选择一个日期并提交表单，数据未保存”时，发生了什么？是因为
ModelState
无效吗？@StephenMuecke当按下submit时，我被重定向到索引页，该页旨在显示所有会议，但我刚刚创建的会议没有显示，我检查了我的数据库，它没有保存。在我的controllercreate方法中，我有一个if语句来检查ModelState是否有效，所以我不确定为什么要重定向到Index，如果它实际上是有效的。如果ModelState无效，我将其设置为重定向到另一个视图，但它没有这样做。我对视图和选择器进行了您建议的更改，但仍存在保存问题我已对脚本进行了您建议的更改，但不幸的是，模型仍没有保存到我的数据库中 
$("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });

$("#@Html.IdFor(m => m.Date)").datepicker();

$("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'mm/dd/yy' });