Question

I have a model with a StartTime date and an EndTime date :

[Required]
[DataType(DataType.DateTime)]
public DateTime StartTime { get; set; }

[Required]
[DataType(DataType.DateTime)]
public DateTime EndTime { get; set; }

The current view which uses these two dates has the following form :

@if (Roles.IsUserInRole("Teacher"))
{
    <h2>AddSession</h2>

    using (Html.BeginForm("SessionAdded", "Course", FormMethod.Post, new { id = "myform" }))
    {
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>Add Session</legend>
            <div class="editor-label">
                @Html.LabelFor(model => model.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.StartTime)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.StartTime, new { @class = "date" , id = "StartTime" })
                @Html.ValidationMessageFor(model => model.StartTime)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.EndTime)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.EndTime, new { @class = "date", id = "EndTime" })
                @Html.ValidationMessageFor(model => model.EndTime)
            </div>
            <p>
                <input id="submit" type="submit" />
            </p>
        </fieldset>
    }
}

When I remove :
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> from my view I have no problem.

But when I use jquery.validate, my two fields return: Please enter a valid date.. I use the DateTimePicker for jQuery UI.

I have the follow Javascript code :

$(document).ready(function () {

var datepickers = $('.date').datetimepicker({
    minDate: 0,
    dateFormat: "dd/mm/yy",
    timeFormat: "hh:mm",
    onSelect: function (date) {
        var option = this.id == 'StartTime' ? 'minDate' : 'maxDate';
        datepickers.not('#' + this.id).datepicker('option', option, date);
    }
});

$("#myform").validate({
    ignore: ".date"
})

});

I would like to ignore jQuery validation for my two Date fields (class=”date”) because it checks for a specific dateformat and I have to use this one in my app : dd/mm/yyyy hh:mm.

I also tried to do a custom validator but without success. I always get the Please enter a valid date error…

Thanks for your help,

Ed

Answer 1

You may need to change the CurrentCulture to the one you’re using as your date format. Hanselman has a nice post about it. Are you using unobtrusive validations included on MVC?

This will be the changes that you’ll need to do (in my case the culture is for GB)

web.config

<globalization culture="en-GB" uiCulture="en-GB" enableClientBasedCulture="false" />   

Global.asax

Thread.CurrentThread.CurrentCulture = new CultureInfo("en-GB");

Also, you can create an action filter to ensure that the action is getting the culture when submitting

public class CultureAwareActionAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            base.OnActionExecuting(filterContext);

            if (!string.IsNullOrEmpty(filterContext.HttpContext.Request["culture"]))
            {
                Thread.CurrentThread.CurrentCulture = Thread.CurrentThread.CurrentUICulture = new CultureInfo(filterContext.HttpContext.Request["culture"]);
            }
        }
    }

and you will just add the [CultureAwareAction] annotation on your method declaration

(That filter was written for the Telerik team, for handling localization in their controls)