Added theme options for date time picker

js/drupal.single_datetime.js

@@ -82,6 +82,8 @@
 
         var inline = input.data('inline');
 
+        var theme = input.data('datetimepickerTheme');
+
         // If is date & time field.
         if (widgetType === 'datetime') {
           format = (hourFormat === '12h') ? 'Y-m-d h:i:s A' : 'Y-m-d H:i:s';
@@ -105,6 +107,7 @@
           maxDate,
           yearStart,
           yearEnd,
+          theme,
         });
       });
     },

src/Element/SingleDateTime.php

@@ -83,6 +83,7 @@ class SingleDateTime extends FormElement {
       'data-disable-days' => Json::encode($disabled_days),
       'data-exclude-date' => $exclude_date,
       'data-inline' => !empty($element['#inline']) ? 1 : 0,
+      'data-datetimepicker-theme' => $element['#datetimepicker-theme'],
     ];
 
     // Year start.

src/Plugin/Field/FieldWidget/SingleDateTimeRangeWidget.php

@@ -196,6 +196,7 @@ class SingleDateTimeRangeWidget extends SingleDateTimeWidget implements Containe
       '#disable_days' => $this->getSetting('disable_days'),
       '#exclude_date' => $this->getSetting('exclude_date'),
       '#inline' => $this->getSetting('inline'),
+      '#datetimepicker_theme' => $this->getSetting('datetimepicker_theme'),
       '#min_date' => $this->getSetting('min_date'),
       '#max_date' => $this->getSetting('max_date'),
       '#year_start' => $this->getSetting('year_start'),

src/Plugin/Field/FieldWidget/SingleDateTimeWidget.php

@@ -35,6 +35,7 @@ class SingleDateTimeWidget extends DateTimeWidgetBase implements ContainerFactor
       'disable_days' => [],
       'exclude_date' => '',
       'inline' => FALSE,
+      'datetimepicker_theme' => 'default',
       'min_date' => '',
       'max_date' => '',
       'year_start' => '',
@@ -103,6 +104,17 @@ class SingleDateTimeWidget extends DateTimeWidgetBase implements ContainerFactor
       '#default_value' => $this->getSetting('inline'),
       '#required' => FALSE,
     ];
+    $elements['datetimepicker_theme'] = [
+      '#type' => 'select',
+      '#title' => $this->t('Theme'),
+      '#description' => $this->t('Setting a color scheme. Now only supported default and dark theme'),
+      '#options' => [
+        'default' => $this->t('Default'),
+        'dark' => $this->t('Dark'),
+      ],
+      '#default_value' => $this->getSetting('datetimepicker_theme'),
+      '#required' => FALSE,
+    ];
     $elements['min_date'] = [
       '#type' => 'textfield',
       '#title' => $this->t('Set a limit to the minimum date/time allowed to pick.'),
@@ -174,6 +186,8 @@ class SingleDateTimeWidget extends DateTimeWidgetBase implements ContainerFactor
 
     $summary[] = t('Display inline widget: @render_widget', ['@render_widget' => !empty($this->getSetting('inline')) ? t('Yes') : t('No')]);
 
+    $summary[] = t('Theme: @theme', ['@theme' => ucfirst($this->getSetting('datetimepicker_theme'))]);
+
     $summary[] = t('Minimum date/time: @min_date', ['@min_date' => !empty($min_date) ? $min_date : t('None')]);
 
     $summary[] = t('Maximum date/time: @max_date', ['@max_date' => !empty($max_date) ? $max_date : t('None')]);
@@ -309,6 +323,7 @@ class SingleDateTimeWidget extends DateTimeWidgetBase implements ContainerFactor
     $element['value']['#disable_days'] = $this->getSetting('disable_days');
     $element['value']['#exclude_date'] = $this->getSetting('exclude_date');
     $element['value']['#inline'] = $this->getSetting('inline');
+    $element['value']['#datetimepicker-theme'] = $this->getSetting('datetimepicker_theme');
     $element['value']['#min_date'] = $this->getSetting('min_date');
     $element['value']['#max_date'] = $this->getSetting('max_date');
     $element['value']['#year_start'] = $this->getSetting('year_start');