Friday, August 31st, 2007

DatePicker using Prototype and Scriptaculous

Category: Component, Prototype, Scriptaculous

<>p>Until we get <input type="date" /> into the browsers, we will need to create data pickers.

DatePicker is a simple one that users Prototype and Script.aculo.us, and does the basics well (although the fade can be a touch annoying to me).

It is very simple to use too:

  1. <script type="text/javascript" src="/prototype.js"></script>
  2. <script type="text/javascript" src="/scriptaculous.js"></script>
  3. <script type="text/javascript" src="/datepicker.js"></script>
  4. <style type="text/css">
  5. @import("/css/datepicker.css");
  6. </style>
  7. <form>
  8.   <input type="text" id="date-from" name="date-from" />
  9. </form>
  10. <script type="text/javascript">
  11.      var dpck   = new DatePicker({
  12.       relative  : 'date-from',
  13.       language  : 'en'
  14.       });
  15. </script>

Of course, you could easily wrap this in a microformat so you can just do class=”date”.

Prototype Date Picker

Related Content:

  • Ajax everywhere: Which framework to choose?
    Writing and debugging Ajax, a JavaScript- and XML-driven development technique, can be difficult. In this tip, an expert introduces several frameworks...
  • Ajax everywhere: Which framework to choose?
    Writing and debugging Ajax, a JavaScript- and XML-driven development technique, can be difficult. In this tip, an expert introduces several frameworks...
  • Choosing an Ajax framework
    Your customers won't have to fear Ajax if they have the right tools to work with. Help them determine which Ajax-specific framework, library or...

Posted by Dion Almaer at 8:47 am
27 Comments

++++-
4.2 rating from 147 votes

27 Comments »

Comments feed TrackBack URI

totally keyboard inaccessible
but at least it fades in

Comment by Lon — August 31, 2007

Not only is this the 1000th datepicker out there, it’s also rather user-unfriendly because of the slow and redundant fade-in and the fact that the arrows used for browsing the months are not statically positioned.

Comment by Aron — August 31, 2007

It degrades OK, in that you don’t need the mouse to enter a date, but the only way the calendar shows up is by clicking on the text field. A tab in doesn’t do much good.

There’s also no validity checking taking place on the input field. It’s a nice start, but it’s not really all the way there yet.

Comment by don hosek — August 31, 2007

…and does the basics well…

If you want to pick a date, you can pick one. Effects can be modified easily in the source and keep in mind this is a 0.x release.

Comment by iBram — August 31, 2007

Now if they only used 1.6 it would be ~15KB instead of 21. Other than that , it’s not bad at all…

Comment by kangax — August 31, 2007

Woohoo! A slow fade in on a date picker that pays no attention to accessibility and will totally confuse the average user who looks at a text field and expects to type in text.

I appreciate the effort put into building that thing, but it’s about as practical as a helmet made of live bees.

Comment by GregoryD — August 31, 2007

My only real complain was about the moving arrows, that prevent an easy browsing through months. A question to the critics: could you post a link to a better date picker using Prototype and Scriptacolous? I’m interested because I’m working at a couple of RoR projects and this date picker could come handy. But if there is really something better I’d be happy to… pick it up!

Comment by Paolo Montrasio — August 31, 2007

http://www.pradosoft.com/demos/quickstart/?page=Controls.Samples.TDatePicker.Home

Comment by jdalton — August 31, 2007

@GregoryD: To sum up and support your argument:
bloated fx : datepicker :: live bee helmet : Claiming territories for South Korea

Comment by Charles — August 31, 2007

@jdalton: Thank you for that link! I’ve been hunting for a good php component framework to port our (currently asp.net based) widget system to… the PRADO model is perfect.

Comment by Ryan Gahl — August 31, 2007

@Ryan Gahl – No problem, I use Prado all the time. Its great and has many widgets. It has Prototype+Scriptaculous baked in, and JavaScript packaging /compression/caching/gzipping. Its modeled heavily after ASP.NET so it has MVC style, ViewStates and TComponents, ActiveRecords and things… If you have any questions or problems with it, their forums are great.

