title: Bind Datetime Model value to datepicker and pass them to controller method
body: <p>I am building an MVC4 app and in my model I have these fields:</p>
  
  <pre><code>[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
  public DateTime mDateCreated { get; set; }
  
  [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
  public DateTime? mDateModified { get; set; }
  
  [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
  public DateTime? mDateLastDisplayed { get; set; }
  
  [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
  public DateTime mStartDate { get; set; }
  
  [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
  public DateTime? mEndDate { get; set; }
  </code></pre>
  
  <p>I am trying to set datepickers in a view. Here's what I have done so far:</p>
  
  <pre><code>&lt;div class="float-left"&gt;
      &lt;p&gt;Date Created:&lt;/p&gt;
      &lt;p&gt;Date of last modification:&lt;/p&gt;
      &lt;p&gt;Date Last Displayed:&lt;/p&gt;
      &lt;p&gt;Date of promotion's start:&lt;/p&gt;
      &lt;p&gt;Date of promotion's end:&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="float-right"&gt;
      &lt;p&gt;
          @Html.TextBoxFor(_item =&gt; _item.mCardOfTheDay.mDateCreated, new
              {
                  @value = Model.mCardOfTheDay.mDateCreated,
                  @selectedDate = Model.mCardOfTheDay.mDateCreated,
                  @class = "datePick",
                  @type = "date",
                  @id = "dateCreated"
              })
      &lt;/p&gt;
      &lt;p&gt;
          @(Model.mCardOfTheDay.mDateModified != null ? Html.DisplayFor(_item =&gt; _item.mCardOfTheDay.mDateModified) : Html.Label(ValueDomain.FIELD_UNAVAILABLE))
      &lt;/p&gt;
      &lt;p&gt;@(Model.mCardOfTheDay.mDateLastDisplayed != null ? Html.DisplayFor(_item =&gt; _item.mCardOfTheDay.mDateLastDisplayed) : Html.Label(ValueDomain.FIELD_UNAVAILABLE))&lt;/p&gt;
      &lt;p&gt;
          @*@Html.EditorFor(_item =&gt; _item.mCardOfTheDay.mStartDate, new { @class = "datePick", @type="date" })*@
          @*@Html.TextBoxFor(_item =&gt; _item.mCardOfTheDay.mStartDate, new {@id = "dateStart"})*@
        @*  @Html.TextBoxFor(_item =&gt; _item.mCardOfTheDay.mStartDate, new
              {
                  @value = (DateTime?) Model.mCardOfTheDay.mStartDate,
                  @selectedDate = (DateTime?) Model.mCardOfTheDay.mStartDate,
                  @class = "datePick",
                  @type = "date",
                  @id = "dateStart"
              })*@
      &lt;/p&gt;
      &lt;p&gt;
          @Html.TextBoxFor(_item =&gt; _item.mCardOfTheDay.mEndDate, new
              {
                  @value = Model.mCardOfTheDay.mEndDate,
                  @selectedDate = Model.mCardOfTheDay.mEndDate,
                  @class = "datePick",
                  @type = "date",
                  @id = "dateEnd"
              })
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And CSS to show what I'm doing with the classes:</p>
  
  <pre><code>$('.datePick').datepicker({
      dateFormat: "dd/ww/yy",
  });
  
  $('.datePick').each(function () {
      var a = $(this).datepicker({
          dateFormat: "dd/ww/yy",
          defaultDate: new Date($(this).val())
      });
  });
  </code></pre>
  
  <p>This shows the various problems I have. First:</p>
  
  <ol>
  <li>Using <code>Html.TexborFor</code> helpers with <code>@value</code>, <code>@selectedDate</code> and so on does displays a datepicker, but this datepicker's default <strong>shown</strong> value is <code>aaaa-mm-dd</code> instead of the value binded to the model and when I pass the model to the controller none of the data is kept (meaning that the mEndDate is always null);</li>
  <li>Trying only to set a datepicker ends up with the same results;</li>
  <li>Here's a sample of Html code behind to show you the "results" I have: <code>&lt;input class="input-validation-error datePick" data-val="true" data-val-date="The field mDateCreated must be a date." data-val-required="The mDateCreated field is required." id="dateCreated" name="mCardOfTheDay.mDateCreated" selectedDate="11/21/2013 00:00:00" type="date" value="" /&gt;
  </code></li>
  <li>And if I use the EditorFor, all I have is a date in string format, no datepicker.</li>
  </ol>
  
  <p>What I want is a datepicker with the proper date selected that passed the selected date to the controller method in post. Can anyone help me figure out why this does not work?</p>