web-dev-qa-db-fra.com

Affichage du sélecteur DateTime au lieu du sélecteur Date dans ASP Spécifique à .NET MVC 5.1/HTML 5

J'écris une application dans ASP .NET MVC 5.1

J'ai un champ:

  [DisplayName("Date of Birth")]
  [DataType(DataType.Date)]
  public DateTime BirthDate { get; set; }

puis en vue

  <div class="form-group">
            @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BirthDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })
            </div>
        </div>

qui se traduit par:

enter image description here

si je modifie simplement les annotiations ci-dessus, dans le modèle, à:

    [DisplayName("Date of Birth")]
    [DataType(DataType.DateTime)]

Je ne fais pas afficher un sélecteur. Si je les change en:

 [DisplayName("Date of Birth")]
 [DataType(DataType.Time)]

il n'y a que hh: mm à choisir.

Question: Affichage du sélecteur DateTime au lieu du sélecteur Date dans ASP .NET MVC 5.1. Je demande une solution spécifique ASP .NET 5.1 HTML 5.

c#razordatepickerasp.net-mvc-5.1
15
Yoda

Vos exigences sont jolies difficiles ...

La spécification de l'attribut Datatype pour un champ génèrera une input ayant pour type l'attribut spécifié. C'est pourquoi, lorsque vous ajoutez [DataType(DataType.Date)], l'entrée générée sera un sélecteur de date, mais si vous ajoutez [DataType(DataType.DateTime)], l'entrée sera de type datetime. Par conséquent, aucun sélecteur ne s'affiche. Pourquoi? Parce qu'il y a quelques années, les navigateurs prenant en charge l'entrée datetime ont décidé de ne plus la prendre en charge et le W3C a supprimé cette fonctionnalité en raison d'un manque d'implémentation.

Cependant, il n'y a pas si longtemps, certains éditeurs de navigateurs ont repris le support de datetime-local, qui est de retour dans le brouillon. À partir de maintenant, les dernières versions de Chrome, Opera et Microsoft Edge le prennent en charge.

Une solution serait d’utiliser BootStrap ou le sélecteur jQuery Datetime comme Ajay Kumar l’a suggéré. 

Si vous n’êtes pas dérangé par les quelques navigateurs compatibles, un autre serait d’utiliser datetime-local. Comme ceci par exemple:

@Html.TextBoxFor(model => model.BirthDate, new { type = "datetime-local"})
4
TheWanderingMind

Vous obtenez ce sélecteur de date car html5 et le navigateur prenant en charge html5 .

4
Ajay Kumar

Ma solution était légèrement différente. Bien qu'il utilise javascript/jQuery pour accomplir. Je suis allé avec le fait si vous utilisez l'annotation de données 

[Display(Name = "The Display Name")DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yy H:mm:ss tt}"), DataType(DataType.DateTime)]
        public DateTime DateTimeFieldName { get; set; }

Vous devez maintenant avoir les scripts jqueryUI et CSS inclus sur la page (ou dans un ensemble). En Javascript:

$(function () {//DOM ready code
    // Get data-annotations that are Marked DataType.DateTime and make them jquery date time pickers
    $('input[type=datetime]').datetimepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', changeMonth: true, changeYear: true, showAnim: 'slideDown' });
});// END DOM Ready

Étant donné que DataType(DataType.DateTime) fait une entrée avec le type datetime. Utilisez simplement ce fait et prenez tous ceux-ci et faites-leur des sélecteurs de date et de date en utilisant jQuery. J'ai ce code qui est inclus dans mon ensemble de pages _Layout.

Tout ce que je dois faire maintenant, c’est d’annoter la propriété dans le modèle et cela s’affichera comme un sélecteur d’heure date jQuery .. Vous pouvez modifier les valeurs par défaut du sélecteur date-heure. J'espère que cela aide quelqu'un.

1
Mike

Ajouter dans la définition d'objet:

public class EditViewModel
{
    public string Id { get; set; }

    [Display(Name = "Username")]
    public string UserName { get; set; }

    [DataType(DataType.Date)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-ddThh:mm:ss}")]
    [Display(Name = "Registed Date")]
    public DateTime RegistedDate { get; set; }
}

dans .cshtml ajouter comme:

<div class="form-group">
    @Html.LabelFor(m => m.RegistedDate, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.RegistedDate, "{0:yyyy-MM-ddThh:mm:ss}", new { @class = "form-control", type = "datetime-local" })
        @Html.ValidationMessageFor(m => m.RegistedDate, "", new { @class = "text-danger" })
    </div>
</div>
0
Mhd. Osama Jindia