Geek Answers Handbook

Date selected using jQuery Datepicker does not reflect MVC3 model to send

I had a very difficult time to solve this problem (and I'm sure I'm making some kind of stupid mistake somewhere :)) Can someone please help.

I cannot get the date selected using jQuery datepicker in the model when sending. This gives me the value "1/1/0001 12:00:00 AM". Did I miss something?

To isolate my problem, I created a simple MVC3 application using a template from Visual Studio 2010. Details:

Model:

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

Controller:

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

 @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>
+6
source share
2 answers

This is because the date format from jquery is not the expected date form according to DateTime in C # / VB. Changing the jq date format will be the same as "1/1/0001 12:00:00 AM"

the correct way could be: $("#date").datepicker({ dateFormat: 'dd/mm/yy hh:MM:ss' });

PS is '1/1/0001 12:00:00 AM' - the default date and time value in C #

Check documentation: http://api.jqueryui.com/1.8/datepicker/#option-dateFormat

Also this link can help you reach the am / pm part: 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});

Use this controller:

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

and this javascript in the document is ready:

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

now the date will be filled accordingly.

+2
source

I am not sure if this will help. but I view it this way.

Create something like below

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

and using request.getParameters("date");

thanks

0
source

More articles:


All Articles