Comment by jdalton — August 31, 2007

http://www.frequency-decoder.com/demo/date-picker-v2/

I use this one in my projects. Full keyboard support, extremely customisable, and framework independent.

Another really handy feature is the ability to limit date selection, so for example I can prevent people from selecting weekend dates (handy for financial applications), or from selecting dates in the past/future, and so on.

Comment by Ben — August 31, 2007

I Use date Picker, which comes with webwork.

Comment by Anonymous — September 1, 2007

the biggest problem with the datepicker presented here is that you cant change the date’s format

Comment by kyriakos — September 1, 2007

Since everyone is putting in their 2c about their favourite calendar… the dynarch calendar has been around for years, is free and open-source, and IMHO still the best.
http://www.dynarch.com/projects/calendar/

Comment by KenKo — September 1, 2007

I like the ExtJS one best. It’s as simple as a good date picker could possibly be, but no simpler. And it looks purdy.

Comment by Joeri — September 3, 2007

Hi all,
I’m the author of this little widget.
I’m well aware it’s not the best or complete stuff around as it was my first shot at working with Prototype & Scriptaculous. When I needed a simple datepicker I didn’t found one that matched my needs so I did one that fullfilled them and released it so that others could have a peek at it.
I gladly welcome any patch, submissions and comments to make it more useful, more standard-compliant, more accessible, cleaner, etc …

Regards,
Mathieu

Comment by Mathieu — September 3, 2007

Hi, mathieu, don’t take the negative comments here too seriously. You did a pretty good job on the date picker. I would just suggest that the fade-in was a little faster (quicker than the time it takes to move the mouse on top of it), and to make it so the next and previous month buttons don’t move around when you switch months. Also, having a visual way (dropdown?) to switch years would be convenient.

Comment by Joeri — September 3, 2007

vow, thanks for this it took me a while to find a great looking picker but well worth it. i ll blog abou it :D

Comment by andrea — September 3, 2007

Where is the jQuery love?
http://marcgrabanski.com/code/jquery-calendar

Comment by Marc — September 6, 2007

I found this little script to be pretty nice.

A simple modification was needed to change the fade in and fade out to be much quicker, and I’ve never used the prototype or scriptaculous frameworks before and I figured it out.

I’ve decided to use this, after playing around with quite a few freebies out there today. I wanted one that used prototype and scriptaculous anyway, because I’ve been wanting to learn more about the frameworks.

The only thing I haven’t fixed yet is the hover CSS isn’t working in IE6. I’m not sure what it will take yet to fix that.

The comment about wrapping this in a microformat intruiges me. I’ve only heard about microformats, never used them

So much to learn, so little time.

Comment by Trevor — September 11, 2007

Is there a way to initilize a date which is NOT today?
Also, could the first day of the week be changed? i.e. week start on saturday etc.

Comment by bizroof — May 26, 2008

broken link to DatePicker? I searched aruond and couldn’t find it :(

Comment by payacer — October 15, 2008

Since the original home for this code seems to be dead, I just opened up a project at Google Code for maintenance of this widget.
http://code.google.com/p/prototype-datepicker-widget/
Let me know if you want to help work on it.

Comment by tigretigre — March 19, 2009

Come see version 1.0.0, with customizable and combinable <a href=”http://code.google.com/p/prototype-datepicker-widget/wiki/DatePickerFilter”date filters! Don’t like weekends? Wanna allow only dates > 1.5 days in the future? Or both? It’s just begging for an AJAX integration with a Web service that lists holidays. Anybody know of one?

Comment by tigretigre — March 30, 2009

Sorry, that link got butchered:
http://code.google.com/p/prototype-datepicker-widget/wiki/DatePickerFilter

Comment by tigretigre — March 30, 2009

http://datepicker.org.ru/

Comment by holdenru — November 30, 2010

Leave a comment

You must be logged in to post a comment.