datepicker cleanup while making it's documentation

Author: Tero Piirainen

src/form/form.datepicker.js

@@ -26,7 +26,7 @@
 			max: 100,
 			step: 0, 	// Specifies the value granularity of the element's value (onSlide callbacks)
 			value: 0,			
-			decimals: 2,
+			accuracy: 2,
 			vertical: false,
 			keyboard: true,
 
@@ -46,8 +46,8 @@
 		return Math.round(value / step) * step;		
 	}
 
-	function round(value, decimals) {
-		var n = Math.pow(10, decimals);
+	function round(value, accuracy) {
+		var n = Math.pow(10, accuracy);
 		return Math.round(value * n) / n;
 	}
 
@@ -75,23 +75,16 @@
 		// get (HTML5) attributes into configuration
 		$.each("min,max,step,value".split(","), function(i, key) {
 			var val = input.attr(key);
-			if (val || val === 0) {;
+			if (val || val === 0) {
 				conf[key] = parseFloat(val, 10);
 			}
 		});			   
 
 		var range = conf.max - conf.min;
 
-		/* replace build-in range element for cross browser consistency
-			NOTE: input.attr("type", "text") throws exception by the browser */
-			
+		// Replace built-in date input: NOTE: input.attr("type", "text") throws exception by the browser
 		if (input[0].getAttribute("type") == 'range') {
-			var tmp = $('<input/>')
-				.attr("type", "text")
-				.addClass(input.attr("className"))
-				.attr("name", input.attr("name"))
-				.attr("disabled", input.attr("disabled")).val(input.val());					
-	
+			var tmp = input.clone().attr("type", "text");
 			input.replaceWith(tmp);
 			input = tmp;
 		}
@@ -106,15 +99,15 @@
 
 			// fit inside the slider		
 			x = Math.min(Math.max(0, x), len);			 
-			
+
 			// increment in steps
 			if (conf.step) {
 				x = toSteps(x, conf.step, len);	
 			}
 
 			// calculate value	
 			var isClick = e && e.originalEvent && e.originalEvent.type == "click",
-				 v = round(x / len * range + conf.min, conf.decimals);
+				 v = round(x / len * range + conf.min, conf.accuracy);
 
 			// onSlide
 			if (value !== undefined && !isClick) {
@@ -154,7 +147,7 @@
 
 			setValue: function(val, e) {
 				val = parseFloat(val);
-				if (val === NaN || val == value) { return self; } 
+				if (isNaN(val) || val == value) { return self; } 
 				var x = (val - conf.min) * (len / range);	
 				return seek(x, e);	 
 			},
@@ -180,8 +173,8 @@
 			}, 
 
 			step: function(am, e) {
-				var x = Math.max(len / conf.step || conf.size || 10, 2);
-				return seek(pos + x * am, e);
+				if (conf.max <= 1) { am /= 10; } 
+				return self.setValue(value + am);
 			},
 
 			next: function() {
@@ -270,11 +263,11 @@
 
 				// UP: 	k=75, l=76, up=38, pageup=33, right=39			
 				if (up) {
-					slider.step(e.ctrlKey || key == 33 ? 5 : 1, e);
+					slider.step(e.ctrlKey || key == 33 ? 10 : 1, e);
 
 				// DOWN:	j=74, h=72, down=40, pagedown=34, left=37
 				} else if (down) {
-					slider.step(e.ctrlKey || key == 34 ? -5 : -1, e); 
+					slider.step(e.ctrlKey || key == 34 ? -10 : -1, e); 
 				} 
 				return e.preventDefault();
 			} 
@@ -286,7 +279,12 @@
 		}); 
 	}
 
-		
+	$.expr[':'].range = function(el) {
+		var type = el.getAttribute("type");
+		return type && type == 'range' || !!$(el).filter("input").data("slider");
+	};
+	
+	
 	// jQuery plugin implementation
 	$.fn.slider = function(conf) {
 
@@ -304,7 +302,7 @@
 			els = els ? els.add(input) : input;	
 		});		
 
-		return els; 
+		return els ? els : this; 
 	};	
 
 

src/form/form.slider.js

@@ -4,150 +4,32 @@
 <script src="../js/jquery-1.3.2.js"></script>
 <script src="../../src/form/form.datepicker.js"></script>
 
