Bind selected date from jqueryui datepicker to model

Question

I am trying to bind the selected date from the jQueryUI datepicker to the model to be used in the controller, but its returning null. I am able to retrieve the selected value when formcollection is used

ViewModel

public class EmpViewModel
 {
    public int EmpId { get; set; }

    public string FirstName { get; set; }
    public string LastName { get; set; }

    public DateTime DateOfBirth { get; set; }

}

View

<div class="col-md-10">
    @Html.EditorFor(model => model.DateOfBirth, 
            new { htmlAttributes = new { @class = "form-control datefield" } })
</div>

Controller

public ActionResult Create(EmpViewModel emp)
{
}

Tried the method in the below article but couldn't get it working http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4

Script

<script>
    $(function () {
        $(".datefield").datepicker();
    })
</script>

that tutorial is five years old whats your MVC version? Please paste your `EmpViewModel` — naveen, Sep 22 '16 at 01:27
The code you have shown works fine (assuming the culture on your server accepts dates in the `MM/dd/yyyy` format) — , Sep 22 '16 at 09:06

score 0 · Answer 1 · edited May 23 '17 at 11:48

There are multiple solutions to bind datepicker into viewmodel, but these two are common ones:

First, try declaring an id attribute on EditorFor and bind jQuery datepicker to it.

@Html.EditorFor(model => model.DateOfBirth, 
            new { htmlAttributes = new { @id = "DateOfBirth", @class = "form-control datefield" } })

<script>
    $(function () {
        $("#DateOfBirth").datepicker();
    });
</script>

Second, try HttpPost attribute on your controller method if your model passed to controller using form submission, and use ModelState.IsValid when necessary.

[HttpPost]
public ActionResult Create(EmpViewModel emp)
{
    if (ModelState.IsValid)
    {
        // do something
    }
}

If those solutions still won't work, change EditorFor to TextBoxFor and check how the submission works using both form collection parameters and model binding scheme.

Additional things to concern with:

Ensure your EditorFor enclosed inside <form> tag, or try @using (Html.BeginForm("Create", "Controller", FormMethod.Post)) and place the EditorFor inside it.
Ensure the date format supplied by datepicker is in correct format recognizable by System.DateTime, don't rely on JS format (avoid using toLocaleDateString if any). Use momentjs library if you want to use specific date format.
Ensure the jQuery is loaded properly, check your browser console for jQuery's presence after page load (see if TypeError: jQuery is not defined message exists).
Try setting the plain DateTime as nullable DateTime: public DateTime? DateOfBirth { get; set; } and insert some code to check against null value.

Bind selected date from jqueryui datepicker to model

1 Answers1