Wednesday, January 9, 2013

Twitter.Bootstrap.MVC4 meet Bootstrap Datepicker

Update 14/01/2013

Since I wrote this I've taken things on a little further - to read about that go here.

Getting Responsive

It's the new year, it's time for new things. Long on my list of "things to do" was getting up to speed with Responsive web design. No doubt like everyone else I've been hearing more and more about this over the last year (by the way there was a good article on Mashable about this last month). RWD (in case you don't already know) is pretty much about having web interfaces that format their presentation based on the device they're running to provide a good user experience. (I kind of think of it as a write once, run anywhere approach - though hopefully without the negative connotations...)

Rather than diving straight in myself I'd heard at a user group that it might be worth taking Twitter Bootstrap as a baseline. I'm a lazy busy fellow so this sounded ideal.

I like ASP.Net MVC...

... and this flavoured my investigations. I quickly stumbled on an article written by Eric Hexter. Eric had brought together Twitter Bootstrap and ASP.Net MVC 4 in a NuGet package. Excellent work chap!

To get up and running with Eric's work was a straightforward proposition. I...

  1. Created new MVC 4 application in Visual Studio called “BootstrapMvcSample” using the “Empty” Project Template.
  2. Executed the following commands at the NuGet Package Manager Console:
    • Install-Package twitter.bootstrap.mvc4
    • Install-Package twitter.bootstrap.mvc4.sample

Check out the responsive goodness I had when I ran it:


It's big, big, big....

and it's titchy, tiny small!

This is just 1 page, with @media queries doing the heavy lifting.

Bootstrap Datepicker

The eagle-eyed amongst you will have noticed that the edit screen above features a date field. I've long been a fan of datepickers to allow users to enter a date in an application in an intuitive fashion. Until native browser datepickers become the norm we'll be relying on some kind of component. Up until now my datepicker of choice has been the jQuery UI one. Based on a quick Google it seemed that jQuery UI and Twitter Bootstrap were not necessarily natural bedfellows. (Though Addy Osmani's jQuery UI Bootstrap shows some promise...)

Since I feared ending up down a blind alley I found myself casting around for a Twitter Bootstrap datepicker. I quickly happened upon Stefan Petre's Bootstrap Datepicker which looked just the ticket.

Shake hands and play nice...

Incorporating the Bootstrap Datepicker into Twitter.Bootstrap.MVC4 was actually a pretty straightforward affair. I added the following datepicker assets to the ASP.Net MVC project as follows:

  • bootstrap-datepicker.js was added to ~\Scripts.
  • datepicker.css was added to ~\Content. I renamed this file to bootstrap-datepicker.css to stay in line with the other css files.

Once this was done I amended the BootstrapBundleConfig.cs bundles to include these assets. Once this was done the bundle file looked like this:

I then created this folder:~\Views\Shared\EditorTemplates. To this folder I added the following Date.cshtml Partial to hold the datepicker EditorTemplate: (Having this in place meant that properties with the [DataType(DataType.Date)] attribute would automatically use this EditorTemplate when rendering an editor - I understand [UIHint] attributes can be used to the same end.)

And finally I amended the Create.cshtml View (which perhaps more accurately might be called the Edit View?) to include a bit of JavaScript at the bottom to initialise any datepickers on the screen.

Et voilĂ  - it works!


A thing of beauty is a joy forever...

My thanks to Eric Hexter and Stefan Petre for doing all the hard work!

Still to do

I haven't really tested how this all fits together (if at all) with browsers running a non-English culture. There may still be a little tinkering require to get that working...

16 comments :

  1. Studly, mojo-risin code. Thank you.

    ReplyDelete
  2. Followed the exact same steps, did not work for me. I dont know why

    ReplyDelete
  3. Hi John,

    Thanks for doing this post.

    I managed to get it working, but get a validation error 'The field StartDate must be a date' when I select anything greater than day 12 in the datepicker eg. 13/03/2015

    Any help appreciated.

    Regards,

    Paul (UK - Lichfield)

    ReplyDelete
    Replies
    1. Hi wadep,

      I have the same issue, how did you manage to fix it??

      Delete
  4. Hi Peter / Paul,

    Sorry to hear you've had problems with this. Why don't you take a look at my GitHub repo below:

    https://github.com/johnnyreilly/BootstrapMvcSample

    This has the (internationalised I think) version of the Bootstrap datepicker in place and should prove a useful example for you....

    ReplyDelete
  5. Hi John,

    Excellent! Got it working:)

    Your GitHub really helped.

    Thank you.

    Regards,

    Paul

    ReplyDelete
  6. Finally a sample that works. thanks.

    ReplyDelete
  7. I did exactly what you did....
    But i get this error... The field D.O.B must be a date

    What could be the problem..
    My system date is dd-MM-yyy

    ReplyDelete
    Replies
    1. Hi Shanker,

      You might want to try the Globalized picker - check this post:

      http://icanmakethiswork.blogspot.com/2013/01/twitterbootstrapmvc4-meet-bootstrap_14.html

      Delete
  8. Good day sir John!,

    I'm new in MVC app and I was pretty amaze on doing the looping part in view that was +100 for me. could you please make some tutorials about it? from Model > DBContext > Controller > View... because I have a bunch of maintenance module like(Employee, Department, Position and etc maintenance on database) and I want to do it on just one View and one Controller which I could reuse it with different models... Is it possible?? or impossible to implement it? thank you sir for making this creative tutorials!.

    ReplyDelete
  9. Hey there,
    Your blog is great,..Thanks for this great knowledge sharing blog,...Continue this knowledge spreading task,...It would be very helpful, if you add some more topics on Hibernate and struts...Bootstrap3.0-100% Responsive

    ReplyDelete
  10. I tried this and it worked in IE 10 but I this is not working properly in chrome. Could anyone confirm that it is working fine in chrome?

    ReplyDelete