-<style>
-/*{{{ style */
-#picker {
-	width:198px;
-	padding:2px;
-	background-color:#ddd;
-	border:1px solid #ccc;
-	-moz-border-radius:3px;
-	position:relative;
-	font-family:"Lucida Grande","bitstream vera sans";
-	font-size:11px;
-	overflow:hidden;
-}
-
-#head {
-	background:#789;		
-	padding:2px;
-	height:22px;
-}
-
-#pickertitle {
-	font-size:12px;
-	color:#fff;	
-	float:left;
-	text-align:center;
-	width:150px;
-	line-height:2px;
-}
-
-#pm, #nm {
-	display:block;
-	width:20px;
-	height:20px;
-	border:1px solid #ccc;
-	float:left;
-}
-
-#nm {
-	float:right;
-}
-
-#days {
-	height:14px;
-	background-color:#456;
-	color:#fff;
-}
-
-#days span {
-	display:block;
-	float:left;
-	width:28px;
-	text-align:center;
-}
-
-#weeks {
-	background-color:#fff;
-	margin-top:4px;
-}
-
-.week {
-	clear:left;
-	height:24px;
-}
-
-.week:hover {
-	background-color:#efefef;		
-}
-.week a {
-	display:block;
-	float:left;
-	width:25px;
-	height:20px;
-	text-decoration:none;
-	font-size:11px;
-	border:1px solid #ddd;
-	margin-left:1px;
-	text-align:center;
-	line-height:20px;
-} 
-
-.week a:hover, .focus {
-	background-color:#789;
-	color:#fff;
-}
 
-.sun {
-	color:red;		
-}
-
-.off {
-	color:#666;		
-}
-
-.disabled {
-	background-color:#efefef !important;
-	color:#ccc	!important;
-	cursor:default;
-}
-
-.week a.off:hover {
-	background-color:#ddd;		
-}
-
-#pickertitle select {
-	font-size:10px;	
-}
-
-#today {
-	background-color:blue;
-	color:#fff;
-}
-
-/* other stuff */
-input {
-	width:200px;
-	font-size:11px;
-	font-family:"verdana";
+<style>
+body {
+	font-family:"lucida grande","verdana","sans serif";	
+	padding:50px 100px;
 }
 
-.trigger {
+.picktrigger {
 	width:30px;
 	height:30px;
 	border:1px solid blue;
 }
+</style>
 
-/*}}}*/
+<link rel="stylesheet" type="text/css" href="picker.css"/>
 
-</style>
 
-<h2>Minimal setup</h2>
+<h2>Datepicker test page</h2>
 
-<p>Here is the minimal setup for datepicker. Just an <samp>INPUT</samp> with the <samp>type</samp> attribute fixed</p>
 
 <!--  http://www.apple.com/iphone/iphone-3gs/more-features.html  -->
 <input type="date" class="date" name="joku" />
 
-<h3>HTML coding</h3>
-
-The demo only uses the following <samp>INPUT</samp> element for datepicker.
 
-<h3>Another one</h3>
-
-<input type="date" class="date" data-value="2004-03-20" min="2004-02-20"/>
-<div class="trigger"></div>
+<input type="date" class="date" data-value="2004-03-20" min="2004-02-20" readonly="true" />
+<div class="picktrigger"></div>
 
 <script>
 $(function() {
@@ -156,21 +38,34 @@ <h3>Another one</h3>
 		selectors: true,
 		// offset: [10, 10],
 		yearRange: [-3, 3],
-		easing: 'linear',
 		speed: 0,
 		firstDay: 0,
 		min: 365 * 1,
 		max: 365 * 2,
 
 		change: function(e, date) {
-			console.info(date, "picked");		
+			console.info(date, "picked", this.getDate("yy-mm-dd"));		
+		},
+		
+		onShow: function(e) {
+			console.info("onShow", this, e);
+		},
+		
+		onHide: function(e) {
+			console.info("onHide", this.getDate(), e, this);	
 		}
 
 	}).one("change", function()  {
-	 	console.info("binded event");			
+	 	console.info("binded event");		
+	 	
+	}).one("onBeforeShow", function(e)  {
+		console.info("before show", e);
+		return true;
 	});
 
-	
+	$(":date:first").change(function() {
+		console.info("JOOOOOOOOOOOO", this, arguments);		
+	});
 });
 </script>