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

Slides and demo on my Media Queries Live session @ Microsoft

So here are my slides and demos from my Live session at Microsoft. Hope you found it interesting and may it be useful in your web applications.

For those who didn’t follow the session. We changed the existing ASP.NET MVC Music Store site, so that it would be available on a mobile phone as well.

sessionimage

The video will be online in a few days on Channel9.

 

 

k.

ASP.NET MVC Music Store on a mobile device

Next week, i will be giving a session on CSS Media Queries at Microsoft. While I was making the slides I was thinking about some demos.

One of the things I will be showing is how you can change the ASP.NET MVC Music Store css so that it would render nicely on a mobile device.

This is a screen shot of what I will do, just to make you hungry for more. On the left, you see the normal desktop version, on the right is the mobile version:

aspnetmvc_mediaqueries

so, tune in for the Media Queries Live session.