jQuery Ui DatePicker with ASP.NET MVC

On a project last year I had to use the jQuery Ui datepicker with ASP.NET MVC 3. I always intended to record the steps with explanations when I got a chance. And last week, I managed to find the time to do this:

One thing that I did in the implementation was include a colon in the DisplayAttribute of my model

        [Display(Name="Date of Birth: ")]
        public DateTime DateOfBirth { get; set; }

That leads to the non-optimal scenario whereby a colon is showing up in validation. In the video, I demonstrated how you could fix this in my client-side validation. But I forgot to demonstrate how you could fix it in the server-side validation (on the off-chance that your users have JavaScript disabled). You can use the following code in the action method of the controller:

            if (!ModelState.IsValid)
            {
                //  HACK: This will remove the colon for server-side validation. I recommend not including a colon in the
                //  Display attribute on the relevant member in your model. Just put the colon in the razor view.
                ModelState["DateOfBirth"].Errors.Clear();
                ModelState["DateOfBirth"].Errors.Add(string.Format("The value '{0}' is not a valid for Date of Birth.", Request.Form["DateOfBirth"]));
            }

As I mention in my comment, I believe that a colon should not be included in the model and could easily be added to the razor View. That would totally obviate the need for that hack.

Get the code:

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>