Question

I have Model properties

 public DateTime SelectedDate { get; set; }
 public DateTime SelectedDateTo { get; set; }

The view has

<input id="Testdate-Field" type="text"  style="width: 125px;" value="@Html.DisplayTextFor(m=>m.SelectedDate)" /> To
   <input id="TestdateTo-Field" type="text"  style="width: 125px;" value="@Html.DisplayTextFor(m=>m.SelectedDateTo)" />

To show the calendar in the view I have

  $("#Testdate-Field").bind("click", function(event) {       
     $( "#Testdate-Field").datepicker();
    });    

      $("#TestdateTo-Field").bind("click", function(event) {       
     $( "#TestdateTo-Field").datepicker();
    });    

Now, 2 problems

1. When I click in the input box for the first time, the calendar doesn’t appear till I click somewhere else and then in the input box for date.
2. When I pick a date from the calendars my model properties SelectedDate and SelectedDateTo do not change and remain the default values when I read them. What do I need to do to read the input dates?

—Update—
Added this in ready as per the suggestion

 $("#Testdate-Field").datepicker();
 $("#TestdateTo-Field").datepicker();

and the first problem is solved! Now how do I bind what I have selected in the datefield to my model properties?

Answer 1

For question 1, do not put your .datepicker() code in the bind event. Simply execute those on document ready:

<script>
    jQuery(document).ready(function ($) {
        $( "#Testdate-Field").datepicker();
        $( "#TestdateTo-Field").datepicker();
    });
</script>

For your second question, use Html helpers to generate your inputs and then in your controller you can easily bind them: instead of using DisplayTextFor inside of input tags YOU generate, use TextBoxFor to generate the input tags for you:

ViewModel:

public class SampleViewModel
{
    // other properties here
    public DateTime SelectedDate { get; set; }
    public DateTime SelectedDateTo { get; set; }
    // other properties here
}

View:

@model SampleClassViewModel
@using(Html.BeginForm())
{
    @Html.TextBoxFor(m => m.SelectedDate, new { class = "datepickers" })
    @Html.TextBoxFor(m => m.SelectedDateTo, new { class = "datepickers" })
    <input type="submit" />
}
<script>
    jQuery(document).ready(function ($) {
        $( ".datepickers").datepicker();
    });
</script>

There are many way to bind your properties, here are a couple…
Controller option 1:

[HttpPost]
public ActionResult SomeControllerAction(SampleViewModel model)
{
    // do work...
}

Controller option 2:

[HttpPost]
public ActionResult SomeControllerAction()
{
    var model = SomeServiceMethodToBuildModel();
    this.TryUpdateModel(model);
    // do work...
}

Thanks!