This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Saturday, January 24, 2009

Beautiful datepickers and calendars for web developers

Datepickers and calendars are elements you need often to implement in web applications with some advanced features. Starting from zero can be a very hard work, expecially if you don't have big familiarity with Javascript.

This list include some of my preferred simple to implement and customize datepickers and calendars, for beginner and professional web developers. I suggest you to try in order to simplify your developing process and save a lot of time reusing code already written. The result is really amazing!

1. jQuery datepicker
This is a default datepicker implemented using jQuery UI which is tied to a standard form input. The calendar opens in a small overlay onFocus and closes automatically onBlur if a date if selected. You can also use the keyboard to drive the datepicker:

- page up/down - previous/next month
- ctrl+page up/down - previous/next year
- ctrl+home - current month or open when closed
- ctrl+left/right - previous/next day
- ctrl+up/down - previous/next week
- enter - accept the selected date
- ctrl+end - close and erase the date
- escape - close the datepicker without selection


2. jQuery Date Picker plugin
This is an other interesting jquery datepicker with a lot of options and easy to fit in your web application.



- Flat mode - as element in page
- Multiple calendars in the component
- Allows single, multiple or range selection
- Mark dates as special, weekends, special days
- Easy to customize the look by changing CSS
- Localiation for months' and days' names
- Custom day to start the week
- Fits into the viewport

3. Calendar MooTools
Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers implemented and completely re-written for Mootools.



This class include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Take a look about how Calendar might enhance the accessibility, usability and validation of form elements on your website.


4. YUI Calendar
YUI Calendar uses Yahoo! UI library to implement a default calendar you can use as datepicker. It's very simple to implement, highly customizable and the final result is clean and elegant.
This basic example walks you through the steps needed to get a default Calendar up and running. It covers the set of file dependencies which need to be included as well as the basic markup and JS code required to get you started.


5. Unobtrusive Date-Picker Widget
This elegant datePicker is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml. Take a look here for the demo.

A quick feature list:

- Fully keyboard accessible
- Multiple date formats and date dividers supported
- Unobtrusive and nameSpace friendly
- Fully skinnable with CSS
- Both upper and lower date limits can be set
- Certain days of the week can be disabled
- Certain, dates can be disabled/enabled (and wildcards used to stipulate the dates in question)
- Includes “smart” localisation (16 languages currently available)
- Bespoke days of the week can be highlighted
- Works with single text inputs, split text inputs or select lists
- It’s free to use, even commercially (Released under a CC share-alike license)


6. Scal
Scal is a simple, javascript calendar/date picker based on the Prototype js library, simple to implement and to customize using default themes or creating custom themes changing CSS some lines of CSS code.

7. Ext JS Extension:Calendar
Ext JS Extension:Calendar is a daily, weekly, monthly, quarterly, yearly calendar extension which you can use to implement very complex applications Google Calendar or Outlook Calendar like.


8. jPint
jPint is a set of libraries designed by Journyx to allow developers to build web-based applications that look and feel as much like native iPhone apps as possible, while retaining the ability for those apps to be used by people who, for whatever reason, don't actually have an iPhone handy. Take a look at this nice iPhone like calendar.

blog comments powered by Disqus
JesusFreak said...

Nice One..Wonder where you get all this from..Well, i commend your creativity and innovation.

Mark said...

Nice collection! thanks

DKumar M. said...

I simple in love with jQuery !! Thanks for showing me some more options.

koomedi said...

thank you so much

Designer said...

thanks for sharing the list

Anonymous said...

@JesusFreak : OMG - he used Google ?

quintessens said...

what about Dojo?

Rahul said...

Thanks for this cool collection of date pickers.

Greg said...

i like no. 5 at most of all (it doesn't need any other js-framwork - and it looks best)

gret post : )

Rodrigo Teixeira said...

Great tips!!

www.MonjurulHoque.com said...

thanks for a nice post...

Kate said...

Thank you for the post! One more javascript calendar to extend your list - dhtmlxCalendar.

Calendars said...

Those are all great options

Anonymous said...

very nice
www.csshook.com

SEO Expert India said...

Its good services i have also provide this type of services so pls visit my website and give me your reply http://www.lipsigprice.com

Ralph said...

A nice list about calendars for websites, creative and simple. Ralph

SEO LA said...

having your blog as an update reference,. keeps my job much easier, thanks, keep it up....

ann torres

koowii said...

Nice blog tools. Can I use them and change their color according to my taste? I would be very delighted to have them able to change color and will surely implement them on my blog.

project timesheet said...

love the jpint thing. iphone dev w/out the iphone toolkit from apple

cyberfly said...

hi anthony.do you know how to change the date format from m/d/y to d-m-y without using the select box.i use jQueryUi date picker.

i want to set the d-m-y as default,so user dont need to select the format.

deep said...

Appreciate d resources ..
they r awesome !!

Rodney said...

Hi,

Thanks for the list. I am trying to find a nice DatePicker for the mobile (iphone-mainly) version of my Poker League App. Do you have any ideas which frameworks from the above will work best on the mobile safari browser, if not all of them?

Thanks
Rodney Joyec
PokerDIY.com

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News