Wednesday, October 08, 2008

The coolest prototype calendar ever

Roberto has been doing amazing things with calendars these days. With current loom trunk, this java attribute:


@Temporal(TemporalType.TIMESTAMP)
@DateValidation(minValue="today + 1d", maxValue="today + 1y")
private Date start;


With this javascript code:

// create calendar
$$('input.date, input.dateTime').each( loom.ui.createCalendar, {});


Renders this absolute piece of awesomeness:


  • Dates before today and after one year (from today) are disabled, as specified by @DateValidation. As always, the server side will use the same constraints.

  • The use of @Temporal (the standard JPA annotation) triggers the interface to ask for date and time. The default would only ask for a date.

  • It uses the same attributes (min, max) and format (ISO-8601) specified by the HTML 5 draft, which should help replacing it when browser support arrives by 2025 :)

  • Full implementation of the PHP strftime format.


Other use cases may be tested here, as the javascript library can be used standalone without loom.

MY PRECIOUSSSSSSSSS...

UPDATE: The calendar has been included in the 1.0 release. Just download the jar file, uncompress, and look inside the js folder.
UPDATE 2: As of loom 1.1 we have added a loom-javascript.zip file which includes just the javascript and css files. To use it, just take a look at the included html test files. They are not pretty, but should indicate a clear way to use the components.

8 comments:

Donny said...

This is the greatest date picker I ever see. Will there be any other cool widgets for loom besides this datepicker?

Ignacio Coloma said...

There are others, such as the tree widget:

http://loom.sourceforge.net/jstests/addons/test/js/tree-test.html

But right now we are focusing our efforts on the server side, were there are a couple of big tasks to be finished before releasing 1.0 final :)

Anonymous said...

404...

Nacho Coloma said...

Fixed. The test pages had been relocated :(

Anonymous said...

Is there a way to implement this gem of a calendar within non-Java-backed sites ? As in a solely Prototype-JavaScript-CSS solution ?

Zamolxesz (also commented above :) ) said...

Switched to jQuery and implemented a Date Picker (built-in) and a Time Picker (the only nice, skinnable one). Would have implemented the Loom way, yet pondering again now I guess it is only for JSP and other non-Ruby ways :) Wouldn't hurt to release a standalone version, there's quite a shortage of Date AND Time Pickers out there. All the best !

Nacho Coloma said...

Actually, the code does not have any requirement of a java-based server, as it can be used as a standalone javascript component.

That being said, I have been wondering for a while how to release these components both for the java and ruby folks. It's not only this datepicker, but our prototype-based Growl implementation and a _really_ complete date parsing library.

Right now I am in a deadline rush, but I am adding this to the JIRA to deliver our javascript libraries in a suitable format for the non-Java folks. I'm afraid I cannot set any deadlines yet, though :(

Nacho Coloma said...

Done. A new javascript-only module has been added starting with Loom 1.1. Enjoy!

Post a Comment