Switch from jQuery UI datepicker to flatpickr

backend/app/assets/javascripts/spree/backend.js

@@ -12,6 +12,7 @@
 //= require solidus_admin/backbone-nested-models
 //= require solidus_admin/popover
 //= require solidus_admin/bootstrap
+//= require solidus_admin/flatpickr/flatpickr
 //= require prism
 //= require spree
 //= require spree/backend/namespaces
@@ -33,6 +34,7 @@
 //= require spree/backend/components/tabs
 //= require spree/backend/components/tooltips
 //= require spree/backend/components/editable_table
+//= require spree/backend/datepicker
 //= require spree/backend/flash
 //= require spree/backend/gateway
 //= require spree/backend/handlebars_extensions

backend/app/assets/javascripts/spree/backend/admin.js

@@ -52,29 +52,7 @@ $.fn.radioControlsVisibilityOfElement = function(dependentElementSelector){
   });
 }
 
-var handle_date_picker_fields = function(){
-  $('.datepicker').datepicker({
-    dateFormat: Spree.t('date_picker.js_format', { default: 'yy/mm/dd' }),
-    dayNames: Spree.t('abbr_day_names'),
-    dayNamesMin: Spree.t('abbr_day_names'),
-    firstDay: parseInt(Spree.t('date_picker.first_day', { default: '0' }), 10),
-    monthNames: Spree.t('month_names'),
-    prevText: Spree.t('previous'),
-    nextText: Spree.t('next'),
-    showOn: "focus"
-  });
-
-  // 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 );
-  });
-}
-
 Spree.ready(function(){
-  handle_date_picker_fields();
   var uniqueId = 1;
   $('.spree_add_fields').click(function() {
     var target = $(this).data("target");

backend/app/assets/javascripts/spree/backend/datepicker.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Spree.ready(function(){
+  flatpickr.localize({
+    weekdays: {
+      shorthand: Spree.t('abbr_day_names')
+    },
+    months: {
+      longhand: Spree.t('month_names')
+    }
+  });
+
+  $('.datepicker').flatpickr({
+    allowInput: true
+  });
+
+  // Handle range dates
+  if ($('.date-range-filter .datepicker-from, .date-range-filter .datepicker-to').length) {
+    // Returns a callback for flatpickr onChange event which updates the
+    // respective range extremity flatpickr instance in order to have
+    // the left range extremity lower or equal to the right range extremity.
+    // This is accomplished swapping the range extremities when they are in the
+    // wrong order.
+    var swapDates = function($other, otherInstance, compareDates) {
+      return function(selectedDates, dateStr, instance) {
+        var date = instance.parseDate(dateStr);
+        var otherDateStr = $other.val();
+        var otherDate = instance.parseDate(otherDateStr);
+
+        if (date && otherDate && compareDates(date, otherDate)) {
+          instance.setDate(otherDate);
+          otherInstance.setDate(date);
+        }
+      }
+    }
+
+    var $left = $('.date-range-filter .datepicker-from');
+    var $right = $('.date-range-filter .datepicker-to');
+    var leftInstance = $left[0]._flatpickr;
+    var rightInstance = $right[0]._flatpickr;
+    var leftSwapDates = swapDates($right, rightInstance, function(date, otherDate) {
+      return date > otherDate
+    })
+    var rightSwapDates = swapDates($left, leftInstance, function(date, otherDate) {
+      return date < otherDate
+    })
+
+    leftInstance.config.onChange.push(leftSwapDates);
+    rightInstance.config.onChange.push(rightSwapDates);
+
+    // Execute swap dates check in order to correct possible wrong order at page
+    // load
+    leftSwapDates(null, $left.val(), leftInstance);
+  }
+});

backend/app/assets/stylesheets/spree/backend.css

@@ -6,6 +6,7 @@
  *= require jquery-ui/datepicker
  *= require jquery-ui/autocomplete
  *= require solidus_admin/select2
+ *= require solidus_admin/flatpickr/flatpickr
  *= require prism
 
  *= require spree/backend/spree_admin