jQuery DateTimePicker: Post datetime data to ViewModel in MVC3 action using jQuery $.Post()

Question

I'm trying to post my date, picked with a jQuery DateTimePicker, from an input field to a DateTime property in my ViewModel. I keep getting 1/01/0001 0:00:00 parsed to it. Let's have a look at my viewmodel:

public class GameViewModel
{
    [Display(Name = "Home team")]
    public virtual String Home { get; set; }

    [Display(Name = "Away team")]
    public virtual String Away { get; set; }

    [Display(Name = "Kickoff time")]
    [DataType(DataType.DateTime)]
    public virtual DateTime GameTime { get; set; }

    [Display(Name = "Standard sharing on?")]
    public virtual Boolean IsStandardSharing { get; set; }

    //Hidden
    public virtual Guid PeriodId { get; set; }

}

Here's my razor for the inputfield:

@Html.EditorFor(m => m.GameTime)

And finally my JavaScript

$('#GameTime').datetimepicker({
    constrainInput: true,
    firstDay: 1,
    monthNames: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    dayNamesMin: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
    timeText: "Tijdstip",
    hourText: "Uur",
    minuteText: "Minuut",
    currentText: "Nu",
    closeText: "Klaar",
    stepMinute: 5,
    hour: 12

});

$('#btnAddGame').click(function () {
    var testPeriodId = "245f83a2-52b5-4a21-815e-a0b40020d7ff";
    var valDdlHome = $('#Home').val();
    var valDdlAway = $('#Away').val();
    var valTxtGameTime = Date($('#GameTime').val());

    var valRdnIsStandardSharing = $('#IsStandardSharing').val();
    var postUrl = "/period/saveperiodgame/";

    $.post(
        postUrl,
        { Home: valDdlHome, Away: valDdlAway, GameTime: valTxtGameTime, IsStandardSharing: valRdnIsStandardSharing, PeriodId: testPeriodId },
        function (data) {
            if (data.Status == 200) {
                console.log("Game added. Id:" + data.Data);
                if ($('#emptyText').length > 0) {
                    $('#emptyText').hide();
                }
                MijnProno.fn.BuildPeriodGameTableRow(valTxtGameTime, valDdlHome, valDdlAway, data.Data);
            } else if (data.Status == 500) {
                console.log("Failed to add game");
            } else {
                console.log("Fault with Javascript");
            }
        }, "json"
    );
});

Been reading and trying answer on SO all the afternoon but didn't managed to get it to work (I always wait to long to ask questions like this because of possible duplicates).

After reading some highly upvoted posts I suppose I have to post my date like the /Date(1224043200000)/ format to let my ViewModel understand it. Is this right? If so, how can I get my mm/dd/yyyy hh:ss format convert to json?

Answer 1

Finally, I found a solution for this problem. A blog post by Scott Hanselman drove me to the solution. I think I must have tried every way to parse my date except this one

//JAVASCRIPT CODE
var valTxtGameTime = $('#GameTime').val();    
new Date(valTxtGameTime).toJSON()

Checking my HTTP Post, the date is now posted as...

2012-08-24T19:50:00.000Z

...and correctly received in my ViewModel.