Date Slider

DateSlider

Dateslider home

Documentation







<head>
<link href="css/dateslider.css" rel="stylesheet" type="text/css">

<style type="text/css">
label {
	width: 150px;
}
input {
	border: 1px solid #000;
	font-size: .7em;
}
</style>
</head>

<body>
<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 type = "text" id = "dateend">
</form>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,dragdrop"></script>

<script type="text/javascript" src="js/date-en-US.js"></script>
<script type="text/javascript" src="js/dateslider.js"></script>

<script type="text/javascript">	

l_oOptions = {
	dragHandles:true,
	dayWidth: 1,
	dateFormat : 'MMMM d, yyyy'
}

p_oDateSlider = new DateSlider('sliderbar', '2009-Feb-01', '2009-May-31', 2008, 2010, l_oOptions);	
p_oDateSlider.attachFields($('datestart'), $('dateend'));


</script>
</body>

October 2010 option settings


/* Dateslider options */
l_oOptions = {
	dragHandles:true,
	dayWidth: 1,
	dateFormat : 'MM-d-yyyy',
	zoom : true,
	centerDate : '2008-May-01'
}

/* Create the dateslider */
p_oDateSlider = new DateSlider('sliderbar', '2008-Apr-01', '2008-Jun-30', 2006, 2010, l_oOptions);