Datepicker: Fix icon trigger demo

Support keyboard control. Fix close on second click.
Add removal notice.

diff --git a/demos/datepicker/icon-trigger.html b/demos/datepicker/icon-trigger.html
index 2ab3c2e236e5d4a263df17e0a76138ba94f34f95..ed79840ab882a23522d4a28ad6b432ee38a34fb9 100644 (file)
--- a/demos/datepicker/icon-trigger.html
+++ b/demos/datepicker/icon-trigger.html
@@ -15,13 +15,18 @@
                                open: function() {
                                        allowOpen = false;
                                }
-                       });
+                       } ),
+                       widget = datepicker.datepicker( "widget" );
 
-               $( "<img src='images/calendar.gif' alt='Open Datepicker'>")
+               $( "<a href='#'>")
+                       .append( "<img src='images/calendar.gif' tabindex='0' alt='Open Datepicker'>" )
                        .insertAfter( datepicker )
-                       .on( "click", function() {
+                       .on( "click", function( event ) {
                                allowOpen = true;
-                               datepicker.focus();
+                               if ( widget.is( ":hidden" ) ) {
+                                       datepicker.focus();
+                               }
+                               event.preventDefault();
                        });
        </script>
 </head>
@@ -30,7 +35,7 @@
 <p>Date: <input type="text" id="datepicker"></p>
 
 <div class="demo-description">
-<p>Click the icon next to the input field to show the datepicker.  Set the datepicker to open on focus (default behavior), on icon click, or both.</p>
+<p>Click the icon next to the input field to show the datepicker. This demo will be removed soon since its promoting bad practice. Please see our migration guide.</p>
 </div>
 </body>
 </html>