使用DatePicker的HTML表單元素

-1

我正在做一個asp.net mvc網站，我想在我的視圖中爲表單中的一個模型屬性添加一個日期時間選擇器。目前日期選擇器顯示，但是當我選擇日期並提交表單時，數據不會保存。在我嘗試添加日期選擇器之前，保存了信息，所以我相信日期選擇器正在導致我的問題。如何將日期選擇器添加到HTML表單中，並且應該使用jQuery UI日期選擇器還是其他在線可用的日期選擇器之一？我沒有使用jQuery的經驗，所以它可能是我不明白datepicker如何工作或沒有正確的js腳本。謝謝！！使用DatePicker的HTML表單元素

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

我控制器的方法，提交表單時被調用，看起來像這樣

public ActionResult Create([Bind(Include = "EventID,Name,Location,Date,StartTime")] Meeting @meeting) 
    { 
     if (ModelState.IsValid) 
     { 

      context.Meetings.Add(@meeting); 
      context.SaveChanges(); 
      return RedirectToAction("Index"); 
     } 

     return View(); 
    }

來源

2015-11-20 Myles57

你可以發佈你的模型代碼嗎？ –

http://stackoverflow.com/questions/5976938/how-to-pass-parameters-to-jquery-document-ready-function-asp-net-mvc-c？ – MethodMan

首先刪除'new {id ='news_date'}' - 它什麼都不做，幸運的是，它並沒有其他明智的你的datepicker不會工作，因爲你會指的是錯誤的'id'。接下來刪除第二個最後一個腳本（'jquery/1.10.2/jquery.min'），因爲你擦除了由'bundles/jqueryval'呈現的腳本（不知道'src =「jquery.js」是什麼，但可能需要也刪除）。您需要確保您的腳本以正確的順序呈現。接下來刪除'jquery.datetimepicker.js'，因爲你有2個日期選擇器腳本（那個和jquery-ui之一）。 –

更改日期格式使用默認的：

$("#@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' });

請注意，爲了修復它，您需要指定月/日/年而不是日/月/年。這是因爲服務器端期望mm/dd/yy，但客戶端提供dd/mm/yy。

來源

2015-11-20 23:24:29

我已經對腳本進行了建議的更改，但不幸的是該模型仍未保存到我的數據庫中 – Myles57

EditorFor呈現，如：<input type="date" data-val="..." ... />

在Chrome瀏覽器中呈現EditorFor一個日期選擇器默認的，但是IE這是行不通的。

我建議你嘗試使用@ Html.TextBoxFor（型號=> model.Date，新{@type = 「日期」}），並添加在你的腳本是這樣的：

$(function() { 
 
    $('#Date').datepicker(); 
 
});

來源

2015-11-20 23:57:36

使用DatePicker的HTML表單元素

回答

相關問題