Introducing: The sliding date-picker
January 21, 2008Update (July 13): Please mind that there is a follow-up post
Update (May 17): I am planning to move this project to Google Code. I received some nice improvements, so it would be good to form a team and develop this project further to fix all the bugs that are still out there. Contact me at willem [:at:] ajaxorized
Update (May 10): Thank you all for your support. Currently I am improving the dateslider, check the newer (warning, not fully tested and stable) version here . I've fixed the problem of startdate > enddate and working on some other functionalities. Thanks again, you guys keep me going (:
You came for the demo right? It's here.
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 slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates. As you are used to from us, the script is based on Prototype/Scriptaculous, but now combined with the very sexy DateJs library.
Implemeting is easy. First, include de javascript libraries:
<script type="text/javascript" src="js/prototype.js" ></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder,dragdrop" ></script>
<script type="text/javascript" src="js/date-en-US.js" ></script>
<script type="text/javascript" src="js/dateslider.js" ></script>
Then, include the stylesheet:
<link rel="stylesheet" href="css/dateslider.css" type = "text/css" />
Then copypaste this to your HTML:
<div id = "slider-container">
<div id = "sliderbar"></div>
</div><br />
<form>
<label for = "datestart">Start:</label> <input type = "text" id = "datestart">
<label for = "dateend">End:</label> <input typde = "text" id = "dateend">
</form>
Finally, create the dateslider object. The parameters are [dragbar_id],[date_bar_start],[date_bar_end],[year_start],[year_end]
p_oDateSlider = new DateSlider('sliderbar', '2007-10-01', '2008-10-01', 2001, 2009);
p_oDateSlider.attachFields($('datestart'), $('dateend'));
Thats it! I've tested it in Firefox 2.x, and IE6/7, please notify me when your browser isn't supported. You can download the full package, including prototype 1.6 and scriptaculous 1.8, here, it's under the GPL license.
Enjoy!
Add to:
very good idea, i like it for various reasons. in my opinion it’s a very convenient way of entering date ranges. thanks for sharing!
Comment by harald — January 21, 2008 @ 2:51 pm
[…] The sliding date-picker […]
Pingback by CSSgallery.info » Javascript calendars - date pickers — January 21, 2008 @ 3:59 pm
A demo page would be very nice to have.
Comment by kangax — January 21, 2008 @ 4:17 pm
Hi Kangax,
You probaly missed it, the link is at the top of the post.
Comment by Willem — January 21, 2008 @ 4:19 pm
Oh, great!
I’ll publish it on scripteka right now.
Comment by kangax — January 21, 2008 @ 6:08 pm
[…] Check it out. […]
Pingback by Datejs - A JavaScript Date Library » Ajaxorized sliding date-picker — January 22, 2008 @ 1:18 pm
Looks nice, but it would be nice if it would scroll along if you drag passed the borders of the control..
Comment by Mathieu Kooiman — January 23, 2008 @ 2:13 pm
Great widget.
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…..
Comment by Albert Kühner — January 23, 2008 @ 2:41 pm
An original approach :). A few remarks:
- 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).
Comment by otsdr — January 23, 2008 @ 2:42 pm
Nice work! I also like the possibility to change the date interval by sliding the bars on the upper left and upper right corners.
Comment by Stan — January 23, 2008 @ 3:52 pm
[…] Ajaxorized » The sliding date-picker « 907 […]
Pingback by Ajaxorized » Introducing: The sliding date-picker -- TrickJarrett.com — January 23, 2008 @ 4:29 pm
This reminds me of the MIT Simile timeline library, but easier to use and much more limited in scope. Was this an influence?
Comment by Erik — January 23, 2008 @ 5:28 pm
Nice and clean implementation, billster.net has been running this type of slider for well over a year now: http://demo.billster.net/finance/bills/
Find it very useful.
Comment by T — January 23, 2008 @ 5:53 pm
Wicked! Something like that needs to get implemented into a weblog theme right away.
Comment by Stijn — January 23, 2008 @ 6:41 pm
Any thoughts on a timeline for selecting times? It doesn’t look like it’d take a whole lot to make that change. Are you going to be putting this on google code or anything?
Comment by rick — January 23, 2008 @ 7:01 pm
Works beautifully in Safari 3.
Comment by neeks — January 23, 2008 @ 7:52 pm
Hi all,
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
Comment by Willem — January 24, 2008 @ 1:03 am
Great job. Can i translate this to jquery?
Comment by Paulo — January 24, 2008 @ 1:07 am
Great idea, really usable.
How is it possible to let it show more a detailed calendar, days etc?
Yes, would be nice in JQuery.
Keep going
Comment by Martin Sarsini — January 24, 2008 @ 4:17 pm
Very nice. It’s great to see someone thinking about temporal data linearly instead of in a grid.
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.
Comment by Eli Cochran — January 24, 2008 @ 8:01 pm
Hi, nice idea. Have you ever thought about taking a regular calendar layout and making it possible to select a string of days by either holding down shift+click or clicking on the first date and dragging so that a series of dates could be highlighted? Then the input fields would read the first and last date as the start and end. You would need some way of crossing from one month to the next of course.
Comment by Simon — January 24, 2008 @ 9:11 pm
It’s really a great item.
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.
Comment by Zoran The Blaster of Code — January 25, 2008 @ 1:07 am
Hi,great idea buddy.This will help in a lot in span calculation.Thanks a lot .
Regards,
pckabeer
Comment by pckabeer — January 25, 2008 @ 9:12 am
How can a Js-library be sexy? You nerds.
Comment by Andrew — January 25, 2008 @ 12:09 pm
Very sexy piece of js code indeed. One thing that I noticed is that when resizing the bar, the date I stop in is never the date selected, it’s always date(-/+)1day so it might get annoying as the user should anticipate and stop one day ahead or before the desired date.
Comment by alain — January 28, 2008 @ 4:50 pm
Is there a way to change the display date in input fields to mm/dd/yyyy format? Very nice script!
Comment by Richard — January 28, 2008 @ 8:33 pm
Richard: Yes, check in the dateslider.js file, lines 115, 116 should be
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’));
Comment by alain — January 29, 2008 @ 3:02 am
According tot the date formatting, you can format the date in your own taste by using the formatspecifiers from datejs:
http://code.google.com/p/datejs/wiki/FormatSpecifiers
As alain described, change line 115, 116, 142 and 143 to do so.
Comment by Willem — January 29, 2008 @ 10:33 am
@Eli Cochran, I really like your mockup. I will try to use this when improving the script. Thanks for your great support.
To cover more js-libs, I will also try to port the script to jQuery.
Comment by Willem — January 29, 2008 @ 10:41 am
This is genius.
There’s a typo on line 6 of the HTML example above: it has ‘typde’ instead of ‘type’ in the input element.
Comment by Kyle — January 31, 2008 @ 4:04 am
Hi, congratulations for your work.
There is an implementation using multiple date-pickers? (I guess the elements id’s should be dynamic).
Comment by Ralph — January 31, 2008 @ 3:23 pm
(ff 2.0.0.11)
Every time I try to pick a date, it jumps 1 day up or down when I stop dragging.
Comment by achim — February 2, 2008 @ 11:37 am
Gorgeous!
– 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.
Comment by Hugues — February 2, 2008 @ 12:23 pm
Hello, where’s the contact link? where on the earth can someone contact you?
Comment by Michael — February 7, 2008 @ 2:38 pm
Hi Michael,
My email address is willem[.at.]ajaxorized.com
Cheers,
Comment by Willem — February 7, 2008 @ 2:49 pm
Hi -
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?
Comment by Craig — February 10, 2008 @ 2:27 am
Wow, this looks really nice. I would love to see a jQuery version of this.
Also, would it be possible to support an infinite timeline?
Comment by Jason Davies — February 12, 2008 @ 2:10 am
[…] 3.- Slider Date Picker […]
Pingback by 5 notas rapidas sobre recursos | frogx.three — February 12, 2008 @ 5:11 am
[…] sliding date-picker可以让您在一个简单的滑块栏中挑选日期。你可以拖移滑动栏中的时间线，日期即可瞬间变更。另外，当用户决定要手动更改日期时，滑动栏会自动调整到相应的日期位置。 滑动日期机是基于Prototype/Scriptaculous创建，结合了之前介绍的一个日期库Datejs。它已经通过过测试，兼容Firefox 2.x+和IE6+，基于GPL许可发布。效果很酷。 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 slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates. As you are used to from us, the script is based on Prototype/Scriptaculous, but now combined with the very sexy DateJs library. Thats it! I’ve tested it in Firefox 2.x, and IE6/7, please notify me when your browser isn’t supported. You can download the full package, including prototype 1.6 and scriptaculous 1.8, here, it’s under the GPL license. […]
Pingback by sliding date-picker:滑动效果的日期挑选器 | 帕兰映像 — February 13, 2008 @ 8:54 pm
[…] The sliding date-picker […]
Pingback by Javascript Datetime Picker Collections | ExD Sandbox — February 17, 2008 @ 11:45 am
[…] The sliding data picker : طريقة جديدة لاختيار التاريخ بتحديد الفترة الزمنية بواسطة سحاب منزلق ؟؟!!!المثال هنا . […]
Pingback by مدونة الدكتور نت » أرشيف المدونة » مواقع ووصلات (فبراير -2008) — February 22, 2008 @ 2:54 am
I would like to show how I have used the dateslider with a blog.
Have a look at www.real-buddy.com and click on “visit the blog”.
Thank you for this great script!
Comment by f.wenzl — February 27, 2008 @ 2:44 am
Hey wenzl,
Care to share your implementation? I like how you solved most of the little issues mentioned in the comments.
Thanks in advance.
Comment by alain — February 27, 2008 @ 5:07 pm
@alain
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
Comment by f.wenzl — March 3, 2008 @ 11:03 pm
Nice tool indeed
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
Comment by Dimmy — April 3, 2008 @ 10:18 am
Lovely to see such a wonderful site. Thank you
Comment by online casino gamble — April 21, 2008 @ 11:24 pm
I see we share a common interest! Excellent job on the website!
Comment by bonus casino — April 22, 2008 @ 6:52 pm
Really cool! I like it very much and try to use it in my current project.
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!
Comment by ef — April 23, 2008 @ 3:14 am
Hi, pretty neat piece of javaScript you have here.
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.
Comment by Erico — May 16, 2008 @ 11:28 pm
Hi all,
Check out http://dateslider.googlecode.com for to checkout the latest version, request features, discuss, etc.
Willem
Comment by Willem — May 26, 2008 @ 11:10 am
The sliding date-picker…
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…
Trackback by Bookmarks.WittySparks.com — May 27, 2008 @ 4:37 pm
[…] Sliding date-picker […]
Pingback by 几个超酷日期选择脚本 - Allenle.cn — June 1, 2008 @ 12:56 pm
Very nice javascript example, a little similar to google analytics date range picker, i’ll defenately try it out
Comment by Digital Base — June 4, 2008 @ 1:08 pm
Hey erico, care to share your code?
Comment by alain — June 5, 2008 @ 12:43 am
@ alain:
We’re working on it. You can do a SVN checkout at:
http://code.google.com/p/dateslider/source/checkout
Comment by Willem — June 5, 2008 @ 9:53 am
[…] in browsers, and these tests can be saved and shared by the community. 演示 下载 30) The Sliding date-picker- GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and […]
Pingback by StarryNight » Blog Archive » 最新ajax特效30则 — June 12, 2008 @ 3:30 am
Hi there,
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
Comment by mcbue — June 19, 2008 @ 2:16 pm
Hi Manuel,
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
Comment by Willem — June 19, 2008 @ 4:41 pm
Hi,
Can you wright DateSlider with jquery based?
Comment by Amirreza — July 26, 2008 @ 4:30 pm
This does not seem to work correctly on IE 6. The purple dragbar is not visible. Any idea how to fix it?
Comment by Marian — August 20, 2008 @ 4:14 pm
[…] The sliding Date-Picker 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 slider bar. By dragging the bar over the time-line, the dates change instantly. […]
Pingback by 60 More AJAX- and Javascript Solutions For Professional Coding « Where LOVE begins — September 30, 2008 @ 5:54 pm
[…] The sliding Date-Picker 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 slider bar. By dragging the bar over the time-line, the dates change instantly. […]
Pingback by 60+ Ajax & Javascript For Professional Coders | Tech User, Blogger and Designers References — October 21, 2008 @ 1:34 pm