From caccbdda8d9a34eb43592dcb1d813e1ba75f1b2f Mon Sep 17 00:00:00 2001
From: Andrew Nicols <andrew@nicols.co.uk>
Date: Mon, 30 Dec 2013 15:53:39 +0800
Subject: [PATCH] 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.
---
 lib/form/dateselector.php                 | 7 +++++--
 lib/form/datetimeselector.php             | 6 ++++--
 lib/form/yui/dateselector/dateselector.js | 2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/lib/form/dateselector.php b/lib/form/dateselector.php
index f4cb2c5bcfd..cb7ab39c427 100644
--- a/lib/form/dateselector.php
+++ b/lib/form/dateselector.php
@@ -119,8 +119,11 @@ class MoodleQuickForm_date_selector extends MoodleQuickForm_group
         $this->_elements[] = @MoodleQuickForm::createElement('select', 'day', get_string('day', 'form'), $days, $this->getAttributes(), true);
         $this->_elements[] = @MoodleQuickForm::createElement('select', 'month', get_string('month', 'form'), $months, $this->getAttributes(), true);
         $this->_elements[] = @MoodleQuickForm::createElement('select', 'year', get_string('year', 'form'), $years, $this->getAttributes(), true);
-        $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']) {
             $this->_elements[] = @MoodleQuickForm::createElement('checkbox', 'enabled', null, get_string('enable'), $this->getAttributes(), true);
diff --git a/lib/form/datetimeselector.php b/lib/form/datetimeselector.php
index 0bc6a7730c5..61bad10eb3b 100644
--- a/lib/form/datetimeselector.php
+++ b/lib/form/datetimeselector.php
@@ -133,8 +133,10 @@ class MoodleQuickForm_date_time_selector extends MoodleQuickForm_group{
             $this->_elements[] = @MoodleQuickForm::createElement('select', 'hour', get_string('hour', 'form'), $hours, $this->getAttributes(), true);
             $this->_elements[] = @MoodleQuickForm::createElement('select', 'minute', get_string('minute', 'form'), $minutes, $this->getAttributes(), true);
         }
-        $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']) {
             $this->_elements[] = @MoodleQuickForm::createElement('checkbox', 'enabled', null, get_string('enable'), $this->getAttributes(), true);
diff --git a/lib/form/yui/dateselector/dateselector.js b/lib/form/yui/dateselector/dateselector.js
index 1ea3669b9fe..2d332e29003 100644
--- 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]/)) {