Saturday, January 01, 2011

Web: Year & Month selector

Three weekends back I started my weekend project ExpenseBook to track my personal expenses and was looking for jQuery plugin to select date for expense entries. Almost all of my google search ended up in calendar style plugins which are very common and I was not able to convince my self to use them. So I decided to design and code myself. Since I had lot of space to fit this piece, I came up with this design.



What I liked about this design is:

  1. jumping between months is much quicker: single click or single tap on my iPhone (unless I don't want to change year)
  2. entering day of month is much quicker by typing on keyboard than clicking and selecting.
  3. it fits nicely in overall page design.

Below is html, css and jQuery code to make this working. (Note: Years and months in html are hard coded for this post. In real application, they are auto generated.)

No comments:

Post a Comment