MDL-40119 Forms: Date selector should use images for the calendar popup toggle

The calendar popup toggle must use an image, rather than an input with type
of image as the latter is actually a form of submit button, and hence it
steals the focus away from the real submit button.

diff --git a/lib/form/dateselector.php b/lib/form/dateselector.php
index 9094d02..2332e99 100644 (file)
--- a/lib/form/dateselector.php
+++ b/lib/form/dateselector.php
@@ -123,8 +123,10 @@ class MoodleQuickForm_date_selector extends MoodleQuickForm_group {
         }
         // The YUI2 calendar only supports the gregorian calendar type so only display the calendar image if this is being used.
         if ($calendartype->get_name() === 'gregorian') {
-            $this->_elements[] = @MoodleQuickForm::createElement('image', 'calendar', $OUTPUT->pix_url('i/calendar', 'moodle'),
-                array('title' => get_string('calendar', 'calendar'), 'class' => 'visibleifjs'));
+            $image = $OUTPUT->pix_icon('i/calendar', get_string('calendar', 'calendar'), 'moodle');
+            $this->_elements[] = @MoodleQuickForm::createElement('link', 'calendar',
+                    null, '#', $image,
+                    array('class' => 'visibleifjs'));
         }
         // If optional we add a checkbox which the user can use to turn if on
         if ($this->_options['optional']) {

diff --git a/lib/form/datetimeselector.php b/lib/form/datetimeselector.php
index ff2fa99..3153f34 100644 (file)
--- a/lib/form/datetimeselector.php
+++ b/lib/form/datetimeselector.php
@@ -139,8 +139,10 @@ class MoodleQuickForm_date_time_selector extends MoodleQuickForm_group {
         }
         // The YUI2 calendar only supports the gregorian calendar type so only display the calendar image if this is being used.
         if ($calendartype->get_name() === 'gregorian') {
-            $this->_elements[] = @MoodleQuickForm::createElement('image', 'calendar', $OUTPUT->pix_url('i/calendar', 'moodle'),
-                array('title' => get_string('calendar', 'calendar'), 'class' => 'visibleifjs'));
+            $image = $OUTPUT->pix_icon('i/calendar', get_string('calendar', 'calendar'), 'moodle');
+            $this->_elements[] = @MoodleQuickForm::createElement('link', 'calendar',
+                    null, '#', $image,
+                    array('class' => 'visibleifjs'));
         }
         // If optional we add a checkbox which the user can use to turn if on
         if ($this->_options['optional']) {

diff --git a/lib/form/yui/dateselector/dateselector.js b/lib/form/yui/dateselector/dateselector.js
index 1ea3669..2d332e2 100644 (file)
--- a/lib/form/yui/dateselector/dateselector.js
+++ b/lib/form/yui/dateselector/dateselector.js
@@ -73,7 +73,7 @@ YUI.add('moodle-form-dateselector', function(Y) {
             }, this);
 
             // Loop through the input fields.
-            var inputs = this.get('node').all('input');
+            var inputs = this.get('node').all('input, a');
             inputs.each(function(node) {
                 // Check if the current node is a calendar image field.
                 if (node.get('name').match(/\[calendar]/)) {