web-dev-qa-db-fra.com

La date de champ doit être une date en mvc en chrome

Je fais une simple application Internet MVC4, qui permet d’ajouter des éléments aux catégories.

Voici ce que j'ai fait jusqu'à présent.

J'ai un datepicker dans mvc view. Le script pour le datepicker est comme ça.

<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>

Ma propriété modèle:

        [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; }

et à mon avis, j'ai fait ceci:

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

L'erreur est comme ça:

The field Item DueDate must be a date.

Ce qui est étrange, c’est que cela fonctionne dans IE et dans Mozilla, mais ne fonctionne pas dans Chrome.

J'ai trouvé beaucoup d'articles sur SO, mais aucun ne m'aide

Des idées/suggestions?

jqueryasp.net-mvcasp.net-mvc-4jquery-ui-datepicker
26
Karthik Chintala

Note de l'éditeur: Cette réponse n'est plus valide. À partir de jQuery 1.9 (2013), la méthode $.browser a été supprimée

Selon ce message , il s’agit d’une bizarrerie connue avec les navigateurs Webkit.

Une solution consiste à modifier jquery.validate.js en recherchant la fonction date: function (value, element) et à y insérer ce code:

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));
}
30
Rowan Freeman

Sans changer jquery.validate.js, vous pouvez utiliser le code ci-dessous dans $(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));
    }
};
43
Mahesh

Vous trouverez ci-dessous le code de travail utile pour résoudre le problème du sélecteur de dates en chrome et safari: 

public DateTime? StartDate { get; set; }

Vue:

@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));
        }
    };
}
7
KSK

La solution Rowan Freeman ne fonctionnera pas pour moi puisque .toLocaleDateString(value) n'analyse pas les chaînes value

voici la solution que j'ai trouvée => dans jquery.validate.js trouver cette définition de fonction: "date: fonction (valeur, élément)" et remplacer le code avec:

// 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));
},
7
Chtiwi Malek

Voici La solution de Maxim Gershkovich précisa un peu plus:

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

Remarques:

  • Cela dépend de la méthode jQuery datepicker fournie avec l'interface utilisateur jQuery

  • Ceci est en réalité plus robuste que la validation de date native fournie avec jQueryValidate. 

    Selon les docs le date de validation :

    Renvoie true si la valeur est une date valide. Utilise la date intégrée de JavaScript pour vérifier si la date est valide, et donc ne vérifie pas l'intégrité Seul le format doit être valide, pas la date réelle. Par exemple, 30/30/2008 est une date valide.

    Attendu que parseDate vérifiera que la date est valide et existe réellement.

7
KyleMit

J'ai résolu ce problème en passant de DateTime à String .

C’est la meilleure solution pour un bon entretien que je puisse penser pour le moment.

0
alansiqueira27