MCV BeginForm() - DateTime with jQuery DatePicker
<p>I'm trying to use the jQuery datepicker within my MVC application, but every time I submit the form, something goes wrong; may it be a wrong conversion of the date, or simply <code>null</code>.</p>

<p>It's difficult to explain, so I'd rather show in code.</p>

<p><strong>Controller function</strong></p>

<pre><code>[HttpPost]
public ActionResult GetData(ReportViewModel model)
{
    using (var eh = new ExcelHelper())
    {
        var data = new List&lt;ReportDataModel&gt;(); 
        if (!model.SpecificTimeline) { //Do something! }
        else if (model.SpecificTimeline) { //Do something else! }

        return View("Index", model);
    }
}
</code></pre>

<p><strong>Controller index</strong></p>

<pre><code>public ActionResult Index(ReportViewModel model = null)
{
    using (var eh = new ExcelHelper())
    {
        if (model.Data == null)
        {
            model = new ReportViewModel(false, DateTime.Now.AddMonths(-1), DateTime.Now, eh.GetRawReportData());
        }
        return View(model);
    }
}
</code></pre>

<p><strong>Markup (HTML)</strong></p>

<pre><code>&lt;div&gt;
    @using (Html.BeginForm("GetData", "Report", FormMethod.Post))
    {
    &lt;div class="form-horizontal"&gt;

        &lt;div class="form-group"&gt;
            @Html.LabelFor(model =&gt; model.SpecificTimeline, new { @class = "control-label col-md-2" })
            &lt;div class="col-md-10"&gt;
                @Html.CheckBoxFor(model =&gt; model.SpecificTimeline, new { @class = "" })
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            @Html.LabelFor(model =&gt; model.StartDate, new { @class = "control-label col-md-2 " })
            &lt;div class="col-md-10"&gt;
                @Html.TextBoxFor(model =&gt; model.StartDate, new { @class = "form-control datepicker" })
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            @Html.LabelFor(model =&gt; model.EndDate, new { @class = "control-label col-md-2 " })
            &lt;div class="col-md-10"&gt;
                @Html.TextBoxFor(model =&gt; model.EndDate, new { @class = "form-control datepicker" })
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            &lt;div class="col-md-offset-2 col-md-10"&gt;
                &lt;input type="submit" value="Generate Report" class="btn btn-primary" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    }
&lt;/div&gt;
</code></pre>

<p><strong>JS (Only used to convert the Datetime to the correct format)</strong></p>

<pre><code>@using (Html.BeginScripts())
{

    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/jqueryui-datepicker")

    &lt;script&gt;
        $(function () {
            var startDate = new Date('@Model.StartDate');
            var endDate = new Date('@Model.EndDate');

            $('.start-date').datepicker({
                dateFormat: 'mm-dd-yy'
            }).datepicker('setDate', startDate);

            $('.end-date').datepicker({
                dateFormat: 'mm-dd-yy'
            }).datepicker('setDate', endDate);
        });
    &lt;/script&gt;
}
</code></pre>

<p><strong>Quick look at the model</strong></p>

<pre><code>public class ReportViewModel
{
    public ReportViewModel() { }

    public ReportViewModel(bool specificTimeline, DateTime startDate, DateTime endDate, List&lt;ReportDataModel&gt; data)
    {
        SpecificTimeline = specificTimeline;
        StartDate = startDate;
        EndDate = endDate;
        Data = data;
    }

    public bool SpecificTimeline { get; set; }

    [DataType(DataType.DateTime)]
    public DateTime StartDate { get; set; }

    [DataType(DataType.DateTime)]
    public DateTime EndDate { get; set; }

    public List&lt;ReportDataModel&gt; Data { get; set; }
}
</code></pre>

<hr>

<p><strong>Problem</strong></p>

<p>Whenever I select to dates;</p>

<pre><code>startDate: 17-02-2016
endDate: 22-02-2016

format: dd-mm-yy
</code></pre>

<p>and I press the submit button "Generate Report", I want the function <code>GetData(ReportViewModel model)</code> to be hit, and generate the parameter <code>model</code> with the correct data. This is not happening as the <code>EndDate</code> property is <code>01-01-0001</code>, even though I selected a date from the datepicker. </p>

<p><strong>Edit</strong></p>

<p>I have noticed that the <code>DateTime</code> properties are equal to <code>01-01-0001</code> if I don't select anything in the datepicker input. If I do select a new date in both fields, the date in correct in the model that generates when the function <code>Getdata()</code> is hit!</p>

<p>So if I do not touch the inputs, the date gets set to the default <code>01-01-0001</code>.</p>

<p>Any workaround to that?</p>