Datetimepicker display format issue

Question

I am not sure if I am the only one having this issue on Chrome Browser but it is really annoying that I cannot fix it. I have done quite a bit of search here but nothing has helped.

First of all here is my ViewModel Data Annotation

    [Required]
    [DataType(DataType.Date)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd hh:mm}")]
    [DisplayName("Start Date")]
    public DateTime? StartDate { get; set; }

On the view I am using datetimepicker bootstrap extension

When I am on the process of Creating the date I just select the date from the calander then I select the time as well. On the creating process there is no issue on Chrome and EI10. However, once the date has been created I go to edit mode to change the date. The date is displayed in dd/MM/yyy hh:mm format(example 18/03/2014 10:00) instead of yyyy-MM-dd hh:mm (2014-03-18 10:00). Without changing the date I click Update button on the page I get the validation error for the date fields.(See the screenshot) This is only in chrome browser. in EI10 everthing works fine. This is the first time that I am experiencing that something works on IE but not in Chrome :)

I have also set the datetimepicker date format to

$('.startdate').datetimepicker({ format: 'yyyy-MM-dd hh:mm' });

But still I cannot change the display format of the field to yyyy-MM-dd hh:mm. The last thing that comes in my mind that I will have to convert the format in the controler before it gets passed the view? But I thought the ViewModel annotations is actually should be doing that for me or I am wrong ?

I found a line of code that people are suggesting for the issue

jQuery.validator.methods["date"] = function (value, element) { return true; }

I still couldn't get it work