CODEWITHSUNDEEP
c#asp.net-mvcdatetimedatepicker
Arif YILMAZ
Arif YILMAZ

Reputation: 5866

why it doesnt display Date and time picker in MVC 4

I am creating an MVC project, I am very new to it. I have Create View which has a datetime propery.

In Html, it just displays a simple textbox for datetime property. How can I make it Date and Time picker? And, here is my HTML code below...

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

and my model class is like below

public partial class AntsoftCrmProjectTransaction
{
    public int Id { get; set; }
    public int ProjectId { get; set; }
    public int MinutesSpent { get; set; }
    public string ProblemDescription { get; set; }
    public bool ProblemIsFixed { get; set; }
    public string ProblemResult { get; set; }
    public string CurrentlyInCharge { get; set; }
    public int SupportId { get; set; }
    public int UserId { get; set; }
    public System.DateTime CreatedTime { get; set; }

Upvotes: 0

Views: 107

Answers (2)

Igor
Igor

Reputation: 62213

You will need some type of HTML control for that. 

<input type="date"'

has support in some browsers but it is limited depending on your browser and version and is only supported in HTML5.

Your best solution is to find something like the jquery date and time picker. Use that and add some script to allow the user to pick the date time.

Upvotes: 1

Zippy
Zippy

Reputation: 1814

The @Html.EditorFor will create a html <textbox /> tag when run.

What you have to do is use a javascript library to convert that EditorFor into a DateTimePicker (you could use the JQueryUI - more details and a working example on msdn, here), something like:

<script type="text/javascript">
    $(function () {
        // This should be the element generated by your EditorFor()  
        $('#CreatedTime').datepicker();
    })
</script>

Upvotes: 1

Related Questions