Editable: Added datepicker editor.

Author: rxaviers

demos/editable/editors.html

@@ -8,15 +8,18 @@
 	<script src="../../ui/jquery.ui.core.js"></script>
 	<script src="../../ui/jquery.ui.widget.js"></script>
 	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
 	<script src="../../ui/jquery.ui.editable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
 	.demo { display: inline-block; }
+	#datepicker {display: inline-block; }
 	</style>
 	<script>
 	$(function() {
 		$( "#default" ).editable();
 		$( "#textarea" ).editable({
+			// Setting a different editor
 			editor: "textarea",
 			buttons: {
 				save: {
@@ -27,6 +30,16 @@
 				}
 			}
 		});
+		$( "#datepicker" ).editable({
+			// Set an editor while passing custom options to it
+			editor: {
+				datepicker: {
+					changeMonth: true,
+					changeYear: true
+				}
+			},
+			placeholder: "Datepicker"
+		});
 
 		$( "#start-all" )
 			.button()
@@ -62,6 +75,10 @@
 Textarea
 </p>
 
+<p>
+<span class="sample" id="datepicker"></span>
+</p>
+
 </div><!-- End demo -->
 
 

ui/jquery.ui.editable.js

@@ -11,6 +11,7 @@
  *	jquery.ui.core.js
  *	jquery.ui.widget.js
  *	jquery.ui.button.js
+ *	jquery.ui.datepicker.js
  */
 (function( $, undefined ) {
 
@@ -319,7 +320,19 @@ $.ui.editable.editors = {
 		}
 	},
 	select: $.noop,
-	spinner: $.noop 
+	spinner: $.noop,
+	datepicker: {
+		element: function( editable ) {
+			return $.ui.editable.editors.text.element( editable );
+		},
+		bind: function( editable ) {
+			$( "input", editable.element ).datepicker( editable._editorOptions );
+			$.ui.editable.editors.text.bind( editable );
+		},
+		value: function( editable, form ) {
+			return $.ui.editable.editors.text.value( editable, form );
+		}
+	}
 };
 
 $.ui.editable.defaults = {