Datepicker prototype: Add button example

Author: jzaefferer

datepicker-rewrite/index.html

@@ -34,6 +34,7 @@
 	<div id="datepicker-inline"></div>
 	<input id="datepicker" type="text" />
 	<input id="datepicker2" type="text" />
+	<input id="datepicker3" type="text" />
 	<script>
 		$( function() {
 			$( "#culture" ).change( function() {
@@ -78,6 +79,23 @@
 				}
 			});
 			$( "#datepicker, #datepicker2" ).datepicker();
+			
+			var input = $("#datepicker3");
+			var button = $("<button>").insertAfter(input);
+			var picker = $("<div>").css( {
+				position: "absolute"
+			}).datepicker({
+				select: function(event, ui) {
+					input.val(ui.date);
+					picker.datepicker("close");
+				},
+				position: {
+					of: input
+				}
+			}).insertAfter(input).hide();
+			button.click(function() {
+				picker.datepicker("open");
+			});
 		});
 	</script>
 

datepicker-rewrite/picker.js

@@ -8,7 +8,11 @@
 $.widget( "ui.datepicker", {
 	options: {
 		eachDay: $.noop,
-		tmpl: "#ui-datepicker-tmpl"
+		tmpl: "#ui-datepicker-tmpl",
+		position: {
+			my: "left top",
+			at: "left bottom"
+		}
 	},
 	_create: function() {
 		var self = this;
@@ -78,11 +82,10 @@ $.widget( "ui.datepicker", {
 	},
 	open: function( event ) {
 		this.picker.fadeIn( "fast" );
-		this.picker.position({
-			my: "left top",
-			at: "left bottom",
+		
+		this.picker.position( $.extend( {
 			of: this.element
-		});
+		}, this.options.position ));
 	},
 	close: function( event ) {
 		this.picker.fadeOut();