Displaying DateTime picker instead of Date picker in ASP .NET MVC 5.1/HTML 5 specific

Question

I write application in ASP .NET MVC 5.1

I have a field:

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

and then in View

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

which translates to:

if I just change annotiations above property in model to:

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

I don't get any picker displayed. If I change them to:

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

there is only hh:mm to choose from.

Question: Displaying DateTime picker instead of Date picker in ASP .NET MVC 5.1. I am asking for ASP .NET 5.1 HTML 5 specific solution.

Discounter

Answer 1

Your requirements are pretty picky...

Specifying the attribute Datatype for a field, will generate an input having as type the attribute specified. That's why when you add [DataType(DataType.Date)], the input generated will be a date picker, but if you add [DataType(DataType.DateTime)], the input will be of type datetime, thus why you don't get any picker displayed. Why? Because a few years ago, the browsers supporting input datetime decided to stop supporting it and W3C removed this feature due to lack of implementation.

However, not so long ago, some browser vendors started supporting again datetime-local which is back on the draft. As of now, the latest versions of Chrome, Opera and Microsoft Edge support it.

One solution would be to use the BootStrap or the jQuery Datetime Picker as Ajay Kumar suggested.

Another one would be, if you don't mind the few supporting browsers, to use datetime-local. Like this for instance:

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

Incontrollable

I don't see this a picky in the slightest. Just because something has not been implemented doesn't mean it's picky to ask for it. I think it's ridiculous that there is no date and time picker. It's a standard control on phone OS now, why not browsers? – Wellstacked

I absolutely agree with you. I was mainly saying that for the pun – Incontrollable

Ah sorry. I'm so ashamed. I should have taken more time reading your post – Wellstacked

Answer 2

You are getting this date picker because of html5 and browser supporting html5. Possible options :

• BootStrap datetime picker
• jQuery Datetime Picker

Taro

I am looking for ASP .NET MVC 5.1 and HTML 5 solution. No JavaScript, JQuery etc. Is there any other solution than install Safari? – Discounter

w3schools.com/html/… w3schools.com/html/… w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_time – Taro

Your bootstrap link is for a date picker, not date and time, and so is your w3schools link. – Mazard

Answer 3

Add in object definition:

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

in .cshtml add as:

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

Infuscate

Thanks for that! Brilliant! I've been trying to figure this out off and on for months! – Afghan

Great solution for those not trying to use jQuery UI or some other plugin. Thank you. – Protolithic

Answer 4

My Solution was slightly different. Although it does use javascript/jQuery to accomplish. I went with the Fact if you use the data annotation

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

Now you have to have jqueryUI scripts and CSS included on the page(or in a bundle). In 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

Since the DataType(DataType.DateTime) makes a input with the type being datetime. Just use that fact and take all of those and make them date time pickers using jQuery. I have this code that is included in my _Layout page bundle.

So now all I have to do is annotate the property in the model and It will show up as a jQuery Date time picker. You may want to change the defaults for the date time picker. Hope this helps someone out.

Brana