Merge pull request #6691 from jibees/6664-new-datetimepicker

6664 new datetimepicker

app/assets/javascripts/admin/all.js

@@ -10,7 +10,6 @@
 //= require jquery-migrate-min
 //= require jquery_ujs
 //= require jquery.ui.all
-//= require jquery-ui-timepicker-addon
 //= require jquery.powertip
 //= require jquery.cookie
 //= require jquery.jstree/jquery.jstree
@@ -24,6 +23,23 @@
 //= require angular-rails-templates
 //= require lodash.underscore.js
 
+// datetimepicker  (fil, nb)
+//= require flatpickr/dist/flatpickr.min
+//= require flatpickr/dist/l10n/ar
+//= require flatpickr/dist/l10n/cat
+//= require flatpickr/dist/l10n/cy
+//= require flatpickr/dist/l10n/de
+//= require flatpickr/dist/l10n/es
+//= require flatpickr/dist/l10n/fr
+//= require flatpickr/dist/l10n/it
+//= require flatpickr/dist/l10n/nl
+//= require flatpickr/dist/l10n/pl
+//= require flatpickr/dist/l10n/pt
+//= require flatpickr/dist/l10n/ru
+//= require flatpickr/dist/l10n/sv
+//= require flatpickr/dist/l10n/tr
+//= require shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr.min
+
 // spree
 //= require admin/spree/spree
 //= require admin/spree/spree-select2

app/assets/javascripts/admin/directives/date_picker.js.coffee

@@ -1,9 +0,0 @@
-angular.module("ofn.admin").directive "datepicker", ->
-  require: "ngModel"
-  link: (scope, element, attrs, ngModel) ->
-    element.datepicker
-      dateFormat: "yy-mm-dd"
-      onSelect: (dateText, inst) ->
-        scope.$apply (scope) ->
-          # Fires ngModel.$parsers
-          ngModel.$setViewValue dateText

app/assets/javascripts/admin/directives/datetime_picker.js.coffee

@@ -1,11 +0,0 @@
-angular.module("ofn.admin").directive "datetimepicker", ->
-  require: "ngModel"
-  link: (scope, element, attrs, ngModel) ->
-    element.datetimepicker
-      dateFormat: "yy-mm-dd"
-      timeFormat: "HH:mm:ss"
-      stepMinute: 15
-      onSelect: (dateText, inst) ->
-        scope.$apply (scope) ->
-          # Fires ngModel.$parsers
-          ngModel.$setViewValue dateText

app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee

