I’m still missing a button to get back if you’ve scrolled the selected periode out of sight.

Secondly, it would be very nice to use it for hours and minutes, too, but this would probably require a popup for it because of the greater dimension…..

Find it very useful.

Keep up the good work,

Willem

One comment from a colleague that I showed the widget to, “it was a strange disconnect to grab the bar and move it while having to look down at the box that indicated what the actual date was. I kept missing the bar and then attempting to move the mouse and wondering why the date was not changing.”

I would suggest having floating date boxes that follow the mouse, so that the date target is always right where you’re looking. I mocked this up (static mockup) here: http://aos.elicochran.com/date-slider-e.png.

In playing I spotted one little thing needing tweaking.

Leapyear logic is needed, since 2008 is a leapyear.
In a thumbnail, the leap year rule is:
Test if the 4 digit Year is divisable:
by 4: yes, (but two more rules are needed)
by 100: no,
by 400: yes

If one sets a several month span with the blue band,
having, for example 10/1/2007 start, and 1/31/2008 end,
and then grabs the resulting spanned bar and moves it about,
you will see that end point date of February 28 is shown,
instead of 29th, as last date in February.

Regards,
pckabeer

and lines 142&143 should be:
p_oStartField.setValue(this.oStartDate.toString(’M/d/yyyy’));
p_oEndField.setValue(this.oEndDate.toString(’M/d/yyyy’));

http://code.google.com/p/datejs/wiki/FormatSpecifiers

As alain described, change line 115, 116, 142 and 143 to do so.

To cover more js-libs, I will also try to port the script to jQuery.

There’s a typo on line 6 of the HTML example above: it has ‘typde’ instead of ‘type’ in the input element.

– Since I’m not javascript fluent, is there a way I can auto restrict the selector to full month spans only? (The handles would readjust to start and end of choosen months).

I’m working on a project where, in some cases, only the month counts. I’d like users to get a clean visual feedback.

Cheers,

This script is great and it came at a perfect time whiling I was trying to implement a date range. Is it possible to space out the days so that easier to select say 3-5 days at a time?

Also, would it be possible to support an infinite timeline?

Have a look at www.real-buddy.com and click on “visit the blog”.

Thank you for this great script!

Wasn’t aware I did solve any problems mentioned here in the comments.
I mainly change two things in the script on the real-buddy.com site:

1.) I wanted the right handle always to be visible.
So I positioned the slidebar 60px away from the right container border.

To achieve this I added at line 87:

$(’sliderbar’).setStyle({left: -this.iLeftOffsetRH+$(’slider-container’).getWidth()-60+’px’});

2.) I wanted to update the blog entries on the fly with ajax.
I added “new Ajax.Updater()” on the “onEnd” event function of the draggables:

new Draggable(l_oLeftHandle, {constraint:’horizontal’, onDrag: sliderReference._leftDrag, onEnd: function() {
sliderReference._leftDrag;
new Ajax.Updater(’post-list’, sliderReference.baseuri, {asynchronous:true, evalScripts:true, parameters:’datestart=’+l_oDate.toString(’yyyy-M-d’)+’&dateend=’+l_oDate2.toString(’yyyy-M-d’)});
}
});

This is all I have changed. Feel free to e-mail me if you have any further questions.

Regards,
Frank

I am looking for a script that lets me select period of time for a employee roster/agenda/calender. a bit like ical/outlook
or like a bar as the one above but then for time

But I have to persuade other team members first. They raised similar concerns as ‘otsdr’ mentioned above:

1. the start date should be >= end date (error on ff-2.0.0.14 too).
2. it would be nice if the main timeline would scroll when dragging the interval all the way to the left/right.

Willem, would you please provide some status update? I see your last comment here was two months ago :~ Thanks and appreciate!

Willem

Due to the development of Qash.nl, a Dutch personal finance website full of cool javascript features, it’s somewhat quiet around here. But to keep you satisfied, we present the sliding date-picker. This element enables you to pick dates with a simple…

http://code.google.com/p/dateslider/source/checkout

Additional it would be the cherry on the cake to implement the library and functionality of the datejs.com date-input field (like shown on the first page of datejs.com), so that you could type in every (crappy) description of the date you mean.

Thanks for that great tool!

Manuel from Germany

Willem