Ngày được chọn bằng cách sử dụng JQuery Datepicker không phản ánh trong mô hình MVC3 khi gửi

Question

Tôi đã có thời gian rất khó khăn để giải quyết vấn đề này (và tôi chắc chắn rằng tôi đang làm một số lỗi ngớ ngẩn ở đâu đó :)) Ai đó có thể vui lòng trợ giúp.

Tôi không thể truy xuất ngày được chọn bằng cách sử dụng trình ghi ngày tháng JQuery trong mô hình trong khi gửi. Nó cho tôi giá trị là '1/1/0001 12:00:00 AM'. Tui bỏ lỡ điều gì vậy?

Để cô lập vấn đề của tôi, tôi đã tạo ra một ứng dụng MVC3 đơn giản sử dụng một mẫu từ Visual Studio 2010. Thông tin chi tiết như sau:

mẫu:

namespace DatePickerApp.Models 
{ 
    public class DatePickerClass 
    { 
     public DateTime BirthDate { get; set; } 
    } 
} 

Bộ điều khiển:

namespace DatePickerApp.Controllers 
{ 
    public class BirthDateController : Controller 
    { 

     // 
     // GET: /BirthDate/Create 

     public ActionResult Create() 
     { 
      return View(); 
     } 

     // 
     // POST: /BirthDate/Create 

     [HttpPost] 
     public ActionResult Create(DatePickerApp.Models.DatePickerClass DatePickerClass) 
     { 
      try 
      { 
       // TODO: Add insert logic here 

       return View(); 
      } 
      catch 
      { 
       return View(); 
      } 
     } 


    } 
} 

cshtml Xem :

@model DatePickerApp.Models.DatePickerClass 

@{ 
    ViewBag.Title = "Create"; 
} 

<h2>Create</h2> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#date").datepicker({ dateFormat: 'dd/mm/yy' }); 
    }); 
</script> 

@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>DatePickerClass</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.BirthDate) 
     </div> 
     <div class="editor-field"> 
      @Html.TextBoxFor(model => model.BirthDate, new { id = "date" }) 
      @Html.ValidationMessageFor(model => model.BirthDate) 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

Answer 1

Điều này xảy ra bởi vì định dạng ngày của bạn từ jquery không phải là ngày định dạng mong đợi bởi dữ liệu DateTime trong C#/VB. Thay đổi JQ định dạng ngày tháng để được giống như '1/1/0001 00:00:00'

cách chính xác có thể là: $("#date").datepicker({ dateFormat: 'dd/mm/yy hh:MM:ss' });

T.B. này '1/1/0001 00:00:00' là giá trị datetime mặc định trong C#

Kiểm tra tài liệu: http://api.jqueryui.com/1.8/datepicker/#option-dateFormat

Cũng liên kết này có thể giúp bạn đạt được sáng/chiều phần: http://derekallard.com/blog/post/adding-time-to-jquery-ui-datepicker/

date_obj = new Date(); 
date_obj_hours = date_obj.getHours(); 
date_obj_mins = date_obj.getMinutes(); 

if (date_obj_mins < 10) { date_obj_mins = "0" + date_obj_mins; } 

if (date_obj_hours > 11) { 
    date_obj_hours = date_obj_hours - 12; 
    date_obj_am_pm = " PM"; 
} else { 
    date_obj_am_pm = " AM"; 
} 

date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+date_obj_am_pm+"'"; 

$("#entry_date").datepicker({dateFormat: $.datepicker.W3C + date_obj_time}); 

Sử dụng điều khiển này:

[HttpPost] 
    public ActionResult Index(DateTime? date) 
    { 
     //do something with date 
    } 

và javascript này trong tài liệu đã sẵn sàng:

$("[name=date]").datepicker({ dateFormat: "m/dd/yy" }); 

ngày này sẽ được điền tương ứng.

Answer 2

Tôi không chắc chắn nếu điều này là ggonna giúp đỡ. nhưng tôi luôn làm theo cách này.

Tạo một cái gì đó như dưới đây

<td>date</td><td><input type="text" id="date" name="date"></td></tr>

và việc sử dụng request.getParameters("date");

Cảm ơn