diff --git a/lib/form/dateselector.php b/lib/form/dateselector.php
index d32677c1482..0dda8dfcf2a 100644
--- a/lib/form/dateselector.php
+++ b/lib/form/dateselector.php
@@ -55,9 +55,18 @@ class MoodleQuickForm_date_selector extends MoodleQuickForm_group
     protected $_options = array('startyear' => 1970, 'stopyear' => 2020,
             'timezone' => 99, 'optional' => false);
 
-   /** @var array These complement separators, they are appended to the resultant HTML */
+    /**
+     * @var array These complement separators, they are appended to the resultant HTML.
+     */
     protected $_wrap = array('', '');
 
+    /**
+     * @var null|bool Keeps track of whether the date selector was initialised using createElement
+     *                or addElement. If true, createElement was used signifying the element has been
+     *                added to a group - see MDL-39187.
+     */
+    protected $_usedcreateelement = true;
+
     /**
      * constructor
      *
@@ -177,6 +186,10 @@ class MoodleQuickForm_date_selector extends MoodleQuickForm_group
                 }
                 return parent::onQuickFormEvent($event, $arg, $caller);
                 break;
+            case 'addElement':
+                $this->_usedcreateelement = false;
+                return parent::onQuickFormEvent($event, $arg, $caller);
+                break;
             default:
                 return parent::onQuickFormEvent($event, $arg, $caller);
         }
@@ -193,7 +206,16 @@ class MoodleQuickForm_date_selector extends MoodleQuickForm_group
         $renderer = new HTML_QuickForm_Renderer_Default();
         $renderer->setElementTemplate('{element}');
         parent::accept($renderer);
-        return $this->_wrap[0] . $renderer->toHtml() . $this->_wrap[1];
+
+        $html = $this->_wrap[0];
+        if ($this->_usedcreateelement) {
+            $html .= html_writer::tag('span', $renderer->toHtml(), array('class' => 'fdate_selector'));
+        } else {
+            $html .= $renderer->toHtml();
+        }
+        $html .= $this->_wrap[1];
+
+        return $html;
     }
 
     /**
diff --git a/lib/form/datetimeselector.php b/lib/form/datetimeselector.php
index 510942fe1df..0361422f539 100644
--- a/lib/form/datetimeselector.php
+++ b/lib/form/datetimeselector.php
@@ -56,8 +56,17 @@ class MoodleQuickForm_date_time_selector extends MoodleQuickForm_group{
     var $_options = array('startyear' => 1970, 'stopyear' => 2020, 'defaulttime' => 0,
                     'timezone' => 99, 'step' => 5, 'optional' => false);
 
-    /** @var array These complement separators, they are appended to the resultant HTML */
-    var $_wrap = array('', '');
+    /**
+     * @var array These complement separators, they are appended to the resultant HTML.
+     */
+    protected $_wrap = array('', '');
+
+    /**
+     * @var null|bool Keeps track of whether the date selector was initialised using createElement
+     *                or addElement. If true, createElement was used signifying the element has been
+     *                added to a group - see MDL-39187.
+     */
+    protected $_usedcreateelement = true;
 
     /**
      * Class constructor
@@ -196,6 +205,10 @@ class MoodleQuickForm_date_time_selector extends MoodleQuickForm_group{
                 }
                 return parent::onQuickFormEvent($event, $arg, $caller);
                 break;
+            case 'addElement':
+                $this->_usedcreateelement = false;
+                return parent::onQuickFormEvent($event, $arg, $caller);
+                break;
             default:
                 return parent::onQuickFormEvent($event, $arg, $caller);
         }
@@ -212,7 +225,16 @@ class MoodleQuickForm_date_time_selector extends MoodleQuickForm_group{
         $renderer = new HTML_QuickForm_Renderer_Default();
         $renderer->setElementTemplate('{element}');
         parent::accept($renderer);
-        return $this->_wrap[0] . $renderer->toHtml() . $this->_wrap[1];
+
+        $html = $this->_wrap[0];
+        if ($this->_usedcreateelement) {
+            $html .= html_writer::tag('span', $renderer->toHtml(), array('class' => 'fdate_time_selector'));
+        } else {
+            $html .= $renderer->toHtml();
+        }
+        $html .= $this->_wrap[1];
+
+        return $html;
     }
 
     /**
diff --git a/lib/form/yui/dateselector/dateselector.js b/lib/form/yui/dateselector/dateselector.js
index 5792caecc54..db1445a27d0 100644
--- a/lib/form/yui/dateselector/dateselector.js
+++ b/lib/form/yui/dateselector/dateselector.js
@@ -189,11 +189,11 @@ YUI.add('moodle-form-dateselector', function(Y) {
             if (this.panel === null) {
                 this.initPanel(config);
             }
-            Y.all('fieldset.fdate_time_selector').each(function(){
+            Y.all('.fdate_time_selector').each(function() {
                 config.node = this;
                 new CALENDAR(config);
             });
-            Y.all('fieldset.fdate_selector').each(function(){
+            Y.all('.fdate_selector').each(function() {
                 config.node = this;
                 new CALENDAR(config);
             });