web-dev-qa-db-fra.com

comment réparer 'Le champ doit être une date' sur une propriété datetime dans mvc

Je dois capturer la date et l'heure à la fois pour ma propriété modèle. Dans ma classe de modèle, j'ai les éléments suivants

[Required]
[DataType(DataType.DateTime)]
public DateTime? CallBackDate { get; set; }

Lorsque je saisis une heure valide (par exemple, 28/05/2015 15:55), le message d'erreur The field CallBackDate must be a date. continue de s'afficher.

J'ai vu la même question et essayé diverses réponses, mais rien ne semble pouvoir s'en débarrasser. J'utilise une validation côté client non intrusive et je ne peux pas la désactiver.

La source du champ de saisie a le balisage suivant

<input autocomplete="off" class="jquery_datetimepicker form-control hasDatepicker" data-val="true" data-val-date="The field CallBackDate must be a date." data-val-required="The CallBackDate field is required." id="CallBackDate" name="CallBackDate" placeholder="Enter your CallBackDate" type="text" value="">

Et jquery datetime picker a le balisage suivant

$('.jquery_datetimepicker').datetimepicker({
    dateFormat: 'dd/mm/yy',
    minDate: 0,
    showWeeks: true,
    showStatus: true,
    highlightWeek: true,
    numberOfMonths: 1,
    showAnim: "scale",
    showOptions: {
        Origin: ["top", "left"]
    },
    timeFormat: 'hh:mm tt'
});

Des idées? Merci

jqueryasp.net-mvcjquery-uiasp.net-mvc-5
11
rumi

Des problèmes de validation client peuvent survenir à cause d'un bogue MVC (même dans MVC 5) dans jquery.validate.unobtrusive.min.js qui n'accepte aucun format de date/date/heure}. Ce n'est pas causé par datepicker ni les navigateurs. Malheureusement, vous devez le résoudre manuellement. 

_ {Ma solution finalement opérationnelle)

Vous devez inclure avant:

@Scripts.Render("~/Scripts/jquery-3.1.1.js")
@Scripts.Render("~/Scripts/jquery.validate.min.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
@Scripts.Render("~/Scripts/moment.js")

Vous pouvez installer moment.js en utilisant:

Install-Package Moment.js

Et vous pouvez enfin ajouter un correctif pour l’analyseur de format de date:

$(function () {
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || moment(value, "DD.MM.YYYY", true).isValid();
    }
});
26
lukyer

J'ai ajouté le correctif pour l'analyseur de format de date, mais je devais définir le format sur 'L' pour qu'il puisse fonctionner dans tous les environnements locaux:

$(function () {
$.validator.methods.date = function (value, element) {
    return this.optional(element) || moment(value, "L", true).isValid();
}
});
6
IkManu

Dans le model par exemple: 

    [Display(Name = "Insert Start Date")]
    [Required(ErrorMessage = "You must specify the date of the event!")]
    [DataType(DataType.DateTime, ErrorMessage = "Podaj prawidłową datę wydarzenia")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)]
    public DateTime StartDate { get; set; }

    [Display(Name = "Insert End Date")]
    [Required(ErrorMessage = "You must specify the date of the event!")]
    [DataType(DataType.DateTime, ErrorMessage = "Podaj prawidłową datę wydarzenia")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)]
    public DateTime EndDate { get; set; }

Et Voir mon exemple de code:

<script>
$('#startDate').datetimepicker({
    onClose: function (dateText, inst) {
        var endDateTextBox = $('#endDate');
        if (endDateTextBox.val() != '') {
            var testStartDate = new Date(dateText);
            var testEndDate = new Date(endDateTextBox.val());
            if (testStartDate > testEndDate)
                endDateTextBox.val(dateText);
        }
        else {
            endDateTextBox.val(dateText);
        }
    }, dateFormat: 'yy-mm-dd',
    onSelect: function (selectedDateTime) {
        var start = $(this).datetimepicker('getDate');
        $('#endDate').datetimepicker('option', 'minDate', new Date(start.getTime()));
    }
}); ....

Cela a eu des effets positifs: dateFormat: 'yy-mm-jj',

5
voltdev

Vous devez vous assurer que la Culture de votre application est correctement définie.

Exemple

L'exemple suivant montre comment les cultures affectent l'analyse de la date: https://dotnetfiddle.net/vXQTAZ

DateTime dateValue;
string dateString = "28/05/2015 15:55";

if (DateTime.TryParse(dateString, CultureInfo.CreateSpecificCulture("en-US"), DateTimeStyles.None, out dateValue))
{
    Console.WriteLine("Valid en-US date.");
}
else
{
    Console.WriteLine("Not a valid en-US date.");
}

if (DateTime.TryParse(dateString, CultureInfo.CreateSpecificCulture("fr-FR"), DateTimeStyles.None, out dateValue))
{
    Console.WriteLine("Valid fr-FR date.");
}
else
{
    Console.WriteLine("Not a valid fr-FR date.");
}

Sortie

Not a valid en-US date.

Valid fr-FR date.

Paramètres côté client

Vous devrez peut-être également vous assurer que vos validateurs côté client utilisent correctement les cultures/mondialisation. Si vous utilisez le plug-in de validation jQuery avec MVC, consultez cette extension pour modifier ce plug-in en fonction de vos besoins: http://blog.icanmakethiswork.io/2012/09/globalize-and-jquery-validate.html

2
kspearrin
$(function () {
    $.validator.addMethod('date',
    function (value, element) {
        if (this.optional(element)) {
            return true;
        }
        var valid = true;
        try {
            $.datepicker.parseDate('dd/mm/yy', value);
        }
        catch (err) {
            valid = false;
        }
        return valid;
    });
    $(".datetype").datepicker({ dateFormat: 'dd/mm/yy' });
});

Mettez ce code dans un fichier datepicker.js et incluez ce fichier dans html

2
Vaibhav Nagar

$ ('# Id'). RemoveAttr ("data-val-date"); dans le script

0
kinzzy goel
  1. Ajoutez maintenant la méthode suivante dans le fichier additional-methods.js et incluez ce fichier dans votre projet:

      $.validator.addMethod('date',
        function (value, element) {
            if (this.optional(element)) {
                return true;
            }
            var valid = true;
            try {
                $.datepicker.parseDate('dd/mm/yy', value);
            }
            catch (err) {
                valid = false;
            }
            return valid;
        });
  1. La vue doit être comme ça:
       @Html.TextBoxFor(model => model.DOB, new { @class = "datetype", type ="text" })
       @Html.ValidationMessageFor(model => model.DOB)

     $(function () {
              $(".datetype").datepicker({ dateFormat: 'dd/mm/yy' }); 
      });

Ça marche pour moi.

0
Kiran Nandan