Refs #795: Combine TimePicker and DatePicker

modules/backend/formwidgets/DatePicker.php

@@ -36,7 +36,7 @@ class DatePicker extends FormWidgetBase
      */
     public function init()
     {
-        $this->mode = $this->getConfig('mode', $this->mode);
+        $this->mode = strtolower($this->getConfig('mode', $this->mode));
         $this->minDate = $this->getConfig('minDate', $this->minDate);
         $this->maxDate = $this->getConfig('maxDate', $this->maxDate);
     }
@@ -69,7 +69,7 @@ class DatePicker extends FormWidgetBase
         }
 
         $this->vars['value'] = $value ?: '';
-        $this->vars['showTime'] = $this->mode == 'datetime' || $this->mode == 'time';
+        $this->vars['mode'] = $this->mode;
         $this->vars['minDate'] = $this->minDate;
         $this->vars['maxDate'] = $this->maxDate;
     }
@@ -80,11 +80,14 @@ class DatePicker extends FormWidgetBase
     public function loadAssets()
     {
         $this->addCss('vendor/pikaday/css/pikaday.css', 'core');
+        $this->addCss('vendor/clockpicker/css/jquery-clockpicker.css', 'core');
         $this->addCss('css/datepicker.css', 'core');
         $this->addJs('vendor/moment/moment.js', 'core');
         $this->addJs('vendor/pikaday/js/pikaday.js', 'core');
         $this->addJs('vendor/pikaday/js/pikaday.jquery.js', 'core');
+        $this->addJs('vendor/clockpicker/js/jquery-clockpicker.js', 'core');
         $this->addJs('js/datepicker.js', 'core');
+        $this->addJs('js/timepicker.js', 'core');
     }
 
     /**

modules/backend/formwidgets/TimePicker.php

@@ -1,91 +0,0 @@
-<?php namespace Backend\FormWidgets;
-
-use Backend\Classes\FormWidgetBase;
-
-/**
- * Time picker
- * Renders a time picker field.
- *
- * @package october\backend
- * @author webmaxx <http://webmaxx.name>
- */
-class TimePicker extends FormWidgetBase
-{
-    /**
-     * {@inheritDoc}
-     */
-    public $defaultAlias = 'timepicker';
-
-    /**
-     * @var bool Autoclose timepicker
-     */
-    public $autoclose = true;
-
-    /**
-     * @var string Text for "Done" button.
-     */
-    public $donetext = 'Done';
-
-    /**
-     * @var string Popover placement: "top", "bottom", "left" or "right".
-     */
-    public $placement = 'bottom';
-
-    /**
-     * @var string Popover arrow align: "left" or "right".
-     */
-    public $align = 'right';
-
-    /**
-     * {@inheritDoc}
-     */
-    public function init()
-    {
-        $this->autoclose = $this->getConfig('autoclose', $this->autoclose);
-        $this->donetext = $this->getConfig('donetext', $this->donetext);
-        $this->placement = $this->getConfig('placement', $this->placement);
-        $this->align = $this->getConfig('align', $this->align);
-    }
-
-    /**
-     * {@inheritDoc}
-     */
-    public function render()
-    {
-        $this->prepareVars();
-        return $this->makePartial('timepicker');
-    }
-
-    /**
-     * Prepares the list data
-     */
-    public function prepareVars()
-    {
-        $this->vars['name'] = $this->formField->getName();
-
-        $value = $this->getLoadData();
-
-        $this->vars['value'] = $value ?: '';
-        $this->vars['autoclose'] = $this->autoclose;
-        $this->vars['donetext'] = $this->donetext;
-        $this->vars['placement'] = $this->placement;
-        $this->vars['align'] = $this->align;
-    }
-
-    /**
-     * {@inheritDoc}
-     */
-    public function loadAssets()
-    {
-        $this->addCss('css/jquery-clockpicker.min.css', 'core');
-        $this->addJs('js/jquery-clockpicker.min.js', 'core');
-    }
-
-    /**
-     * {@inheritDoc}
-     */
-    public function getSaveData($value)
-    {
-        return strlen($value) ? $value : null;
-    }
-}

modules/backend/formwidgets/datepicker/assets/js/datepicker.js

@@ -3,7 +3,6 @@
  * 
  * Data attributes:
  * - data-control="datepicker" - enables the plugin on an element
- * - data-show-time="value" - allow the time to be chosen
  * - data-min-date="value" - minimum date to allow
  * - data-max-date="value" - maximum date to allow
  * - data-year-range="value" - range of years to display
@@ -11,7 +10,7 @@
  * JavaScript API:
  * $('a#someElement').datePicker({ option: 'value' })
  *
- * Dependences: 
+ * Dependences:
  * - Pikaday plugin (pikaday.js)
  * - Pikaday jQuery addon (pikaday.jquery.js)
  */
