web-dev-qa-db-fra.com

Spécifiez le format de date dans MVC5 (jj / mm / aaaa)

J'essaie de gérer la saisie utilisateur pour les valeurs de date, je souhaite inviter l'utilisateur à saisir la date dans ce format: jj/mm/aaaa

ce que j'ai essayé de faire:

J'ai lu et implémenté la réponse de Darin dans cette question: Format datetime dans asp.net mvc 4

Voici ma mise en œuvre:

Dans Global.asax

    (ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var displayFormat = bindingContext.ModelMetadata.DisplayFormatString;
        var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);

        if (!string.IsNullOrEmpty(displayFormat) && value != null)
        {
            DateTime date;
            displayFormat = displayFormat.Replace
            ("{0:", string.Empty).Replace("}", string.Empty);
            if (DateTime.TryParse(value.AttemptedValue, CultureInfo.InvariantCulture, DateTimeStyles.None, out date))
            {
                return date;
            }
            else
            {
                bindingContext.ModelState.AddModelError(
                    bindingContext.ModelName,
                    string.Format("{0} is an invalid date format", value.AttemptedValue)
                );
            }
        }

        return base.BindModel(controllerContext, bindingContext);
    }

Date de départ dans le modèle:

[Required(ErrorMessage = "Departure date is required")]
        [Display(Name = "Departure Date")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime DepartureDate { get; set; }

En vue:

 <div class="col span-1-of-2">
                            @Html.LabelFor(m => m.DesignVacation.DepartureDate)
                            @Html.EditorFor(m => m.DesignVacation.DepartureDate)

                        </div>

Et voici la sortie lors de l'exécution de la vue: enter image description here

Ça commence par le mois (mm) mais ce que je veux c'est ce format: jj/MM/aaaa

Comment obtenir ce format en utilisant editorFor (et si possible avec textboxFor).

c#asp.netasp.net-mvcdatedatetime
9
fares Ayyad

Vous générez le sélecteur de date HTML5 du navigateur en utilisant EditorFor() en conjonction avec [DataType] et [DisplayFormat] les attributs. Les spécifications exigent que le format soit yyyy-MM-dd (Format ISO). Modifiez l'attribut en:

[Required(ErrorMessage = "Departure date is required")]
[Display(Name = "Departure Date")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime DepartureDate { get; set; }

et la date sera affichée dans la culture de l'appareil de l'utilisateur, ce à quoi le sélecteur de date HTML-5 est destiné.

Notez que vous n'avez pas besoin d'un classeur de modèle personnalisé (la date sera publiée au format ISO et sera correctement liée par le DefaultModelBinder).

Notez cependant que le sélecteur de date HTML-5 est uniquement pris en charge dans Chrome et Edge, et une zone de texte normale sera affichée dans Firefox (par exemple). Si vous voulez une interface utilisateur cohérente, alors il est recommandé vous utilisez un plugin jquery datepicker (par exemple jquery-UI) mais vous devrez également reconfigurer le validateur pour la validation côté client (reportez-vous à cette réponse pour un exemple).

9
user3559349

si vous regardez la documentation de propriété DisplayFormatAttribute.DataFormatString vous verrez

Obtient ou définit le format d'affichage de la valeur de champ.

il n'est pas mentionné qu'il changera le format de conception du datepicker, il modifie seulement le format de la valeur. puisque vous recevez la date du HTML 5 date picker vous ne pouvez pas changer son format Existe-t-il un moyen de changer le type d'entrée = format "date"? et certains navigateurs ne prennent pas en charge HTML 5 date picker mais vous pouvez utiliser jquery date picker

ajoutez ceci dans head

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

et dans body

@Html.TextBoxFor(m => m.DesignVacation.DepartureDate)

et enfin ajouter script

<script>

   $(function(){

       $('#DesignVacation_DepartureDate').datepicker({
        dateFormat: 'dd/mm/yy'
    });

});

</script>
3
Usman