How to get a DatePicker value in razor? - c#-4.0

Question

Here my problem:
I have an input text and behind a date picker ui: and I would like to get the datepicker's value in razor:
Index.cshtml
<input id="datePickerCalendar" type= "text"/>
<script type="text/javascript">
$(document).ready(function () {
$('#datePickerCalendar').datepicker({
altFormat: "dd-mm-yy",
dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
monthNames: ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
changeMonth: true,
onSelect: function () {
/*('#datePickerCalendar').change(loadCalendar());*/
}
});
});
</script>
<table border="1" class="tableCalendar" id="calendar">
<caption> Veuillez sélectionner l'horaire souhaité </caption>
<th id="court"></th>
#foreach(var item in Model) {
foreach(var court in item.TennisCourts){
if (court.Outside == true)
{
<td id="court" class="court">Court n°#court.Number (Extérieur)</td>
}
else
{
<td id="court" class="court">Court n°#court.Number (Intérieur)</td>
}
}
}
#foreach (var item in Model)
{
var chooseDate = $('#datePickerCalendar').value; // here ! This instruction is not correct...
}
I'm Building a dynamic calendar that allow the user to make a reservation for a tennis court...
So, my questions are:
1)How to get the value from the datepicker in razor ?
2)How can I get the value every time when the user change the date ?
Thanks in advance

Answer 1

You need to post your value to a action method on the controller, surround the field with a form
#using (Html.BeginForm("Controller", "Action", FormMethod.Post))
{
}
Then change your field into a server side rendered one (So the model binder can capture the new value)
#Html.TextBoxFor(m => m.MyDate)
The action method needs to take the model as argument and it needs to have the DateTime property named MyDate
edit:
If you will be sending values from the server you need to be sure the client datepicker and the serer uses the same date format. This is a bit tricky, but I did this with the globalize jquery plugin, you have to choose if you want to hardcode the ui culture, or if the sever will use the client culture. This is done in web.config
Hardcoded
<globalization culture="se-SE" uiCulture="se-SE" enableClientBasedCulture="false" />
Client chooses
<globalization enableClientBasedCulture="true" />
edit2
Sorry for all my edits :D
A good way for sending server settings like datetime and such is to create a settings razor view and change its mime type to javascript, also be sure to have caching otherwise the client will load it every time
#{
Layout = null;
Response.Expires = 120;
Response.CacheControl = "public";
Response.ContentType = "text/javascript";
}
MyAppName = {};
MyAppName.settings = {
culture: "#Thread.CurrentThread.CurrentCulture.Name",
timeFormat: "#Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortTimePattern.ToLower()",
dateFormat: "#Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern.ToLower().Replace("yyyy", "yy")",
}