MDL-40119 Forms: Date selector should use images for the calendar popup toggle
authorAndrew Nicols <andrew@nicols.co.uk>
Mon, 30 Dec 2013 07:53:39 +0000 (15:53 +0800)
committerAndrew Nicols <andrew@nicols.co.uk>
Mon, 30 Dec 2013 07:53:42 +0000 (15:53 +0800)
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.

lib/form/dateselector.php
lib/form/datetimeselector.php
lib/form/yui/dateselector/dateselector.js

index 9094d02..2332e99 100644 (file)
@@ -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']) {
index ff2fa99..3153f34 100644 (file)
@@ -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']) {
index 1ea3669..2d332e2 100644 (file)
@@ -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]/)) {