@@ -36,7 +35,6 @@
             changeMonitor.pause()
 
         this.$input.pikaday({
-            showTime: options.showTime,
             minDate: new Date(options.minDate),
             maxDate: new Date(options.maxDate),
             yearRange: options.yearRange,
@@ -56,7 +54,6 @@
     }
 
     DatePicker.DEFAULTS = {
-        showTime: false,
         minDate: '2000-01-01',
         maxDate: '2020-12-31',
         yearRange: 10

modules/backend/formwidgets/datepicker/assets/js/timepicker.js

@@ -0,0 +1,75 @@
+/*
+ * TimePicker plugin
+ * 
+ * Data attributes:
+ * - data-control="timepicker" - enables the plugin on an element
+ *
+ * JavaScript API:
+ * $('a#someElement').timePicker({ option: 'value' })
+ *
+ * Dependences:
+ * - Clockpicker plugin (jquery-clockpicker.js)
+ */
+
++function ($) { "use strict";
+
+    // DATEPICKER CLASS DEFINITION
+    // ============================
+
+    var TimePicker = function(element, options) {
+        var self       = this
+        this.options   = options
+        this.$el       = $(element)
+        this.$input    = this.$el.find('input:first')
+
+        // Init
+
+        var $form = this.$el.closest('form'),
+            changeMonitor = $form.data('oc.changeMonitor')
+
+        if (changeMonitor !== undefined)
+            changeMonitor.pause()
+
+        this.$input.clockpicker()
+
+        if (changeMonitor !== undefined)
+            changeMonitor.resume()
+    }
+
+    TimePicker.DEFAULTS = {
+    }
+
+    // DATEPICKER PLUGIN DEFINITION
+    // ============================
+
+    var old = $.fn.timePicker
+
+    $.fn.timePicker = function (option) {
+        var args = Array.prototype.slice.call(arguments, 1)
+        return this.each(function () {
+            var $this   = $(this)
+            var data    = $this.data('oc.timepicker')
+            var options = $.extend({}, TimePicker.DEFAULTS, $this.data(), typeof option == 'object' && option)
+            if (!data) $this.data('oc.timepicker', (data = new TimePicker(this, options)))
+            else if (typeof option == 'string') data[option].apply(data, args)
+        })
+    }
+
+    $.fn.timePicker.Constructor = TimePicker
+
+    // DATEPICKER NO CONFLICT
+    // =================
+
+    $.fn.timePicker.noConflict = function () {
+        $.fn.timePicker = old
+        return this
+    }
+
+    // DATEPICKER DATA-API
+    // ===============
+
+    $(document).on('render', function() {
+        $('[data-control="timepicker"]').timePicker()
+    });
+
+}(window.jQuery);

modules/backend/formwidgets/datepicker/partials/_datepicker.htm

@@ -1,19 +1,82 @@
 <?php if ($this->previewMode): ?>
     <div class="form-control"><?= $value ?></div>
 <?php else: ?>
-    <div
-        id="<?= $this->getId() ?>"
-        class="field-datepicker"
-        data-control="datepicker"
-        data-show-time="<?= $showTime ? 'true' : 'false' ?>"
-        data-min-date="<?= $minDate ?>"
-        data-max-date="<?= $maxDate ?>">
-        <input
-            type="text"
-            id="<?= $this->getId('input') ?>"
-            name="<?= $name ?>"
-            value="<?= $value ?>"
-            class="form-control align-right"
-            autocomplete="off">
-    </div>
+
+    <?php if ($mode == 'date'): ?>
+
+        <div
+            id="<?= $this->getId() ?>"
+            class="field-datepicker"
+            data-control="datepicker"
+            data-min-date="<?= $minDate ?>"
+            data-max-date="<?= $maxDate ?>">
+            <input
+                type="text"
+                id="<?= $this->getId('input') ?>"
+                name="<?= $name ?>"
+                value="<?= $value ?>"
+                class="form-control align-right"
+                autocomplete="off">
+        </div>
+
+    <?php elseif ($mode == 'datetime'): ?>
+
+        <div class="row">
+            <div class="col-md-6">
+                <!-- Date -->
+                <div
+                    id="<?= $this->getId() ?>"
+                    class="field-datepicker"
+                    data-control="datepicker"
+                    data-min-date="<?= $minDate ?>"
+                    data-max-date="<?= $maxDate ?>">
+                    <input
+                        type="text"
+                        id="<?= $this->getId('input') ?>"
+                        name="<?= $name ?>"
+                        value="<?= $value ?>"
+                        class="form-control align-right"
+                        autocomplete="off">
+                </div>
+            </div>
+            <div class="col-md-6">
+                <!-- Time -->
+                <div
+                    id="<?= $this->getId() ?>"
+                    data-control="timepicker"
+                    class="field-timepicker clockpicker">
+                    <input
+                        type="text"
+                        id="<?= $this->getId('input') ?>"
+                        name="<?= $name ?>"
+                        value="<?= $value ?>"
+                        class="form-control align-right"
+                        autocomplete="off"
+                        data-autoclose="true"
+                        data-placement="bottom"
+                        data-align="right">
+                </div>
+            </div>
+        </div>
+
+    <?php elseif ($mode == 'time'): ?>
+
+        <div
+            id="<?= $this->getId() ?>"
+            data-control="timepicker"
+            class="field-timepicker clockpicker">
+            <input
+                type="text"
+                id="<?= $this->getId('input') ?>"
+                name="<?= $name ?>"
+                value="<?= $value ?>"
+                class="form-control align-right"
+                autocomplete="off"
+                data-autoclose="true"
+                data-placement="bottom"
+                data-align="right">
+        </div>
+
+    <?php endif ?>
+
 <?php endif ?>

modules/backend/formwidgets/timepicker/partials/_timepicker.htm

@@ -1,22 +0,0 @@
-<?php if ($this->previewMode): ?>
-    <div class="form-control"><?= $value ?></div>
-<?php else: ?>
-    <div
-        id="<?= $this->getId() ?>"
-        class="field-timepicker clockpicker">
-        <input
-            type="text"
-            id="<?= $this->getId('input') ?>"
-            name="<?= $name ?>"
-            value="<?= $value ?>"
-            class="form-control align-right"
-            autocomplete="off"
-            data-control="timepicker"
-            data-donetext="<?= $donetext ?>"
-            data-autoclose="<?= $autoclose ? 'true' : 'false' ?>"
-            data-placement="<?= $placement ?>"
-            data-align="<?= $align ?>">
-    </div>
-
-    <script> $('#<?= $this->getId('input') ?>').clockpicker(); </script>
-<?php endif ?>