jQuery UI datepicker not working right with asp.net mvc

It's probably this part:

{ dateFormat: "dd/mm/yy" }

That's not the default way .NET displays a date, so jQuery might not able to parse it. You need to make sure the day comes before the month, and the year is 2 digits.

Edit: After reading your edit about the control failing when the day is greater than 12, this is definitely causing that. However, the issues I mentioned below might still cause problems after you've fixed the date format.

Other potential problems:

You're setting a readonly HTML attribute, and I don't know why you would do that:

@readonly = true

This will either do nothing or suppress the datepicker from popping up.

Lastly, I notice you're setting the name and ID by hand:

id = Model.Name, name = Model.Name

That's the editor for Model.Value, so why are you connecting it to Model.Name? Does anything else in your page have the same ID? Does any other form field have the same name? If so, it's likely to break things on both the client and the server. You don't even need to specify those; the MVC helper method can do it for you.

What to do:

First of all, annotate your ViewModel as some have suggested, but make sure the format is right:

[UIHint("DateTime")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/mm/yy}", ApplyFormatInEditMode = true)]
public DateTime? Value { get; set; }

That should fix it, but consider also removing the id, name, and readonly attributes from your Razor code completely.

If you're using HTML5, one thing that might help is using EditorFor instead of TextBoxFor. That should cause it to use the HTML5 DateTime input type. jQuery-UI shouldn't have any trouble handling TextBoxes, but it can't hurt.

@Html.EditorFor(x => x.Value, new { @class = "date" })

using UIHint easy to set Datepicker

[UIHint("DateTime")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
[Display(Name = "Due Date")]
public Nullable<System.DateTime> Value{ get; set; }

Add DateTime.cshtml file in this path Shared/EditorTemplates

@model Nullable<System.DateTime>
@if (Model.HasValue)
{
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}", Model.Value), new { placeholder = "MM/DD/YYYY" })
}
else
{
    @Html.TextBox("", null, new { placeholder = "MM/DD/YYYY" })
}
@{
    string name = ViewData.TemplateInfo.HtmlFieldPrefix;
    string id = name.Replace(".", "_");
}
<script type="text/javascript">
    $(function () {
        $("#@id").datepicker({
            dateFormat: "mm/dd/yy"
        });
    });
</script>

Can you try annotating your view-model property like:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/MM/yy}", ApplyFormatInEditMode = true)]
public DateTime? Value { get; set; }

As a workaround I'm reformatting the value of the textbox datepicker during submit so it will format back to mm/dd/yy.

$('#submit').submit(function() {

var dateTypeVar = $('#txtDateBirth').datepicker('getDate');
var oldFormat = $.datepicker.formatDate('mm/dd/yy', dateTypeVar);
                  $('#txtDateBirth').val(oldFormat);
});

when postback mvc will be able to know now the format.

Hope this helps