Date selected using JQuery Datepicker is not reflecting in MVC3 model on submit

Question

I had very tough time to resolve this (and I am sure I am doing some silly mistake somewhere :)) Could somebody please help.

I am not able to retrieve the date selected using JQuery datepicker in the model while submitting. It give me value as '1/1/0001 12:00:00 AM'. Am I missing something?

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

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>

@user216378 have you tried the answers, yet? – radu florescu Mar 14 '13 at 07:27 — radu florescu, Mar 14 '13 at 07:27

radu florescu · Accepted Answer · 2013-03-13T21:31:35.280

This happens because your date format from jquery is not the expected format date by DateTime data in C#/VB. Change jq date format to be the same as '1/1/0001 12:00:00 AM'

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

P.S. this '1/1/0001 12:00:00 AM' is the default datetime value in C#

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

Also this link may help you to achieve 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 document ready:

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

now date will be filled accordingly.

Hi Floradu88, I changed the date format to *dateFormat: "m/dd/yy"* as suggested by you and this seems to be working. (I do not need 'time' part at this moment :))..three cheers.. But the real question now is how the regional settings will be taken cared? I mean, if i want to show date format as 'mm/dd/yyyy' on screen, do i need to always convert it to 'm/dd/yyyy' format to get it into model? My understanding was that the datepicker code is smart enough to extract correct date looking at the regional settings...or am i expecting too much...:) — user2163878, Mar 15 '13 at 04:23
if you use the date as provided: m/dd/yy will give you 03/15/2013 right now. http://stackoverflow.com/questions/2388115/get-locale-short-date-format-using-javascript might be a good place to start your search, I recommend to keep on date format over your whole site. But you can also use this : http://bytes.com/topic/c-sharp/answers/245538-how-can-i-get-date-formatted-according-regional-settings-made-operating-system-level — radu florescu, Mar 15 '13 at 07:14

score 0 · Answer 2 · answered Mar 13 '13 at 06:58

0

i'm not sure if this is ggonna help. but i conside doing it this way.

Create something like below

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

and the use request.getParameters("date");

Thanks

answered Mar 13 '13 at 06:58

rakesh marsonio

37
8

This is a workaround and not the correct way to use technology. This will have the same outcome. – radu florescu Mar 13 '13 at 07:02
@Floradu88: i'm sorry int hat case – rakesh marsonio Mar 13 '13 at 07:27
to be more precise he will get the same default value, because the date is parsed with DateTime.TryParse which in his case will result in a default date because of the format of the date. – radu florescu Mar 13 '13 at 07:33

Date selected using JQuery Datepicker is not reflecting in MVC3 model on submit

2 Answers2