JQuery DatePicker Almost Comes Out On Top

Lately I have been playing around with razor web pages a lot and I'm impressed. There's been a lot said about Web Matrix dumbing down programming. Some articles I have read have heaped praise on it while the majority seem to be slating it. Overall, I would have to agree with the latter. I found Web Matrix to be far too basic to work with. Yeah sure, it made some tasks as simply as possible but at the cost of good programming standards. Programming is not something for the masses. At least, not yet. But I've already gone off topic. That's a whole article in itself. Web Matrix bad, razor so so good.

JQuery has brought simply useful tools that can be used on any website to instantly make it look smooth and professional. The beauty of the JQuery UI is in how well they work and how quickly and easy they can be implemented with out much JavaScript knowledge. It really is about time the web has decent standardised day pickers and JQuery brings that. I could never understand why ASP.Net did not have one built in as standard from the very beginning.

But it's not all roses around these parts. I came across an annoying little oversight when playing with the JQuery functions. I wanted to have a date picker and then a few sliders for users to input some data. Here's what it looked like:

Nice and neat... until the user clicks on the textbox to enter a start date, JQuery kicks in an pops up a calendar:

Notice the two slider buttons that are appearing on top of the calendar (circled in red). This is not what we want.

To fix this issue you will need to update your css file for the date picker with the following

.ui-datepicker { z-index:3!important; }

Maybe there is a good reason why this isn't set as the default but it just seems like a small oversight.