@@ -3,21 +3,11 @@ angular.module('admin.orderCycles', ['ngTagsInput', 'admin.indexUtils', 'admin.e
     require: "ngModel"
     link: (scope, element, attrs, ngModel) ->
       $timeout ->
-        # using $parse instead of scope[attrs.datetimepicker] for cases
-        # where attrs.datetimepicker is 'foo.bar.lol'
-        $(element).datetimepicker(
-          Object.assign(
-            window.JQUERY_UI_DATETIME_PICKER_DEFAULTS,
-            {
-              onSelect: (dateText, inst) ->
-                scope.$apply(->
-                  element.val(dateText)
-                  parsed = $parse(attrs.datetimepicker)
-                  parsed.assign(scope, dateText)
-                )
-            }
-          )
-        )
+        flatpickr(element,  Object.assign({},
+                            window.FLATPICKR_DATETIME_DEFAULT, {
+                            onOpen: (selectedDates, dateStr, instance) ->
+                              instance.setDate(ngModel.$modelValue)
+                            }));
 
   .directive 'ofnOnChange', ->
     (scope, element, attrs) ->

app/assets/javascripts/admin/spree/base.js.erb

@@ -98,40 +98,6 @@ $.fn.radioControlsVisibilityOfElement = function(dependentElementSelector){
 }
 
 $(document).ready(function() {
-  if (typeof Spree !== 'undefined' &&
-    typeof Spree.translations !== 'undefined') {
-    handle_date_picker_fields = function(){
-      $('.datepicker').datepicker({
-        dateFormat: Spree.translations.date_picker,
-        dayNames: Spree.translations.abbr_day_names,
-        dayNamesMin: Spree.translations.abbr_day_names,
-        monthNames: Spree.translations.month_names,
-        prevText: Spree.translations.previous,
-        nextText: Spree.translations.next,
-        showOn: "focus"
-      });
-      
-       $.datepicker.regional[I18n.locale] = {
-          prevText: Spree.translations.previous,
-          nextText: Spree.translations.next,
-          monthNames: Spree.translations.month_names,
-          dayNames: Spree.translations.abbr_day_names,
-          dayNamesMin: Spree.translations.abbr_day_names,
-          dateFormat: Spree.translations.date_picker
-      };
-      $.datepicker.setDefaults( $.datepicker.regional[I18n.locale]);
-      // Correctly display range dates
-      $('.date-range-filter .datepicker-from').datepicker('option', 'onSelect', function(selectedDate) {
-        $(".date-range-filter .datepicker-to" ).datepicker( "option", "minDate", selectedDate );
-      });
-      $('.date-range-filter .datepicker-to').datepicker('option', 'onSelect', function(selectedDate) {
-        $(".date-range-filter .datepicker-from" ).datepicker( "option", "maxDate", selectedDate );
-      });
-    }
-
-    handle_date_picker_fields();
-  }
-
   $(".observe_field").on('change', function() {
     target = $(this).attr("data-update");
     ajax_indicator = $(this).attr("data-ajax-indicator") || '#busy_indicator';

app/assets/javascripts/admin/util.js.erb

@@ -1,30 +1,45 @@
-$(document).ready(function(){
-  window.JQUERY_UI_DATE_PICKER_DEFAULTS = {
-    dateFormat: Spree.translations.date_picker,
-    dayNames: Spree.translations.abbr_day_names,
-    dayNamesMin: Spree.translations.abbr_day_names,
-    monthNames: Spree.translations.month_names,
-    prevText: Spree.translations.previous,
-    nextText: Spree.translations.next,
-    oneLine: true,
-    showOn: 'button',
-    buttonImage: "<%= asset_path 'datepicker/cal.gif' %>",
-    buttonImageOnly: true
+$(document).ready(function() {
+  var onClickButtons = function(index, fp) {
+    var date;
+    switch (index) {
+      case 0:
+        date = new Date();
+        break;
+    }
+    fp.setDate(date, true);
   }
-
-  window.JQUERY_UI_DATETIME_PICKER_DEFAULTS = Object.assign(
+  window.FLATPICKR_DATE_DEFAULT = {
+    dateFormat: Spree.translations.flatpickr_date_format,
+    locale: I18n.locale,
+    plugins: [
+        ShortcutButtonsPlugin({
+          button: [{
+            label: Spree.translations.today
+          }],
+          label: "or",
+          onClick: onClickButtons
+        })
+      ]
+  }
+  window.FLATPICKR_DATETIME_DEFAULT = Object.assign(
     {},
-    window.JQUERY_UI_DATE_PICKER_DEFAULTS,
+    window.FLATPICKR_DATE_DEFAULT,
     {
-      currentText: Spree.translations.datetime_ui_current_text,
-      closeText: Spree.translations.datetime_ui_close_text,
-      timeText: Spree.translations.datetime_ui_time_text,
-      timeFormat: 'HH:mm',
-      controlType: 'select',
-      stepMinute: 15
+      dateFormat: Spree.translations.flatpickr_datetime_format,
+      enableTime: true,
+      time_24hr: true,
+      plugins: [
+        ShortcutButtonsPlugin({
+          button: [{
+            label: Spree.translations.now
+          }],
+          label: "or",
+          onClick: onClickButtons
+        })
+      ]
     }
   );
-  $('.datetimepicker').datetimepicker(window.JQUERY_UI_DATETIME_PICKER_DEFAULTS);
+  flatpickr(".datetimepicker", window.FLATPICKR_DATETIME_DEFAULT);
   $('a.close').click(function(event){
     event.preventDefault();
     $(this).parent().slideUp(250);

app/assets/javascripts/admin/utils/directives/date_picker.js.coffee

@@ -1,9 +1,11 @@
-angular.module("admin.utils").directive "datepicker", ->
+angular.module("admin.utils").directive "datepicker", ($window, $timeout) ->
   require: "ngModel"
   link: (scope, element, attrs, ngModel) ->
-    element.datepicker
-      dateFormat: "yy-mm-dd"
-      onSelect: (dateText, inst) ->
-        scope.$apply (scope) ->
-          # Fires ngModel.$parsers
-          ngModel.$setViewValue dateText
+    $timeout ->
+      flatpickr(element,  Object.assign(
+                            {},
+                            $window.FLATPICKR_DATE_DEFAULT, {
+                            onOpen: (selectedDates, dateStr, instance) ->
+                              instance.setDate(ngModel.$modelValue)
+                            }
+                          ));