You probaly missed it, the link is at the top of the post. ]]>
I’ll publish it on scripteka right now. ]]>
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…..
]]>- it would be nice if the main timeline would scroll when dragging the interval all the way to the left/right - the scrolling speed could also depend on the distance between the mouse cursor and the edge of the timeline on an inverse ratio.
- the start date should be >= end date (error on ie7)
- if I drag the interval very fast and then release the mouse button, the blue zone and the orange markers become out-of-sync (ie7 and ff3b2). ]]>
Find it very useful.
]]>First of all, thanks for all the supportive comments! I’m really looking forward to extend the funtionality and fix some bugs of the slider bar, especially the ones above provided by otsdr (thanks!).
Keep up the good work,
Willem
]]>How is it possible to let it show more a detailed calendar, days etc?
Yes, would be nice in JQuery.
Keep going ]]>
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
]]>this.oStartField.setValue(l_oDate.toString(’M/d/yyyy’));
this.oEndField.setValue(l_oDate2.toString(’M/d/yyyy’));
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.
]]>There is an implementation using multiple date-pickers? (I guess the elements id’s should be dynamic). ]]>
Every time I try to pick a date, it jumps 1 day up or down when I stop dragging. ]]>
– 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.
]]>My email address is willem[.at.]ajaxorized.com
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!
]]>Care to share your implementation? I like how you solved most of the little issues mentioned in the comments.
Thanks in advance. ]]>
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
would be nice if something like this exist for time instead of dates
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!
]]>I fixed some thing with it, is there a way i can contact you? Couldn’t find any contact data on the page.
This is more or less the list of things i fixed:
Scaling the calendar so it’s wider.
Limiting the scrolling of the nain bar, so i won’t scroll into the bar(prevents displaying of white spaces).
Limit position of handles so it won’t move beyond the boundaries of the calendar.
Same for moving bar.
Limit values of dates so the won’t go below/above the other date, depending on what date you’re changing.
Regards. ]]>
Check out http://dateslider.googlecode.com for to checkout the latest version, request features, discuss, etc.
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…
]]>We’re working on it. You can do a SVN checkout at: ]]>
nice gadget…! Will there be (or is there) a possibility to switch the date-format to german? For example: 2008-01-10 (engl.) is written in Germany as 10.01.2008.
The start- and end-time of the chosen period is in the actual version not usable by non-english-speaking german users…
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
]]>I think you should dive into the code and look at the date formats and the reference of dateJS. Mail me at willem[::at::]ajaxorized[::dot::]com if you can’t get it done.
Willem
]]>Can you wright DateSlider with jquery based? ]]>