May 15

I’m sick of date pickers, date pickers where I have to click Next, Next, Next or Previous, Previous, Previous or some little arrow to find the month I want to pick. Even worse the date pickers that still rely on three HTML select box drop-down to choose the Day, Month & Year. And then, particularly on travel web-sites you typically want to select a from and to date range – don’t always give me two date pickers!

So, obviously I’ve been using a number of date pickers on different web-sites recently and I wouldn’t have this rant if I didn’t think there was a much better way to do it. There is and I’ve started a personal project “Calender Planner” which I hope to provide the ultimate JS/HTML date picker. What in my mind does the ultimate date picker have to do/provide?

  • Looks Good – Its got to look like a calendar, in its most simple but neat incarnation.
  • Performant – Its got to be smooth and load quickly. It can not impact on the project it is sitting within. JavaScript/CSS must have a small footprint and be quick to download.
  • Usable – Easy to understand and use for a novice user, providing a similar look and interaction handles to those of existing date pickers – but easy for advanced users to utilise the full feature-set.
  • Cross-browser support – Firefox, Internet Explorer, Opera, Safari, etc.
  • Flexible – the same requirements for different projects? – your joking! An array of functional and styling options need to be simple to configure.
  • Extensible – Projects need to be able to attach their own event handlers, animations and basically be able to interact with the date picker – not just show it and wait for the user to finish with it, maybe choose an invalid date range or none at all.
  • Quick to implement – It should be a simple matter of copying a directory of JS/CSS files, adding a refernce to these where you want to use them and adding the lightest possible snippet to your HTML DOM and leave the rest up to the date picker – a 5 minute implementation.

But those “requirements” alone don’t make for an ultimate date picker. Calender Planner more specifically will include the following set of wish-list features.

  • Infinite scrolling – most date pickers will display one month at a time, Calendar Planner will still be able to do this but is ideally set up to show more than one month on screen and make it easy for a user to find the date they want – just by scrolling up or down; and scrolling, and scrolling and scrolling – if need be. There would be nothing stopping you giving the user a calendar starting 100BC and ending in December 3030. The user would be able to scroll seamlessly between those start and end dates – no clicking next month, next month x-hundred times. All the while they scroll they’ll know where they are up to and can accurately stop on the month they want. Next/Previous buttons will still be optional to ensure usability is maintained where a user is used to using those buttons.
  • Flexible date range selection – X date to Y date, M week to P week (ala row selection), week-day to week-day (i.e column selection Tuesday to Thursday), block selection (i.e. a square/rectanglar range of dates), multi-select (ala hold your Ctrl-key down), mouse selection (duh), and keyboard selection (arrow key navigation and Shift-key range selection)
  • Liquid Sizing – a date picker that can display in any size; as a small combo/drop-down space or in full-screen! And without any intervention from the software/web-site it sits within. Provide your users the ability to stretch/resize the date picker container HTML DIV to any size or increase/decrease font size and Calendar Planner will maintain its visual consistency.
  • Multi-column – It’s useful to show more than a month, its also damned useful in cases to not just show these months vertically stacked. Specify if you want your date picker to show 3 x 3, 2 x 6 – any reasonable number of month rows and columns. Calendar Planner will automatically flow the visible range into your pre-specified columns OR by default Calendar Planner will choose the number of columns it know fits into the liquid size of your date picker space and do it all for you. If your date picker area is of a liquid size (i.e. full-screen or user-resizable) as you decrease the area size you’ll have less columns and vice-versa.
  • Internationalisation - Calendar Planner will know if a user expects the week to start on Sunday or Monday, and will show all messages in their local language. Or the implementer can choose if their Calendar Planner should only ever show in, for example Italian.
  • Multiple date pickers – providing not only a quick implementation, but also the ability to have more than one Calendar Planner per web-site page – without having to initialise the Calendar Planner code more than once – Calendar Planner will use the established technique of retreiving HTML DOM elements by className and knowing these were you want date pickers to appear. Suppose your date picker area is not part of the immediate HTML DOM, but maybe loaded into the HTML DOM by an Asyncronous AJAX call – Calendar Planner will find each instance and be ready and waiting for your users interaction.

Should it work without JavaScript and or CSS? At this point I’m sure I will annoy some people and say, no & yes. No it doesn’t need to work without JavaScript and yes it should work without CSS. So Calendar Planner is designed so that it will work on devices/web-browsers with CSS switched off. It’s not going to look like a pretty calendar, but the days and ranges selected will be laid out in such a way that they are usable. And wait, the JavaScript – well, this is a Web2.0 world and you really didn’t expect Calendar Planner to work without Javascript? But the fall-back will be documented, have your three; day, month & year select drop-downs coded into your page. If there’s no JavaScript these will act as your date picker.

The name “Calendar Planner” hopefully gives hint that there is more to the project than just a date picker, and largely the phrase Planner is applicable because with a date picker as flexible as this it should lead very well to being able to more easily plan date based activities – hence I see this project being very useful for web-sites such as those providing travel and flight bookings (largely the type of web-site I have recently been using and have been frustrated by their date picker functionality).

Watch this blog.