Demonstrate callbacks on range datepickers

diff --git a/demos/functional/templates/ui.datepicker.html b/demos/functional/templates/ui.datepicker.html
index 2a4af253a837526699f3981f9b94469917deb325..ae4c78fbafdd77febced45da4b561054f79accc5 100644 (file)
--- a/demos/functional/templates/ui.datepicker.html
+++ b/demos/functional/templates/ui.datepicker.html
@@ -182,13 +182,16 @@
                        {
                                title: 'Callbacks',
                                desc: 'Custom functions may be invoked when certain events occur within the datepicker.',
-                               html: '<input type="text" size="10" value="" id="callbacks"/>',
+                               html: '<input type="text" size="24" value="" id="callbacks"/>',
                                destroy: '$("#callbacks").datepicker("destroy");',
 
                                options: [
                                        {       desc: 'On select',      source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
                                        {       desc: 'On close',       source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with date " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
-                                       {       desc: 'On change of month/year',        source: '$("#callbacks").datepicker({onChangeMonthYear: function(date) { alert("Moved to month " + $.datepicker.formatDate("MM yy", date)); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
+                                       {       desc: 'On change of month/year',        source: '$("#callbacks").datepicker({onChangeMonthYear: function(date) { alert("Moved to month " + $.datepicker.formatDate("MM yy", date)); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'On select for range',    source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen dates are " + date); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'On close for range',     source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with dates " + date); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'On change of month/year for range',      source: '$("#callbacks").datepicker({onChangeMonthYear: function(date) { alert("Moved to month " + $.datepicker.formatDate("MM yy", date)); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
                                ]
                        },