La data del campo deve essere una data in mvc in chrome

Question

Sto facendo una semplice applicazione Internet MVC4, che consente di aggiungere alcuni elementi alle categorie.

Ecco cosa ho fatto finora.

Ho un datapicker in visualizzazione mvc. Lo script per il datepicker è come questo.

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script> 
@Scripts.Render("~/bundles/jqueryval") 
<script type="text/javascript"> 
    $(function() { 
     $('#dtItemDueDate').datepicker({ 
      dateFormat: 'dd/mm/yy', 
      minDate: 0 
     }); 
    }); 
</script> 

La mia proprietà modello:

 [DisplayName("Item DueDate")] 
     [Required] 
     [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}",ApplyFormatInEditMode = true)] 
     [DataType(DataType.DateTime)] 
     public DateTime? dtItemDueDate { get; set; } 
     public char charCompleted { get; set; } 

e, a mio avviso ho fatto questo:

@Html.TextBoxFor(m => m.dtItemDueDate) 
@Html.ValidationMessageFor(m => m.dtItemDueDate) 

L'errore è simile a questo:

The field Item DueDate must be a date. 

La strana questo è che funziona in IE e Mozilla, ma non funziona funziona in Chrome.

ho trovato molti post su SO, ma nessuno di loro aiutano

Tutte le idee/suggerimenti?

Answer 1

Editor Nota: Questa risposta non è più valido, come di jQuery 1.9 (2013) il metodo $.browser è stato rimosso

---

Secondo this post si tratta di un capriccio noto con browser basati su WebKit.

Una soluzione è quella di modificare jquery.validate.js trovando la funzione date: function (value, element) e inserire questo codice in esso:

if ($.browser.webkit) { 
    //ES - Chrome does not use the locale when new Date objects instantiated: 
    var d = new Date(); 
    return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value))); 
} 
else { 
    return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); 
} 

soluzione

Answer 2

Rowan Freeman non funzionerà per me dato .toLocaleDateString(value) non analizza value stringhe

ecco la soluzione che ho trovato => in jquery.validate.js trovare questa definizione di funzione: "date: function (value, element)" e sostituire il codice con:

// http://docs.jquery.com/Plugins/Validation/Methods/date 
date: function (value, element) { 
    var d = value.split("/"); 
    return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value)); 
}, 

Answer 3

Senza modificare jquery.validate.js, è possibile utilizzare il codice snip di seguito in $(document).ready():

jQuery.validator.methods.date = function (value, element) { 
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); 
    if (isChrome) { 
     var d = new Date(); 
     return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value))); 
    } else { 
     return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); 
    } 
}; 

Answer 4

Di seguito si riporta il codice di lavoro che possa utile per qualcuno per risolvere il problema di selezione data in Chrome e Safari: Modello:

public DateTime? StartDate { get; set; } 

Vista:

@Html.TextBoxFor(model => model.StartDate, "{0:dd/MM/yyyy}", new { @type = "text", @class = "fromDate" }) 

JS:

$(function() { 
    checkSupportForInputTypeDate(); 

    $('#StartDate').datepicker({   
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'dd/mm/yy' 
    });  
}); 

//Function to configure date format as the native date type from chrome and safari browsers is clashed with jQuery ui date picker. 
function checkSupportForInputTypeDate() { 
    jQuery.validator.methods.date = function (value, element) { 
     var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); 
     var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor); 
     if (isSafari || isChrome) { 
      var d = new Date(); 
      return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value))); 
     } else { 
      return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); 
     } 
    }; 
} 

Answer 5

Ecco Maxim Gershkovich's solution spiegato un po 'di più:

jQuery.validator.methods.date = function (value, element) { 
    if (value) { 
     try { 
      $.datepicker.parseDate('dd/mm/yy', value); 
     } catch (ex) { 
      return false; 
     } 
    } 
    return true; 
}; 

Note:

• Questo dipende dal metodo jQuery datepicker che viene fornito con jQuery UI

• Questo è in realtà più robusto che la validazione della data nativa fornita con jQueryValidate.

  Secondo la documentazione su date validation:

  Restituisce true se il valore è una data valida. Utilizza la data incorporata di JavaScript per verificare se la data è valida e, pertanto, non esegue controlli di integrità. Solo il formato deve essere valido, non la data effettiva, ad esempio 30/30/2008 è una data valida.

  considerando che parseDate controllerà che la data sia valida ed effettivamente esistente.

Answer 6

ho risolto il problema modificando da DateTime a String.

Questa è la migliore soluzione per un buon servizio che posso pensare al momento.