Textboxfor mvc3 date formatting and date validation

Question

I've decided to get started with MVC 3 and I ran into this issue while trying to redo one of my web apps to MVC3.

I've got projects setup this way:

public class Project
{
    public int      ProjectID       { get; set; }

    [Required(ErrorMessage="A name is required")]
    public string   Name            { get; set; }

    [DisplayName("Team")]
    [Required(ErrorMessage="A team is required")]
    public int      TeamId          { get; set; }

    [DisplayName("Start Date")]
    [Required(ErrorMessage="A Start Date is required")]
    [DisplayFormat(ApplyFormatInEditMode=true, DataFormatString="{0:d}")]
    public DateTime StartDate       { get; set; }

    [DisplayName("End Date")]
    [Required(ErrorMessage="An End Date is required")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:d}")]
    public DateTime EndDate         { get; set; }
}

And my entry form is written this way for the dates:

<table>
    <tr>
        <td>
            <div class="editor-label">
                @Html.LabelFor(model => model.StartDate)
            </div>
        </td>
        <td>
            <div class="editor-label">
                @Html.LabelFor(model => model.EndDate)
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker", id="txtStartDate" })
                @Html.ValidationMessageFor(model => model.StartDate)
            </div>
        </td>
        <td>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker", id = "txtEndDate" })
                @Html.ValidationMessageFor(model => model.EndDate)
            </div>
        </td>
    </tr>
</table>

My problem is that the textbox are now displaying 01/Jan/0001 00:00:00. So first: how can I get the date to be formated to shortdatestring? I've found an MVC2 solution which advised to create an EditorTemplates folder in the SharedFolder and use EditorFor instead but that did not seem to be working with MVC3 . It also seemed to prevent adding classes easily like it is with TextBoxFor

And secondly once that is fixed I've got a special validation system that I need to put in place. I need to have the End Date to be AFTER the Start Date. I'm thinking of doing the check with a javascript i found http://www.datejs.com but is there a way to do the validation directly on my class?

Solution 1

For your edit template try this

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" })

Source: MVC 3 Editor Template with DateTime

jQuery DateTime comparisons

$('#txtbox').change(function() {
            var date = $(this).val();
            var arrDate = date.split("/");
            var today = new Date();
            useDate = new Date(arrDate[2], arrDate[1] -1, arrDate[0]);

            if (useDate > today) {
                alert('Please Enter the correctDate');
                $(this).val('');
            }
        });

Source: Jquery date comparison

Solution 2

there is a considerably easier way of doing this. Just use a TextBox rather than a TextBoxFor

@Html.TextBox("ReturnDepartureDate", 
    Model.ReturnDepartureDate.ToString("dd/MM/yyyy"))

this has the advantage of adding all the unobtrusive JavaScript elements, etc. Also less code!

Solution 3

Have a look at this example

@Html.TextBoxFor(s => s.dateofbirth, new { Value = @Model.dateofbirth.ToString("dd/MM/yyyy") })

Solution 4

If you decorate your viewmodel object with the following you'll only see the date portion within the text box.

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:d}")]
public DateTime Date { get; set; }

Then on your page you can simply do the following

@Html.EditorFor(model => model.Date)

Note that this is using standard MVC3. I don't have a custom Date editor template.

All credit for this answer goes to assign date format with data annotations

Solution 5

Too late but might be it can help to someone:

Model:

[Display(Name = "Date of birth")]
public DateTime? DOB{ get; set; }

HTML:

@Html.TextBoxFor(m => m.DOB, "{0:MM/dd/yyyy}", 
          new { @placeholder="MM/DD/YYYY", @au19tocomplete="off" }) 

JavaScript to add the calendar to the control:

$('#DOB').datepicker({changeMonth: true, changeYear: true, 
         minDate: '01/01/1900',  maxDate: new Date});

View more solutions