Datepicker: Update icon-trigger demo, build a custom trigger. Prevent the datepicker from opening with a new cancellable beforeOpen event. Cancel = don't open

Author: jzaefferer

demos/datepicker/icon-trigger.html

@@ -16,11 +16,21 @@
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "#datepicker" ).datepicker({
-			showOn: "button",
-			buttonImage: "images/calendar.gif",
-			buttonImageOnly: true
+		var allowOpen = false;
+		var datepicker = $( "#datepicker" ).datepicker({
+			beforeOpen: function() {
+				return allowOpen;
+			}
 		});
+		$( "<img src='images/calendar.gif' alt='Open Datepicker'>")
+			.insertAfter( datepicker )
+			.click(function() {
+				allowOpen = true;
+				datepicker.focus();
+				setTimeout(function() {
+					allowOpen = false;
+				});
+			});
 	});
 	</script>
 </head>

ui/jquery.ui.datepicker.js

@@ -37,6 +37,7 @@ $.widget( "ui.datepicker", {
 		hide: true,
 
 		// callbacks
+		beforeOpen: null,
 		close: null,
 		open: null,
 		select: null
@@ -527,6 +528,9 @@ $.widget( "ui.datepicker", {
 		if ( this.inline || this.isOpen ) {
 			return;
 		}
+		if ( this._trigger( "beforeOpen", event ) === false ) {
+			return;
+		}
 
 		// TODO explain this
 		this.date = $.date( this.element.val(), this.options.dateFormat );