Using HTML5 date element in ASP.NET MVC3

With the arrival of HTML5, a few new elements are introduced:

  • email
  • url
  • datalist

Another pretty useful element is the date element

<input type=”date” />

Unfortunately, this element is not supported by most browsers. Now here is a trick to have a fallback in ASP.NET MVC3. We will use the date control if it is supported and use the jQuery UI Datepicker if it is not supported.

Because we want to do this for all date controls in our project, we will create a DisplayTemplate.

Step1: Create a DisplayTemplates folder in the shared folder of your project

Step2: Add a Partial View with the name of the type, in this case DateTime

Step3: Because I’m a razor fan, we’ll use razor.

@model DateTime

<input type=”date” />
<script type=”text/javascript”>
if (!Modernizr.inputtypes[“date”]) {
$(“:input[type=date]”).datepicker();
}
</script>

Now I’m putting the script in the template, but to reuse it refer to it on your layout page.

Don’t forget references to jQuery UI, Modernizr. Place them in your layout page.

gr k

Advertisements

Building Desktop Applications with Silverlight

As promised, here is a link to the code and the slides of our BESUG session last evening @combell.

I hope you had a good time and found some inspiration to start developing your own desktop applications with Silverlight.

If you have any questions, don’t hesitate to send a mail.

I also hope that I can welcome you for our next session at community day where we will talk about the new features of the Windows Phone 7 mango update.

I also want to thank combell for the location, food and drinks and off course the amazing T-shirts. I know a lot of people who want to have a shirt like this one.

k.