Opinionated Input Builders – Part 9 override the default Date Time picker


I received a comment from Scott Hanselman about how would a better date time picker look using the opinionated input builders.  I knew that this would be a complex problem just for the fact that there are currently very few good solutions to this problem now.  While JQuery provides a great Date picker I am not very happy with the time picker.  So  here is a version of what this could look like.  What I like about this approach is that it takes all the complexity including the multiple form elements and javascript and pushes it to a small partial that can be easily reused as well as it could be easily tested using QUnit.


The user interface I came up with is a combination of the Jquery UI datepicker and a set of dropdowns to select the time.  I trimmed down the minute select box so that it only contains fifteen minute increments for this example.



In order to implement this I added a call to the Partial( ) method and passed in the name of my opinion for how a datetime should be rendered.


The next step was to add a partial control with the same name to my Shared view folder.  This could have been placed in the Home folder if I only wanted to have this input available for that controller.


The code for the Partial view looks like the following. The view page is strongly typed to a DateTime model property. Than comes some jquery to pull it all together.

I rendered a hidden field, this field will be used to databind when being posted back to my Save Action.  The other elements I appended some fixed names so that I can wire up an event that updates the hidden field when any of the values of the dropdowns or the date pickker text box changes.  I also write a dynamice method named after the input field in order to reduce the client side code.


This is one approach to solve this problem,  if you did not want to include this javascript and do the client side wire up of updating the hidden field this same work could be done in a Custom Model Binder that is wired up for DateTime objects that could look for fields with these names and than it could do the formatting.  So there you go a few ways to tackle this problem.

About Eric Hexter

I am the CTO for QuarterSpot. I (co)Founded MvcContrib, Should, Solution Factory, and Pstrami open source projects. I have co-authored MVC 2 in Action, MVC3 in Action, and MVC 4 in Action. I co-founded online events like mvcConf, aspConf, and Community for MVC. I am also a Microsoft MVP in ASP.Net.
This entry was posted in .Net, Asp.Net, Asp.Net MVC, c#, CoC, mvc, mvccontrib, Open Source Software, OSS. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Man – master pages are HTML inheritance. It’s basically the same thing, right? Derived classes, template method, overriding methods to change behavior. I still prefer code, though, as it’s a lot easier to test and debug. Doing F11 through partials is not the easiest thing in the world.

  • You could factor that jQuery out of your control and into an external script file by using CSS classes instead of ID’s to identify your HTML elements. The script can then use class selectors to wire up your client-side event handling.

    This gives you lighter pages, cacheable javascript, and better overall seperation of concerns on the front-end.

  • @jimmy… by easier to test you suggest that the string based methods are tested and that you correctly setup the ViewContext for the Html Helpers. I would rather change this implementation so that rather than taking a DateTime I would make a type that contains all the date needed so that the ViewModel for this input is cleaner. At the end of the day I think this would be pretty easy to test with QUnit.. and given the amount of javascript I think it would be necessary.

    @David, I am not sure that this jquery could use class selectors, at least not without it being turned into a plugin. This has to work in a way where multiple inputs of the same type could exist on the same page and they need to work independently of each other. But that being said, I will update the source code and would love to see how it could be done with class selectors alone. I imagine it would have to include some knowledge of the sibling controls.

  • Also checkout http://haineault.com/media/jquery/ui-timepickr/page/, which is a jQuery time picker I find quite nice and fancy.