jQuery datepicker with no Textbox

I just finished a simple page that uses jQuery.datepicker() to create a calendar dropdown to select a date. The datepicker widget normally uses either a DIV or an INPUT of type TEXT. I was happy to discover this isn’t a requirement.

I was building a replacement calendar for our CSRs who frequently have to jump between weeks, days, customers and work orders in order to add comments as customers call in.

I wanted an in-line calendar selection and decided on the jQuery datepicker as the UI of choice. As always, I’m using ASP.NET MVC as the backend and view engine.

The code is at the end of this post with a sample of the widget in action without a visible input textbox.

From how it was to how it is

The old interface was written over 8 years ago and served its purpose when the company had only a couple of installers. Now, with about 10 full-time staff working on installations and service calls, the user story has changed significantly.

Because the old calendar rendered the entire month at a time it got quite cumbersome to use towards the end of the month when you had to scroll to the bottom. This was especially true because each appointment for each installer was ‘stacked’ inside the day on the calendar.

Though the installers are color-coded to make it easier to find them, with ten guys in the mix it was still a chore to work out where someone was at any given time in the day…and we have a coverage area of nearly 130,000 sq Km.

In the colorful image to the right, you’ll see just over one week’s view of the calendar. I needed 2400px of vertical resolution to capture that image. Most users here have 1600x900 monitors, so you can imagine in the forth week of the month what it’s like. Imagine trying to scroll to the bottom of the calendar when you’re at the end of the month as many as 80 times a day!

Anyways, I decided to move to a day-based view, defaulting to today’s date, but with tabs to display the whole week. I also elected to add in-line comments that tie into the legacy system (so users don’t have to navigate 5-7 clicks away to add comments).

Here’s a shot of the new interface:

The appointments are now only rendered for the current day by default. Clicking on the tabs allows you to navigate to other days (or the week summary) and << >> navigation arrows allow moving between weeks. I’m using jQuery tabs for the interface here.

The calendar icon is clicked to display the datepicker.

The Code

It’s quite easy to make this all jive without the textbox. Simply alter your input to be of type hidden (mine’s also rendered as a link in a tab):

Next, we setup the datepicker by using a jQuery selector for the hidden input:

There are only a couple of interesting things here:

• showOn, buttonImage and buttonImageOnly are used inside the datepicker() call options to render the icon without also injecting a button control
• onClose is used to pass the result to a controller action (I’ve used GET for this sample to keep things simple)

Positioning

The only thing I’m not happy with at this point is the positioning of the dropdown calendar, as its top-left corner starts from the top-left of the icon.

I suspect that the new positioning support in jQuery UI 1.8 will help to straighten some of that out. For now I’ll live with it.

Final thoughts

All told it’s very simple to use the datepicker with the textbox. I’m finding more and more ways to simplify the UI with jQuery and ASP.NET MVC.

It’s certainly more fun to develop software when you feel like you’re running instead of crawling.