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.

Demo: http://www.ajaxorized.com/dateslider/slider.html
Download: http://ajaxorized.com/introducing-the-sliding-date-picker/
Source: http://www.ajaxorized.com/dateslider/dateslider.zip

Related Listings:

1. jQuery Date Picker Script This is an clean, unobtrusive plugin for jQuery which allows...

Do you like this post?

Email: