From c8a3951830b08376113ce5861ac6a7d507c7517d Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 2 Feb 2021 16:12:45 +0100
Subject: [PATCH 01/27] add flatpickr

add flatpick as a yarn package and import it into the appropriate files (both js and scss)
---
 app/assets/javascripts/admin/all.js   | 17 +++++++++++++++++
 app/assets/stylesheets/admin/all.scss |  3 +++
 package.json                          |  4 +++-
 yarn.lock                             |  5 +++++
 4 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js
index dea5ac04a9..328a10b87b 100644
--- a/app/assets/javascripts/admin/all.js
+++ b/app/assets/javascripts/admin/all.js
@@ -24,6 +24,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
diff --git a/app/assets/stylesheets/admin/all.scss b/app/assets/stylesheets/admin/all.scss
index 9784acf9c1..c5138f8b06 100644
--- a/app/assets/stylesheets/admin/all.scss
+++ b/app/assets/stylesheets/admin/all.scss
@@ -12,6 +12,9 @@
  *= require shared/textAngular
  *= require shared/ng-tags-input.min
  *= require select2
+ *= require flatpickr/dist/flatpickr
+ *= require flatpickr/dist/themes/material_blue
+ *= require shortcut-buttons-flatpickr/dist/themes/light
 
  *= require_self
 */
diff --git a/package.json b/package.json
index a2728cf9b5..f9bbe28259 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
   },
   "license": "AGPL-3.0",
   "dependencies": {
-    "moment": "^2.29.1"
+    "flatpickr": "^4.6.9",
+    "moment": "^2.29.1",
+    "shortcut-buttons-flatpickr": "^0.3.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 299b19faf1..409d35b699 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -624,6 +624,11 @@ finalhandler@1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
+flatpickr@^4.6.9:
+  version "4.6.9"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499"
+  integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==
+
 follow-redirects@^1.0.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"

From 6cf172abc9f27607b7bf7b7e0b6b189c12177178 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 15 Jan 2021 15:39:38 +0100
Subject: [PATCH 02/27] add flatpickr to order cycle and .datetimepicker

Add your new date(time)picker on both order cycle and elements with class `.datetimepicker`
set the right options to datetimepicker
---
 .../order_cycles/order_cycles.js.erb.coffee      | 16 +---------------
 app/assets/javascripts/admin/util.js.erb         | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee b/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee
index 69735c4a33..72f560b414 100644
--- a/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee
+++ b/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee
@@ -3,21 +3,7 @@ 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, window.FLATPICKR_DATETIME_DEFAULT);
 
   .directive 'ofnOnChange', ->
     (scope, element, attrs) ->
diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb
index 373dba4767..d903d40d1e 100644
--- a/app/assets/javascripts/admin/util.js.erb
+++ b/app/assets/javascripts/admin/util.js.erb
@@ -24,7 +24,19 @@ $(document).ready(function(){
       stepMinute: 15
     }
   );
-  $('.datetimepicker').datetimepicker(window.JQUERY_UI_DATETIME_PICKER_DEFAULTS);
+  window.FLATPICKR_DATE_DEFAULT = {
+    dateFormat: "Y-m-d H:i",
+    locale: I18n.locale
+  }
+  window.FLATPICKR_DATETIME_DEFAULT = Object.assign(
+    {},
+    window.FLATPICKR_DATE_DEFAULT,
+    {
+      enableTime: true,
+      time_24hr: true,
+    }
+  );
+  flatpickr(".datetimepicker", window.FLATPICKR_DATETIME_DEFAULT);
   $('a.close').click(function(event){
     event.preventDefault();
     $(this).parent().slideUp(250);

From 4d9289c45b7faced61986bdb4a3b03d2389bf56d Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 15 Jan 2021 15:19:59 +0100
Subject: [PATCH 03/27] Render flatpickr `input` more enabled

by default, `input[readonly]` is styled as disable one. Using flatpickr with these disable inputs need to be customized. By clinking on it, it opens the datepicker widget.
---
 app/assets/stylesheets/admin/datepicker.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/admin/datepicker.scss b/app/assets/stylesheets/admin/datepicker.scss
index 87dcf4b786..3fadd59049 100644
--- a/app/assets/stylesheets/admin/datepicker.scss
+++ b/app/assets/stylesheets/admin/datepicker.scss
@@ -1,6 +1,10 @@
 input.datetimepicker {
   min-width: 12.9em;
 }
+.container input[readonly].datetimepicker {
+  background-color: white;
+  cursor: pointer;
+}
 
 img.ui-datepicker-trigger {
   margin-left: -1.75em;

From 4f7f8b559a49ed204b1f753119aefd000ca7b375 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 15 Jan 2021 15:31:10 +0100
Subject: [PATCH 04/27] localize flatpickr date format

Flatpickr can format date. Use a localized dateFormat.
---
 app/assets/javascripts/admin/util.js.erb            | 2 +-
 app/views/spree/admin/shared/_translations.html.erb | 3 +++
 config/locales/en.yml                               | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb
index d903d40d1e..f91c2b53f7 100644
--- a/app/assets/javascripts/admin/util.js.erb
+++ b/app/assets/javascripts/admin/util.js.erb
@@ -25,7 +25,7 @@ $(document).ready(function(){
     }
   );
   window.FLATPICKR_DATE_DEFAULT = {
-    dateFormat: "Y-m-d H:i",
+    dateFormat: Spree.translations.flatpickr_date_format,
     locale: I18n.locale
   }
   window.FLATPICKR_DATETIME_DEFAULT = Object.assign(
diff --git a/app/views/spree/admin/shared/_translations.html.erb b/app/views/spree/admin/shared/_translations.html.erb
index 5daa7234b3..0db2a03330 100644
--- a/app/views/spree/admin/shared/_translations.html.erb
+++ b/app/views/spree/admin/shared/_translations.html.erb
@@ -3,6 +3,9 @@
   { :date_picker    => Spree.t(:js_format,
                               :scope => 'date_picker',
                               :default => 'yy/mm/dd'),
+    :flatpickr_date_format    => Spree.t(:flatpickr_date_format,
+                              :scope => 'date_picker',
+                              :default => 'Y-m-d H:i'),
     :abbr_day_names           => I18n.t(:abbr_day_names, :scope => :date),
     :add                      => I18n.t(:add, scope: :actions),
     :are_you_sure_delete      => Spree.t(:are_you_sure_delete),
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ba57144201..f675e32d23 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3595,6 +3595,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
     date_picker:
       format: ! '%Y-%m-%d'
       js_format: 'yy-mm-dd'
+      flatpickr_date_format: "Y-m-d H:i"
     orders:
       error_flash_for_unavailable_items: "An item in your cart has become unavailable. Please update the selected quantities."
       edit:

From e06ea6ccd31ac2720322dfe3a52ea4e4a04c3e22 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 15 Jan 2021 15:34:09 +0100
Subject: [PATCH 05/27] remove unused options

as we use flatpickr, we don't need these options
---
 app/assets/javascripts/admin/util.js.erb      | 25 -------------------
 .../spree/admin/shared/_translations.html.erb |  5 +---
 config/locales/en.yml                         |  2 --
 3 files changed, 1 insertion(+), 31 deletions(-)

diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb
index f91c2b53f7..61ca9a3087 100644
--- a/app/assets/javascripts/admin/util.js.erb
+++ b/app/assets/javascripts/admin/util.js.erb
@@ -1,29 +1,4 @@
 $(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
-  }
-
-  window.JQUERY_UI_DATETIME_PICKER_DEFAULTS = Object.assign(
-    {},
-    window.JQUERY_UI_DATE_PICKER_DEFAULTS,
-    {
-      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
-    }
-  );
   window.FLATPICKR_DATE_DEFAULT = {
     dateFormat: Spree.translations.flatpickr_date_format,
     locale: I18n.locale
diff --git a/app/views/spree/admin/shared/_translations.html.erb b/app/views/spree/admin/shared/_translations.html.erb
index 0db2a03330..8711706cac 100644
--- a/app/views/spree/admin/shared/_translations.html.erb
+++ b/app/views/spree/admin/shared/_translations.html.erb
@@ -1,9 +1,6 @@
 <script>
   Spree.translations = <%==
-  { :date_picker    => Spree.t(:js_format,
-                              :scope => 'date_picker',
-                              :default => 'yy/mm/dd'),
-    :flatpickr_date_format    => Spree.t(:flatpickr_date_format,
+  {:flatpickr_date_format    => Spree.t(:flatpickr_date_format,
                               :scope => 'date_picker',
                               :default => 'Y-m-d H:i'),
     :abbr_day_names           => I18n.t(:abbr_day_names, :scope => :date),
diff --git a/config/locales/en.yml b/config/locales/en.yml
index f675e32d23..97f2e5a4bc 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3593,8 +3593,6 @@ See the %{link} to find out more about %{sitename}'s features and to start using
           or_enter_new_card: "Or, enter details for a new card:"
           remember_this_card: Remember this card?
     date_picker:
-      format: ! '%Y-%m-%d'
-      js_format: 'yy-mm-dd'
       flatpickr_date_format: "Y-m-d H:i"
     orders:
       error_flash_for_unavailable_items: "An item in your cart has become unavailable. Please update the selected quantities."

From a5d58ea36c5ae19d4c49f0c02847a221d500187b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 15 Jan 2021 15:57:37 +0100
Subject: [PATCH 06/27] change css selector and use a precise one

Be more precise on selector. `flatpickr-input` is more selective.
---
 app/assets/stylesheets/admin/datepicker.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/admin/datepicker.scss b/app/assets/stylesheets/admin/datepicker.scss
index 3fadd59049..e47a8ffb67 100644
--- a/app/assets/stylesheets/admin/datepicker.scss
+++ b/app/assets/stylesheets/admin/datepicker.scss
@@ -1,7 +1,8 @@
 input.datetimepicker {
   min-width: 12.9em;
 }
-.container input[readonly].datetimepicker {
+
+.container input[readonly].flatpickr-input {
   background-color: white;
   cursor: pointer;
 }

From 6c3ededb0ba8cd095eddd9363ce387a1721bb2b4 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 18 Jan 2021 11:44:44 +0100
Subject: [PATCH 07/27] apply flatpickr on element

 - update flatpickr instance value with `onOpen` callback
---
 .../admin/order_cycles/order_cycles.js.erb.coffee     |  6 +++++-
 .../admin/utils/directives/date_picker.js.coffee      | 11 +++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee b/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee
index 72f560b414..2786b34608 100644
--- a/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee
+++ b/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee
@@ -3,7 +3,11 @@ angular.module('admin.orderCycles', ['ngTagsInput', 'admin.indexUtils', 'admin.e
     require: "ngModel"
     link: (scope, element, attrs, ngModel) ->
       $timeout ->
-        flatpickr(element, window.FLATPICKR_DATETIME_DEFAULT);
+        flatpickr(element,  Object.assign({},
+                            window.FLATPICKR_DATETIME_DEFAULT, {
+                            onOpen: (selectedDates, dateStr, instance) ->
+                              instance.setDate(ngModel.$modelValue)
+                            }));
 
   .directive 'ofnOnChange', ->
     (scope, element, attrs) ->
diff --git a/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee b/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee
index c6c8b4fba6..662665e1ea 100644
--- a/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee
+++ b/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee
@@ -1,9 +1,8 @@
 angular.module("admin.utils").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
+      flatpickr(element,  Object.assign({},
+                          window.FLATPICKR_DATE_DEFAULT, {
+                          onOpen: (selectedDates, dateStr, instance) ->
+                            instance.setDate(ngModel.$modelValue)
+                          }));

From 947a9da18b5e0583548c4bc95b5d0a4ce9188900 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 18 Jan 2021 11:51:13 +0100
Subject: [PATCH 08/27] remove useless translations

as flatpickr is already translated
---
 .../javascripts/admin/spree/base.js.erb       | 34 -------------------
 .../spree/admin/shared/_translations.html.erb |  2 --
 2 files changed, 36 deletions(-)

diff --git a/app/assets/javascripts/admin/spree/base.js.erb b/app/assets/javascripts/admin/spree/base.js.erb
index 4b9bf8216f..8a2015d786 100644
--- a/app/assets/javascripts/admin/spree/base.js.erb
+++ b/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';
diff --git a/app/views/spree/admin/shared/_translations.html.erb b/app/views/spree/admin/shared/_translations.html.erb
index 8711706cac..13a4a6dd61 100644
--- a/app/views/spree/admin/shared/_translations.html.erb
+++ b/app/views/spree/admin/shared/_translations.html.erb
@@ -3,7 +3,6 @@
   {:flatpickr_date_format    => Spree.t(:flatpickr_date_format,
                               :scope => 'date_picker',
                               :default => 'Y-m-d H:i'),
-    :abbr_day_names           => I18n.t(:abbr_day_names, :scope => :date),
     :add                      => I18n.t(:add, scope: :actions),
     :are_you_sure_delete      => Spree.t(:are_you_sure_delete),
     :bill_address             => I18n.t(:bill_address),
@@ -13,7 +12,6 @@
     :destroy                  => I18n.t(:destroy, scope: :actions),
     :edit                     => Spree.t(:edit),
     :loading                  => Spree.t(:loading),
-    :month_names              => I18n.t(:month_names, :scope => :date).reject(&:blank?),
     :more                     => Spree.t(:more),
     :datetime_ui_current_text => I18n.t('datetime_picker_ui.current_text'),
     :datetime_ui_close_text   => I18n.t('datetime_picker_ui.close_text'),

From 2ce361c655323e954079d75313e9902e31785a23 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 18 Jan 2021 12:12:24 +0100
Subject: [PATCH 09/27] code climate update

"color white should be written in hexadecimal form as #ffffff"
---
 app/assets/stylesheets/admin/datepicker.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/admin/datepicker.scss b/app/assets/stylesheets/admin/datepicker.scss
index e47a8ffb67..176415d930 100644
--- a/app/assets/stylesheets/admin/datepicker.scss
+++ b/app/assets/stylesheets/admin/datepicker.scss
@@ -3,7 +3,7 @@ input.datetimepicker {
 }
 
 .container input[readonly].flatpickr-input {
-  background-color: white;
+  background-color: #ffffff;
   cursor: pointer;
 }
 

From 329ec3455fa94b03e5ccc97c4cbea653dc7f5094 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 19 Jan 2021 16:06:14 +0100
Subject: [PATCH 10/27] update order_cycles (both list and simple) tests

As we know use a new datepicker (flatpickr), we need to update our test.
---
 spec/features/admin/order_cycles/list_spec.rb | 10 ++-
 .../admin/order_cycles/simple_spec.rb         | 64 +++++++++----------
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/spec/features/admin/order_cycles/list_spec.rb b/spec/features/admin/order_cycles/list_spec.rb
index a7a4890511..8e2e47c0ab 100644
--- a/spec/features/admin/order_cycles/list_spec.rb
+++ b/spec/features/admin/order_cycles/list_spec.rb
@@ -132,14 +132,12 @@ feature '
 
         within("tr.order-cycle-#{oc_pt.id}") do
           expect(find('input.datetimepicker', match: :first).value).to start_with '2012-01-01 00:00'
-          find('img.ui-datepicker-trigger', match: :first).click
+          find('input.datetimepicker', match: :first).click
         end
 
-        within("#ui-datepicker-div") do
-          expect(page).to have_selector 'a.ui-state-active', text: '1'
-
-          click_link '30'
-          find('button.ui-datepicker-close', match: :first).click
+        within(".flatpickr-calendar.open") do
+          expect(page).to have_selector '.flatpickr-day.selected', text: '1'
+          find('.dayContainer .flatpickr-day', text: "30").click
         end
 
         within("tr.order-cycle-#{oc_pt.id}") do
diff --git a/spec/features/admin/order_cycles/simple_spec.rb b/spec/features/admin/order_cycles/simple_spec.rb
index 1deeb40933..614401248e 100644
--- a/spec/features/admin/order_cycles/simple_spec.rb
+++ b/spec/features/admin/order_cycles/simple_spec.rb
@@ -12,63 +12,63 @@ feature '
 
   scenario "updating many order cycle opening/closing times at once", js: true do
     # Given three order cycles
-    oc1 = create(:simple_order_cycle)
-    oc2 = create(:simple_order_cycle)
+    oc1 = create(:simple_order_cycle,
+                  orders_open_at: Time.zone.local(2000, 12, 12, 12, 12, 0),
+                  orders_close_at: Time.zone.local(2041, 12, 12, 12, 12, 1))
+    oc2 = create(:simple_order_cycle,
+                  orders_open_at: Time.zone.local(2000, 12, 12, 12, 12, 2),
+                  orders_close_at: Time.zone.local(2041, 12, 12, 12, 12, 3))
     oc3 = create(:simple_order_cycle,
-                 orders_open_at: Time.zone.local(2040, 12, 12, 12, 12, 12),
-                 orders_close_at: Time.zone.local(2041, 12, 12, 12, 12, 12))
+                 orders_open_at: Time.zone.local(2040, 12, 12, 12, 12, 4),
+                 orders_close_at: Time.zone.local(2041, 12, 12, 12, 12, 5))
 
     # When I go to the order cycles page
     login_as_admin_and_visit admin_order_cycles_path
 
-    # And I fill in some new opening/closing times and save them
-    within("tr.order-cycle-#{oc1.id}") do
-      find("input#oc#{oc1.id}_name").set "Updated Order Cycle 1"
-      find("input#oc#{oc1.id}_orders_open_at").set "2040-12-01 12:00:00"
-      find("input#oc#{oc1.id}_orders_close_at").set "2040-12-01 12:00:01"
+    # And I fill in a time using the datepicker
+    within("tr.order-cycle-#{oc2.id} .orders_open_at") do
+      # When I trigger the datepicker
+      find('input.datetimepicker', match: :first).click
     end
 
+    within(".flatpickr-calendar.open") do
+      # Then select first of month 
+     find('.dayContainer .flatpickr-day', text: "1").click
+   end
+
     within("tr.order-cycle-#{oc2.id}") do
-      find("input#oc#{oc2.id}_name").set "Updated Order Cycle 2"
-      find("input#oc#{oc2.id}_orders_open_at").set "2040-12-01 12:00:02"
-      find("input#oc#{oc2.id}_orders_close_at").set "2040-12-01 12:00:03"
+      # Then that date/time should appear on the form
+      expect(find("input#oc#{oc2.id}_orders_open_at").value).to eq "2000-12-01 12:12"
     end
 
     # And I fill in a time using the datepicker
-    within("tr.order-cycle-#{oc3.id}") do
+    within("tr.order-cycle-#{oc3.id} .orders_close_at") do
       # When I trigger the datepicker
-      find('img.ui-datepicker-trigger', match: :first).click
+      find('input.datetimepicker', match: :first).click
     end
 
-    within("#ui-datepicker-div") do
-      # Then it should display the correct date/time
-      expect(page).to have_selector 'span.ui-datepicker-month', text: 'DECEMBER'
-      expect(page).to have_selector 'span.ui-datepicker-year', text: '2040'
-      expect(page).to have_selector 'a.ui-state-active', text: '12'
-
-      # When I fill in a new date/time
-      click_link '1'
-      click_button 'Done'
+    within(".flatpickr-calendar.open") do
+       # Then select first of month 
+      find('.dayContainer .flatpickr-day', text: "1").click
     end
 
     within("tr.order-cycle-#{oc3.id}") do
       # Then that date/time should appear on the form
-      expect(find("input#oc#{oc3.id}_orders_open_at").value).to eq "2040-12-01 00:00"
-
-      # Manually fill out time
-      find("input#oc#{oc3.id}_name").set "Updated Order Cycle 3"
-      find("input#oc#{oc3.id}_orders_open_at").set "2040-12-01 12:00:04"
-      find("input#oc#{oc3.id}_orders_close_at").set "2040-12-01 12:00:05"
+      expect(find("input#oc#{oc3.id}_orders_close_at").value).to eq "2041-12-01 12:12"
     end
 
+    # Manually fill out time
+    find("input#oc#{oc2.id}_name").set "Updated Order Cycle 2"
+    find("input#oc#{oc3.id}_name").set "Updated Order Cycle 3"
+
     click_button 'Save Changes'
 
     # Then my details should have been saved
     expect(page).to have_selector "#save-bar", text: "Order cycles have been updated."
     order_cycles = OrderCycle.order("id ASC")
-    expect(order_cycles.map(&:name)).to eq ["Updated Order Cycle 1", "Updated Order Cycle 2", "Updated Order Cycle 3"]
-    expect(order_cycles.map { |oc| oc.orders_open_at.sec }).to eq [0, 2, 4]
-    expect(order_cycles.map { |oc| oc.orders_close_at.sec }).to eq [1, 3, 5]
+    expect(order_cycles.map(&:name)).to eq ["Order Cycle 1", "Updated Order Cycle 2", "Updated Order Cycle 3"]
+    expect(order_cycles.map { |oc| oc.orders_open_at.sec }).to eq [0, 0, 4]
+    expect(order_cycles.map { |oc| oc.orders_close_at.sec }).to eq [1, 3, 0]
   end
 
   scenario "cloning an order cycle" do

From 079008d99be05aebfa31ca238ca588d8f40c9113 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 27 Jan 2021 18:04:28 +0100
Subject: [PATCH 11/27] introduce "Now" button

Throught the plugin: https://github.com/jcsmorais/shortcut-buttons-flatpickr
import js library via yarn
---
 app/assets/javascripts/admin/util.js.erb      | 36 ++++++++++++++++++-
 .../utils/directives/date_picker.js.coffee    | 15 ++++----
 yarn.lock                                     |  5 +++
 3 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb
index 61ca9a3087..42671fe6d9 100644
--- a/app/assets/javascripts/admin/util.js.erb
+++ b/app/assets/javascripts/admin/util.js.erb
@@ -1,7 +1,24 @@
 $(document).ready(function(){
   window.FLATPICKR_DATE_DEFAULT = {
     dateFormat: Spree.translations.flatpickr_date_format,
-    locale: I18n.locale
+    locale: I18n.locale,
+    plugins: [
+        ShortcutButtonsPlugin({
+          button: [{
+            label: "Today"
+          }],
+          label: "or",
+          onClick: (index, fp) => {
+            let date;
+            switch (index) {
+              case 0:
+                date = new Date();
+                break;
+            }
+            fp.setDate(date);
+          }
+        })
+      ]
   }
   window.FLATPICKR_DATETIME_DEFAULT = Object.assign(
     {},
@@ -9,6 +26,23 @@ $(document).ready(function(){
     {
       enableTime: true,
       time_24hr: true,
+      plugins: [
+        ShortcutButtonsPlugin({
+          button: [{
+            label: "Now"
+          }],
+          label: "or",
+          onClick: (index, fp) => {
+            let date;
+            switch (index) {
+              case 0:
+                date = new Date();
+                break;
+            }
+            fp.setDate(date);
+          }
+        })
+      ]
     }
   );
   flatpickr(".datetimepicker", window.FLATPICKR_DATETIME_DEFAULT);
diff --git a/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee b/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee
index 662665e1ea..455215f99e 100644
--- a/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee
+++ b/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee
@@ -1,8 +1,11 @@
-angular.module("admin.utils").directive "datepicker", ->
+angular.module("admin.utils").directive "datepicker", ($window, $timeout) ->
   require: "ngModel"
   link: (scope, element, attrs, ngModel) ->
-      flatpickr(element,  Object.assign({},
-                          window.FLATPICKR_DATE_DEFAULT, {
-                          onOpen: (selectedDates, dateStr, instance) ->
-                            instance.setDate(ngModel.$modelValue)
-                          }));
+    $timeout ->
+      flatpickr(element,  Object.assign(
+                            {},
+                            $window.FLATPICKR_DATE_DEFAULT, {
+                            onOpen: (selectedDates, dateStr, instance) ->
+                              instance.setDate(ngModel.$modelValue)
+                            }
+                          ));
diff --git a/yarn.lock b/yarn.lock
index 409d35b699..89026669fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1519,6 +1519,11 @@ setprototypeof@1.1.1:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
   integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
 
+shortcut-buttons-flatpickr@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/shortcut-buttons-flatpickr/-/shortcut-buttons-flatpickr-0.3.1.tgz#25ec705db8e7c80f0f81f5e160783102775ef529"
+  integrity sha512-zZRLJXF7WSeQJ0ZES+PdD1FI+yjBOufqOQ4AU5przR71Rhyekiw/6/JLA33zOqVkgR7QQ1NbVcuuSqNHHGneEg==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"

From 84b402675a179ddbc8b5677b1b64b12fe026d56c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 4 Feb 2021 14:23:49 +0100
Subject: [PATCH 12/27] force onChange events to fire

And so the "You have unsaved changes" bar appears
---
 app/assets/javascripts/admin/util.js.erb | 31 +++++++++---------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb
index 42671fe6d9..f2297cafcd 100644
--- a/app/assets/javascripts/admin/util.js.erb
+++ b/app/assets/javascripts/admin/util.js.erb
@@ -1,4 +1,13 @@
-$(document).ready(function(){
+$(document).ready(function() {
+  var onClickButtons = function(index, fp) {
+    var date;
+    switch (index) {
+      case 0:
+        date = new Date();
+        break;
+    }
+    fp.setDate(date, true);
+  }
   window.FLATPICKR_DATE_DEFAULT = {
     dateFormat: Spree.translations.flatpickr_date_format,
     locale: I18n.locale,
@@ -8,15 +17,7 @@ $(document).ready(function(){
             label: "Today"
           }],
           label: "or",
-          onClick: (index, fp) => {
-            let date;
-            switch (index) {
-              case 0:
-                date = new Date();
-                break;
-            }
-            fp.setDate(date);
-          }
+          onClick: onClickButtons
         })
       ]
   }
@@ -32,15 +33,7 @@ $(document).ready(function(){
             label: "Now"
           }],
           label: "or",
-          onClick: (index, fp) => {
-            let date;
-            switch (index) {
-              case 0:
-                date = new Date();
-                break;
-            }
-            fp.setDate(date);
-          }
+          onClick: onClickButtons
         })
       ]
     }

From 83f5d49ce2d4647c3579eb8339c8b96e47a1fd18 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 21 Jan 2021 11:34:54 +0100
Subject: [PATCH 13/27] remove references to jquery-ui datetimepicker

need to add dialog module from jquery-ui
---
 app/assets/javascripts/admin/all.js           |    1 -
 app/assets/stylesheets/admin/all.scss         |    5 +-
 .../admin/components/date-picker.scss         |  148 +-
 .../plugins/flatpickr-customization.scss      |   46 +
 .../javascripts/jquery-ui-timepicker-addon.js | 2291 -----------------
 .../jquery-ui-timepicker-addon.css            |   30 -
 .../stylesheets/jquery-ui.datepicker.css      |  357 ---
 7 files changed, 50 insertions(+), 2828 deletions(-)
 create mode 100644 app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
 delete mode 100644 vendor/assets/javascripts/jquery-ui-timepicker-addon.js
 delete mode 100644 vendor/assets/stylesheets/jquery-ui-timepicker-addon.css
 delete mode 100644 vendor/assets/stylesheets/jquery-ui.datepicker.css

diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js
index 328a10b87b..8224966978 100644
--- a/app/assets/javascripts/admin/all.js
+++ b/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
diff --git a/app/assets/stylesheets/admin/all.scss b/app/assets/stylesheets/admin/all.scss
index c5138f8b06..12635372f3 100644
--- a/app/assets/stylesheets/admin/all.scss
+++ b/app/assets/stylesheets/admin/all.scss
@@ -7,8 +7,7 @@
  *= require normalize
  *= require responsive-tables
  *= require jquery.powertip
- *= require jquery.ui.datepicker
- *= require jquery-ui-timepicker-addon
+ *= require jquery.ui.dialog
  *= require shared/textAngular
  *= require shared/ng-tags-input.min
  *= require select2
@@ -32,6 +31,8 @@
 @import 'shared/forms';
 @import 'shared/layout';
 
+@import 'plugins/flatpickr-customization';
+
 @import 'plugins/powertip';
 @import 'plugins/jstree';
 @import 'plugins/font-awesome';
diff --git a/app/assets/stylesheets/admin/components/date-picker.scss b/app/assets/stylesheets/admin/components/date-picker.scss
index f54f33d5b5..2550f46d76 100644
--- a/app/assets/stylesheets/admin/components/date-picker.scss
+++ b/app/assets/stylesheets/admin/components/date-picker.scss
@@ -9,150 +9,4 @@
   input.datepicker {
     width: 96px !important;
   }
-}
-
-#ui-datepicker-div {
-  @include border-radius($border-radius);
-  border-color: $color-3;
-  padding: 0;
-  margin-top: 10px;
-
-  &:before {
-    content: '';
-    position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid $color-3;
-    top: 0px;
-    margin-top: -10px;
-    left: 25px;
-    z-index: 1;
-  }
-
-  .ui-datepicker-header {
-    padding: 0;
-    background-image: none;
-    background-color: $color-3;
-    border: none;
-    border-bottom: none;
-    border-radius: 0;
-    height: 32px;
-
-    .ui-datepicker-prev, .ui-datepicker-next {
-      border-radius: 0;      
-      top: 0;
-      height: 32px;
-
-      &:hover {
-        border: none;
-        background-image: none;
-        background-color: $color-3;
-        cursor: pointer;
-      }
-
-      .ui-icon {
-        background-image: none;
-        text-indent: 0;
-        color: $color-1;
-        width: 10px;
-        margin-left: -5px;
-        @extend [class^="icon-"]:before;
-
-        &:hover {
-          color: very-light($color-2, 25);
-        }
-      }
-    }
-    .ui-datepicker-prev {
-      left: 0;
-
-      .ui-icon {
-        @extend .icon-arrow-left;        
-      }
-    }
-    .ui-datepicker-next {
-      right: 0;
-
-      .ui-icon {
-        @extend .icon-arrow-right;
-      }
-
-      &:hover {
-        .ui-icon {
-          margin-left: -5px;
-        }        
-      }
-    }
-
-    .ui-datepicker-title {
-      color: $color-1;
-      text-transform: uppercase;
-      font-size: 85% !important;
-      padding: 6px 10px;
-    }
-  }
-
-  table.ui-datepicker-calendar {
-    border: none;
-
-    thead {
-      th { 
-        border-bottom: 1px solid $color-border;
-        border-right: 1px solid $color-border;
-        color: $color-body-text;
-        width: 33px;
-
-        &:last-child {
-          border-right: none;
-        }
-      }
-    }
-    tbody {
-      tr:hover {
-        td {
-          background-color: transparent !important;
-        }
-      }
-      &:last-child tr:last-child td {
-        border-bottom: none;
-      }
-      td {
-        a {
-          border: 1px solid transparent;
-          background-color: $color-1;
-          background-image: none;
-          font-size: 85%;
-          color: $color-body-text;
-
-          &.ui-state-active {
-            background-color: $color-2;
-            color: $color-1;
-          }
-
-          &:hover {
-            background-color: $color-2;
-            color: $color-1;
-            border-color: darken($color-2, 5);
-
-          }
-        }
-
-        &.ui-state-disabled {
-          .ui-state-default {
-            border: none;
-            background-image: none;
-            background-color: transparent;
-          }
-        }
-
-        &.ui-datepicker-today {
-          a {
-            background-color: $color-6;
-            color: $color-1;
-            border: 1px solid darken($color-6, 5);
-          }
-        }
-      }      
-    }
-  }
-}
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
new file mode 100644
index 0000000000..70090c9223
--- /dev/null
+++ b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
@@ -0,0 +1,46 @@
+.flatpickr-calendar {
+    border-radius: 0;
+    &.arrowBottom:after {
+        border-top-color: #eceef1;
+    }
+    &.arrowTop:after {
+        border-bottom-color: #5498DA;
+    }
+    .flatpickr-months .flatpickr-month {
+        border-radius: 0;
+    }
+    .flatpickr-months .flatpickr-month,
+    .flatpickr-current-month .flatpickr-monthDropdown-months {
+        background: #5498DA;
+    }
+        
+    .flatpickr-weekdays {
+        background: #5498DA;
+        span.flatpickr-weekday {
+            background: #5498DA;
+        }
+    }
+  
+    .flatpickr-day.selected,
+    .flatpickr-day.startRange,
+    .flatpickr-day.endRange,
+    .flatpickr-day.selected.inRange,
+    .flatpickr-day.startRange.inRange,
+    .flatpickr-day.endRange.inRange,
+    .flatpickr-day.selected:focus,
+    .flatpickr-day.startRange:focus,
+    .flatpickr-day.endRange:focus,
+    .flatpickr-day.selected:hover,
+    .flatpickr-day.startRange:hover,
+    .flatpickr-day.endRange:hover,
+    .flatpickr-day.selected.prevMonthDay,
+    .flatpickr-day.startRange.prevMonthDay,
+    .flatpickr-day.endRange.prevMonthDay,
+    .flatpickr-day.selected.nextMonthDay,
+    .flatpickr-day.startRange.nextMonthDay,
+    .flatpickr-day.endRange.nextMonthDay {
+        background: #5498DA;
+        border-color: #5498DA;
+    }
+
+}
\ No newline at end of file
diff --git a/vendor/assets/javascripts/jquery-ui-timepicker-addon.js b/vendor/assets/javascripts/jquery-ui-timepicker-addon.js
deleted file mode 100644
index d37bc02b48..0000000000
--- a/vendor/assets/javascripts/jquery-ui-timepicker-addon.js
+++ /dev/null
@@ -1,2291 +0,0 @@
-/*! jQuery Timepicker Addon - v1.6.3 - 2016-04-20
-* http://trentrichardson.com/examples/timepicker
-* Copyright (c) 2016 Trent Richardson; Licensed MIT */
-(function (factory) {
-	if (typeof define === 'function' && define.amd) {
-		define(['jquery', 'jquery-ui'], factory);
-	} else {
-		factory(jQuery);
-	}
-}(function ($) {
-
-	/*
-	* Lets not redefine timepicker, Prevent "Uncaught RangeError: Maximum call stack size exceeded"
-	*/
-	$.ui.timepicker = $.ui.timepicker || {};
-	if ($.ui.timepicker.version) {
-		return;
-	}
-
-	/*
-	* Extend jQueryUI, get it started with our version number
-	*/
-	$.extend($.ui, {
-		timepicker: {
-			version: "1.6.3"
-		}
-	});
-
-	/*
-	* Timepicker manager.
-	* Use the singleton instance of this class, $.timepicker, to interact with the time picker.
-	* Settings for (groups of) time pickers are maintained in an instance object,
-	* allowing multiple different settings on the same page.
-	*/
-	var Timepicker = function () {
-		this.regional = []; // Available regional settings, indexed by language code
-		this.regional[''] = { // Default regional settings
-			currentText: 'Now',
-			closeText: 'Done',
-			amNames: ['AM', 'A'],
-			pmNames: ['PM', 'P'],
-			timeFormat: 'HH:mm',
-			timeSuffix: '',
-			timeOnlyTitle: 'Choose Time',
-			timeText: 'Time',
-			hourText: 'Hour',
-			minuteText: 'Minute',
-			secondText: 'Second',
-			millisecText: 'Millisecond',
-			microsecText: 'Microsecond',
-			timezoneText: 'Time Zone',
-			isRTL: false
-		};
-		this._defaults = { // Global defaults for all the datetime picker instances
-			showButtonPanel: true,
-			timeOnly: false,
-			timeOnlyShowDate: false,
-			showHour: null,
-			showMinute: null,
-			showSecond: null,
-			showMillisec: null,
-			showMicrosec: null,
-			showTimezone: null,
-			showTime: true,
-			stepHour: 1,
-			stepMinute: 1,
-			stepSecond: 1,
-			stepMillisec: 1,
-			stepMicrosec: 1,
-			hour: 0,
-			minute: 0,
-			second: 0,
-			millisec: 0,
-			microsec: 0,
-			timezone: null,
-			hourMin: 0,
-			minuteMin: 0,
-			secondMin: 0,
-			millisecMin: 0,
-			microsecMin: 0,
-			hourMax: 23,
-			minuteMax: 59,
-			secondMax: 59,
-			millisecMax: 999,
-			microsecMax: 999,
-			minDateTime: null,
-			maxDateTime: null,
-			maxTime: null,
-			minTime: null,
-			onSelect: null,
-			hourGrid: 0,
-			minuteGrid: 0,
-			secondGrid: 0,
-			millisecGrid: 0,
-			microsecGrid: 0,
-			alwaysSetTime: true,
-			separator: ' ',
-			altFieldTimeOnly: true,
-			altTimeFormat: null,
-			altSeparator: null,
-			altTimeSuffix: null,
-			altRedirectFocus: true,
-			pickerTimeFormat: null,
-			pickerTimeSuffix: null,
-			showTimepicker: true,
-			timezoneList: null,
-			addSliderAccess: false,
-			sliderAccessArgs: null,
-			controlType: 'slider',
-			oneLine: false,
-			defaultValue: null,
-			parse: 'strict',
-			afterInject: null
-		};
-		$.extend(this._defaults, this.regional['']);
-	};
-
-	$.extend(Timepicker.prototype, {
-		$input: null,
-		$altInput: null,
-		$timeObj: null,
-		inst: null,
-		hour_slider: null,
-		minute_slider: null,
-		second_slider: null,
-		millisec_slider: null,
-		microsec_slider: null,
-		timezone_select: null,
-		maxTime: null,
-		minTime: null,
-		hour: 0,
-		minute: 0,
-		second: 0,
-		millisec: 0,
-		microsec: 0,
-		timezone: null,
-		hourMinOriginal: null,
-		minuteMinOriginal: null,
-		secondMinOriginal: null,
-		millisecMinOriginal: null,
-		microsecMinOriginal: null,
-		hourMaxOriginal: null,
-		minuteMaxOriginal: null,
-		secondMaxOriginal: null,
-		millisecMaxOriginal: null,
-		microsecMaxOriginal: null,
-		ampm: '',
-		formattedDate: '',
-		formattedTime: '',
-		formattedDateTime: '',
-		timezoneList: null,
-		units: ['hour', 'minute', 'second', 'millisec', 'microsec'],
-		support: {},
-		control: null,
-
-		/*
-		* Override the default settings for all instances of the time picker.
-		* @param  {Object} settings  object - the new settings to use as defaults (anonymous object)
-		* @return {Object} the manager object
-		*/
-		setDefaults: function (settings) {
-			extendRemove(this._defaults, settings || {});
-			return this;
-		},
-
-		/*
-		* Create a new Timepicker instance
-		*/
-		_newInst: function ($input, opts) {
-			var tp_inst = new Timepicker(),
-				inlineSettings = {},
-				fns = {},
-				overrides, i;
-
-			for (var attrName in this._defaults) {
-				if (this._defaults.hasOwnProperty(attrName)) {
-					var attrValue = $input.attr('time:' + attrName);
-					if (attrValue) {
-						try {
-							inlineSettings[attrName] = eval(attrValue);
-						} catch (err) {
-							inlineSettings[attrName] = attrValue;
-						}
-					}
-				}
-			}
-
-			overrides = {
-				beforeShow: function (input, dp_inst) {
-					if ($.isFunction(tp_inst._defaults.evnts.beforeShow)) {
-						return tp_inst._defaults.evnts.beforeShow.call($input[0], input, dp_inst, tp_inst);
-					}
-				},
-				onChangeMonthYear: function (year, month, dp_inst) {
-					// Update the time as well : this prevents the time from disappearing from the $input field.
-					// tp_inst._updateDateTime(dp_inst);
-					if ($.isFunction(tp_inst._defaults.evnts.onChangeMonthYear)) {
-						tp_inst._defaults.evnts.onChangeMonthYear.call($input[0], year, month, dp_inst, tp_inst);
-					}
-				},
-				onClose: function (dateText, dp_inst) {
-					if (tp_inst.timeDefined === true && $input.val() !== '') {
-						tp_inst._updateDateTime(dp_inst);
-					}
-					if ($.isFunction(tp_inst._defaults.evnts.onClose)) {
-						tp_inst._defaults.evnts.onClose.call($input[0], dateText, dp_inst, tp_inst);
-					}
-				}
-			};
-			for (i in overrides) {
-				if (overrides.hasOwnProperty(i)) {
-					fns[i] = opts[i] || this._defaults[i] || null;
-				}
-			}
-
-			tp_inst._defaults = $.extend({}, this._defaults, inlineSettings, opts, overrides, {
-				evnts: fns,
-				timepicker: tp_inst // add timepicker as a property of datepicker: $.datepicker._get(dp_inst, 'timepicker');
-			});
-			tp_inst.amNames = $.map(tp_inst._defaults.amNames, function (val) {
-				return val.toUpperCase();
-			});
-			tp_inst.pmNames = $.map(tp_inst._defaults.pmNames, function (val) {
-				return val.toUpperCase();
-			});
-
-			// detect which units are supported
-			tp_inst.support = detectSupport(
-					tp_inst._defaults.timeFormat +
-					(tp_inst._defaults.pickerTimeFormat ? tp_inst._defaults.pickerTimeFormat : '') +
-					(tp_inst._defaults.altTimeFormat ? tp_inst._defaults.altTimeFormat : ''));
-
-			// controlType is string - key to our this._controls
-			if (typeof(tp_inst._defaults.controlType) === 'string') {
-				if (tp_inst._defaults.controlType === 'slider' && typeof($.ui.slider) === 'undefined') {
-					tp_inst._defaults.controlType = 'select';
-				}
-				tp_inst.control = tp_inst._controls[tp_inst._defaults.controlType];
-			}
-			// controlType is an object and must implement create, options, value methods
-			else {
-				tp_inst.control = tp_inst._defaults.controlType;
-			}
-
-			// prep the timezone options
-			var timezoneList = [-720, -660, -600, -570, -540, -480, -420, -360, -300, -270, -240, -210, -180, -120, -60,
-					0, 60, 120, 180, 210, 240, 270, 300, 330, 345, 360, 390, 420, 480, 525, 540, 570, 600, 630, 660, 690, 720, 765, 780, 840];
-			if (tp_inst._defaults.timezoneList !== null) {
-				timezoneList = tp_inst._defaults.timezoneList;
-			}
-			var tzl = timezoneList.length, tzi = 0, tzv = null;
-			if (tzl > 0 && typeof timezoneList[0] !== 'object') {
-				for (; tzi < tzl; tzi++) {
-					tzv = timezoneList[tzi];
-					timezoneList[tzi] = { value: tzv, label: $.timepicker.timezoneOffsetString(tzv, tp_inst.support.iso8601) };
-				}
-			}
-			tp_inst._defaults.timezoneList = timezoneList;
-
-			// set the default units
-			tp_inst.timezone = tp_inst._defaults.timezone !== null ? $.timepicker.timezoneOffsetNumber(tp_inst._defaults.timezone) :
-							((new Date()).getTimezoneOffset() * -1);
-			tp_inst.hour = tp_inst._defaults.hour < tp_inst._defaults.hourMin ? tp_inst._defaults.hourMin :
-							tp_inst._defaults.hour > tp_inst._defaults.hourMax ? tp_inst._defaults.hourMax : tp_inst._defaults.hour;
-			tp_inst.minute = tp_inst._defaults.minute < tp_inst._defaults.minuteMin ? tp_inst._defaults.minuteMin :
-							tp_inst._defaults.minute > tp_inst._defaults.minuteMax ? tp_inst._defaults.minuteMax : tp_inst._defaults.minute;
-			tp_inst.second = tp_inst._defaults.second < tp_inst._defaults.secondMin ? tp_inst._defaults.secondMin :
-							tp_inst._defaults.second > tp_inst._defaults.secondMax ? tp_inst._defaults.secondMax : tp_inst._defaults.second;
-			tp_inst.millisec = tp_inst._defaults.millisec < tp_inst._defaults.millisecMin ? tp_inst._defaults.millisecMin :
-							tp_inst._defaults.millisec > tp_inst._defaults.millisecMax ? tp_inst._defaults.millisecMax : tp_inst._defaults.millisec;
-			tp_inst.microsec = tp_inst._defaults.microsec < tp_inst._defaults.microsecMin ? tp_inst._defaults.microsecMin :
-							tp_inst._defaults.microsec > tp_inst._defaults.microsecMax ? tp_inst._defaults.microsecMax : tp_inst._defaults.microsec;
-			tp_inst.ampm = '';
-			tp_inst.$input = $input;
-
-			if (tp_inst._defaults.altField) {
-				tp_inst.$altInput = $(tp_inst._defaults.altField);
-				if (tp_inst._defaults.altRedirectFocus === true) {
-					tp_inst.$altInput.css({
-						cursor: 'pointer'
-					}).focus(function () {
-						$input.trigger("focus");
-					});
-				}
-			}
-
-			if (tp_inst._defaults.minDate === 0 || tp_inst._defaults.minDateTime === 0) {
-				tp_inst._defaults.minDate = new Date();
-			}
-			if (tp_inst._defaults.maxDate === 0 || tp_inst._defaults.maxDateTime === 0) {
-				tp_inst._defaults.maxDate = new Date();
-			}
-
-			// datepicker needs minDate/maxDate, timepicker needs minDateTime/maxDateTime..
-			if (tp_inst._defaults.minDate !== undefined && tp_inst._defaults.minDate instanceof Date) {
-				tp_inst._defaults.minDateTime = new Date(tp_inst._defaults.minDate.getTime());
-			}
-			if (tp_inst._defaults.minDateTime !== undefined && tp_inst._defaults.minDateTime instanceof Date) {
-				tp_inst._defaults.minDate = new Date(tp_inst._defaults.minDateTime.getTime());
-			}
-			if (tp_inst._defaults.maxDate !== undefined && tp_inst._defaults.maxDate instanceof Date) {
-				tp_inst._defaults.maxDateTime = new Date(tp_inst._defaults.maxDate.getTime());
-			}
-			if (tp_inst._defaults.maxDateTime !== undefined && tp_inst._defaults.maxDateTime instanceof Date) {
-				tp_inst._defaults.maxDate = new Date(tp_inst._defaults.maxDateTime.getTime());
-			}
-			tp_inst.$input.bind('focus', function () {
-				tp_inst._onFocus();
-			});
-
-			return tp_inst;
-		},
-
-		/*
-		* add our sliders to the calendar
-		*/
-		_addTimePicker: function (dp_inst) {
-			var currDT = $.trim((this.$altInput && this._defaults.altFieldTimeOnly) ? this.$input.val() + ' ' + this.$altInput.val() : this.$input.val());
-
-			this.timeDefined = this._parseTime(currDT);
-			this._limitMinMaxDateTime(dp_inst, false);
-			this._injectTimePicker();
-			this._afterInject();
-		},
-
-		/*
-		* parse the time string from input value or _setTime
-		*/
-		_parseTime: function (timeString, withDate) {
-			if (!this.inst) {
-				this.inst = $.datepicker._getInst(this.$input[0]);
-			}
-
-			if (withDate || !this._defaults.timeOnly) {
-				var dp_dateFormat = $.datepicker._get(this.inst, 'dateFormat');
-				try {
-					var parseRes = parseDateTimeInternal(dp_dateFormat, this._defaults.timeFormat, timeString, $.datepicker._getFormatConfig(this.inst), this._defaults);
-					if (!parseRes.timeObj) {
-						return false;
-					}
-					$.extend(this, parseRes.timeObj);
-				} catch (err) {
-					$.timepicker.log("Error parsing the date/time string: " + err +
-									"\ndate/time string = " + timeString +
-									"\ntimeFormat = " + this._defaults.timeFormat +
-									"\ndateFormat = " + dp_dateFormat);
-					return false;
-				}
-				return true;
-			} else {
-				var timeObj = $.datepicker.parseTime(this._defaults.timeFormat, timeString, this._defaults);
-				if (!timeObj) {
-					return false;
-				}
-				$.extend(this, timeObj);
-				return true;
-			}
-		},
-
-		/*
-		* Handle callback option after injecting timepicker
-		*/
-		_afterInject: function() {
-			var o = this.inst.settings;
-			if ($.isFunction(o.afterInject)) {
-				o.afterInject.call(this);
-			}
-		},
-
-		/*
-		* generate and inject html for timepicker into ui datepicker
-		*/
-		_injectTimePicker: function () {
-			var $dp = this.inst.dpDiv,
-				o = this.inst.settings,
-				tp_inst = this,
-				litem = '',
-				uitem = '',
-				show = null,
-				max = {},
-				gridSize = {},
-				size = null,
-				i = 0,
-				l = 0;
-
-			// Prevent displaying twice
-			if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) {
-				var noDisplay = ' ui_tpicker_unit_hide',
-					html = '<div class="ui-timepicker-div' + (o.isRTL ? ' ui-timepicker-rtl' : '') + (o.oneLine && o.controlType === 'select' ? ' ui-timepicker-oneLine' : '') + '"><dl>' + '<dt class="ui_tpicker_time_label' + ((o.showTime) ? '' : noDisplay) + '">' + o.timeText + '</dt>' +
-								'<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"><input class="ui_tpicker_time_input" ' + (o.timeInput ? '' : 'disabled') + '/></dd>';
-
-				// Create the markup
-				for (i = 0, l = this.units.length; i < l; i++) {
-					litem = this.units[i];
-					uitem = litem.substr(0, 1).toUpperCase() + litem.substr(1);
-					show = o['show' + uitem] !== null ? o['show' + uitem] : this.support[litem];
-
-					// Added by Peter Medeiros:
-					// - Figure out what the hour/minute/second max should be based on the step values.
-					// - Example: if stepMinute is 15, then minMax is 45.
-					max[litem] = parseInt((o[litem + 'Max'] - ((o[litem + 'Max'] - o[litem + 'Min']) % o['step' + uitem])), 10);
-					gridSize[litem] = 0;
-
-					html += '<dt class="ui_tpicker_' + litem + '_label' + (show ? '' : noDisplay) + '">' + o[litem + 'Text'] + '</dt>' +
-								'<dd class="ui_tpicker_' + litem + (show ? '' : noDisplay) + '"><div class="ui_tpicker_' + litem + '_slider' + (show ? '' : noDisplay) + '"></div>';
-
-					if (show && o[litem + 'Grid'] > 0) {
-						html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
-
-						if (litem === 'hour') {
-							for (var h = o[litem + 'Min']; h <= max[litem]; h += parseInt(o[litem + 'Grid'], 10)) {
-								gridSize[litem]++;
-								var tmph = $.datepicker.formatTime(this.support.ampm ? 'hht' : 'HH', {hour: h}, o);
-								html += '<td data-for="' + litem + '">' + tmph + '</td>';
-							}
-						}
-						else {
-							for (var m = o[litem + 'Min']; m <= max[litem]; m += parseInt(o[litem + 'Grid'], 10)) {
-								gridSize[litem]++;
-								html += '<td data-for="' + litem + '">' + ((m < 10) ? '0' : '') + m + '</td>';
-							}
-						}
-
-						html += '</tr></table></div>';
-					}
-					html += '</dd>';
-				}
-
-				// Timezone
-				var showTz = o.showTimezone !== null ? o.showTimezone : this.support.timezone;
-				html += '<dt class="ui_tpicker_timezone_label' + (showTz ? '' : noDisplay) + '">' + o.timezoneText + '</dt>';
-				html += '<dd class="ui_tpicker_timezone' + (showTz ? '' : noDisplay) + '"></dd>';
-
-				// Create the elements from string
-				html += '</dl></div>';
-				var $tp = $(html);
-
-				// if we only want time picker...
-				if (o.timeOnly === true) {
-					$tp.prepend('<div class="ui-widget-header ui-helper-clearfix ui-corner-all">' + '<div class="ui-datepicker-title">' + o.timeOnlyTitle + '</div>' + '</div>');
-					$dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide();
-				}
-
-				// add sliders, adjust grids, add events
-				for (i = 0, l = tp_inst.units.length; i < l; i++) {
-					litem = tp_inst.units[i];
-					uitem = litem.substr(0, 1).toUpperCase() + litem.substr(1);
-					show = o['show' + uitem] !== null ? o['show' + uitem] : this.support[litem];
-
-					// add the slider
-					tp_inst[litem + '_slider'] = tp_inst.control.create(tp_inst, $tp.find('.ui_tpicker_' + litem + '_slider'), litem, tp_inst[litem], o[litem + 'Min'], max[litem], o['step' + uitem]);
-
-					// adjust the grid and add click event
-					if (show && o[litem + 'Grid'] > 0) {
-						size = 100 * gridSize[litem] * o[litem + 'Grid'] / (max[litem] - o[litem + 'Min']);
-						$tp.find('.ui_tpicker_' + litem + ' table').css({
-							width: size + "%",
-							marginLeft: o.isRTL ? '0' : ((size / (-2 * gridSize[litem])) + "%"),
-							marginRight: o.isRTL ? ((size / (-2 * gridSize[litem])) + "%") : '0',
-							borderCollapse: 'collapse'
-						}).find("td").click(function (e) {
-								var $t = $(this),
-									h = $t.html(),
-									n = parseInt(h.replace(/[^0-9]/g), 10),
-									ap = h.replace(/[^apm]/ig),
-									f = $t.data('for'); // loses scope, so we use data-for
-
-								if (f === 'hour') {
-									if (ap.indexOf('p') !== -1 && n < 12) {
-										n += 12;
-									}
-									else {
-										if (ap.indexOf('a') !== -1 && n === 12) {
-											n = 0;
-										}
-									}
-								}
-
-								tp_inst.control.value(tp_inst, tp_inst[f + '_slider'], litem, n);
-
-								tp_inst._onTimeChange();
-								tp_inst._onSelectHandler();
-							}).css({
-								cursor: 'pointer',
-								width: (100 / gridSize[litem]) + '%',
-								textAlign: 'center',
-								overflow: 'hidden'
-							});
-					} // end if grid > 0
-				} // end for loop
-
-				// Add timezone options
-				this.timezone_select = $tp.find('.ui_tpicker_timezone').append('<select></select>').find("select");
-				$.fn.append.apply(this.timezone_select,
-				$.map(o.timezoneList, function (val, idx) {
-					return $("<option />").val(typeof val === "object" ? val.value : val).text(typeof val === "object" ? val.label : val);
-				}));
-				if (typeof(this.timezone) !== "undefined" && this.timezone !== null && this.timezone !== "") {
-					var local_timezone = (new Date(this.inst.selectedYear, this.inst.selectedMonth, this.inst.selectedDay, 12)).getTimezoneOffset() * -1;
-					if (local_timezone === this.timezone) {
-						selectLocalTimezone(tp_inst);
-					} else {
-						this.timezone_select.val(this.timezone);
-					}
-				} else {
-					if (typeof(this.hour) !== "undefined" && this.hour !== null && this.hour !== "") {
-						this.timezone_select.val(o.timezone);
-					} else {
-						selectLocalTimezone(tp_inst);
-					}
-				}
-				this.timezone_select.change(function () {
-					tp_inst._onTimeChange();
-					tp_inst._onSelectHandler();
-					tp_inst._afterInject();
-				});
-				// End timezone options
-
-				// inject timepicker into datepicker
-				var $buttonPanel = $dp.find('.ui-datepicker-buttonpane');
-				if ($buttonPanel.length) {
-					$buttonPanel.before($tp);
-				} else {
-					$dp.append($tp);
-				}
-
-				this.$timeObj = $tp.find('.ui_tpicker_time_input');
-				this.$timeObj.change(function () {
-					var timeFormat = tp_inst.inst.settings.timeFormat;
-					var parsedTime = $.datepicker.parseTime(timeFormat, this.value);
-					var update = new Date();
-					if (parsedTime) {
-						update.setHours(parsedTime.hour);
-						update.setMinutes(parsedTime.minute);
-						update.setSeconds(parsedTime.second);
-						$.datepicker._setTime(tp_inst.inst, update);
-					} else {
-						this.value = tp_inst.formattedTime;
-						this.blur();
-					}
-				});
-
-				if (this.inst !== null) {
-					var timeDefined = this.timeDefined;
-					this._onTimeChange();
-					this.timeDefined = timeDefined;
-				}
-
-				// slideAccess integration: http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/
-				if (this._defaults.addSliderAccess) {
-					var sliderAccessArgs = this._defaults.sliderAccessArgs,
-						rtl = this._defaults.isRTL;
-					sliderAccessArgs.isRTL = rtl;
-
-					setTimeout(function () { // fix for inline mode
-						if ($tp.find('.ui-slider-access').length === 0) {
-							$tp.find('.ui-slider:visible').sliderAccess(sliderAccessArgs);
-
-							// fix any grids since sliders are shorter
-							var sliderAccessWidth = $tp.find('.ui-slider-access:eq(0)').outerWidth(true);
-							if (sliderAccessWidth) {
-								$tp.find('table:visible').each(function () {
-									var $g = $(this),
-										oldWidth = $g.outerWidth(),
-										oldMarginLeft = $g.css(rtl ? 'marginRight' : 'marginLeft').toString().replace('%', ''),
-										newWidth = oldWidth - sliderAccessWidth,
-										newMarginLeft = ((oldMarginLeft * newWidth) / oldWidth) + '%',
-										css = { width: newWidth, marginRight: 0, marginLeft: 0 };
-									css[rtl ? 'marginRight' : 'marginLeft'] = newMarginLeft;
-									$g.css(css);
-								});
-							}
-						}
-					}, 10);
-				}
-				// end slideAccess integration
-
-				tp_inst._limitMinMaxDateTime(this.inst, true);
-			}
-		},
-
-		/*
-		* This function tries to limit the ability to go outside the
-		* min/max date range
-		*/
-		_limitMinMaxDateTime: function (dp_inst, adjustSliders) {
-			var o = this._defaults,
-				dp_date = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay);
-
-			if (!this._defaults.showTimepicker) {
-				return;
-			} // No time so nothing to check here
-
-			if ($.datepicker._get(dp_inst, 'minDateTime') !== null && $.datepicker._get(dp_inst, 'minDateTime') !== undefined && dp_date) {
-				var minDateTime = $.datepicker._get(dp_inst, 'minDateTime'),
-					minDateTimeDate = new Date(minDateTime.getFullYear(), minDateTime.getMonth(), minDateTime.getDate(), 0, 0, 0, 0);
-
-				if (this.hourMinOriginal === null || this.minuteMinOriginal === null || this.secondMinOriginal === null || this.millisecMinOriginal === null || this.microsecMinOriginal === null) {
-					this.hourMinOriginal = o.hourMin;
-					this.minuteMinOriginal = o.minuteMin;
-					this.secondMinOriginal = o.secondMin;
-					this.millisecMinOriginal = o.millisecMin;
-					this.microsecMinOriginal = o.microsecMin;
-				}
-
-				if (dp_inst.settings.timeOnly || minDateTimeDate.getTime() === dp_date.getTime()) {
-					this._defaults.hourMin = minDateTime.getHours();
-					if (this.hour <= this._defaults.hourMin) {
-						this.hour = this._defaults.hourMin;
-						this._defaults.minuteMin = minDateTime.getMinutes();
-						if (this.minute <= this._defaults.minuteMin) {
-							this.minute = this._defaults.minuteMin;
-							this._defaults.secondMin = minDateTime.getSeconds();
-							if (this.second <= this._defaults.secondMin) {
-								this.second = this._defaults.secondMin;
-								this._defaults.millisecMin = minDateTime.getMilliseconds();
-								if (this.millisec <= this._defaults.millisecMin) {
-									this.millisec = this._defaults.millisecMin;
-									this._defaults.microsecMin = minDateTime.getMicroseconds();
-								} else {
-									if (this.microsec < this._defaults.microsecMin) {
-										this.microsec = this._defaults.microsecMin;
-									}
-									this._defaults.microsecMin = this.microsecMinOriginal;
-								}
-							} else {
-								this._defaults.millisecMin = this.millisecMinOriginal;
-								this._defaults.microsecMin = this.microsecMinOriginal;
-							}
-						} else {
-							this._defaults.secondMin = this.secondMinOriginal;
-							this._defaults.millisecMin = this.millisecMinOriginal;
-							this._defaults.microsecMin = this.microsecMinOriginal;
-						}
-					} else {
-						this._defaults.minuteMin = this.minuteMinOriginal;
-						this._defaults.secondMin = this.secondMinOriginal;
-						this._defaults.millisecMin = this.millisecMinOriginal;
-						this._defaults.microsecMin = this.microsecMinOriginal;
-					}
-				} else {
-					this._defaults.hourMin = this.hourMinOriginal;
-					this._defaults.minuteMin = this.minuteMinOriginal;
-					this._defaults.secondMin = this.secondMinOriginal;
-					this._defaults.millisecMin = this.millisecMinOriginal;
-					this._defaults.microsecMin = this.microsecMinOriginal;
-				}
-			}
-
-			if ($.datepicker._get(dp_inst, 'maxDateTime') !== null && $.datepicker._get(dp_inst, 'maxDateTime') !== undefined && dp_date) {
-				var maxDateTime = $.datepicker._get(dp_inst, 'maxDateTime'),
-					maxDateTimeDate = new Date(maxDateTime.getFullYear(), maxDateTime.getMonth(), maxDateTime.getDate(), 0, 0, 0, 0);
-
-				if (this.hourMaxOriginal === null || this.minuteMaxOriginal === null || this.secondMaxOriginal === null || this.millisecMaxOriginal === null) {
-					this.hourMaxOriginal = o.hourMax;
-					this.minuteMaxOriginal = o.minuteMax;
-					this.secondMaxOriginal = o.secondMax;
-					this.millisecMaxOriginal = o.millisecMax;
-					this.microsecMaxOriginal = o.microsecMax;
-				}
-
-				if (dp_inst.settings.timeOnly || maxDateTimeDate.getTime() === dp_date.getTime()) {
-					this._defaults.hourMax = maxDateTime.getHours();
-					if (this.hour >= this._defaults.hourMax) {
-						this.hour = this._defaults.hourMax;
-						this._defaults.minuteMax = maxDateTime.getMinutes();
-						if (this.minute >= this._defaults.minuteMax) {
-							this.minute = this._defaults.minuteMax;
-							this._defaults.secondMax = maxDateTime.getSeconds();
-							if (this.second >= this._defaults.secondMax) {
-								this.second = this._defaults.secondMax;
-								this._defaults.millisecMax = maxDateTime.getMilliseconds();
-								if (this.millisec >= this._defaults.millisecMax) {
-									this.millisec = this._defaults.millisecMax;
-									this._defaults.microsecMax = maxDateTime.getMicroseconds();
-								} else {
-									if (this.microsec > this._defaults.microsecMax) {
-										this.microsec = this._defaults.microsecMax;
-									}
-									this._defaults.microsecMax = this.microsecMaxOriginal;
-								}
-							} else {
-								this._defaults.millisecMax = this.millisecMaxOriginal;
-								this._defaults.microsecMax = this.microsecMaxOriginal;
-							}
-						} else {
-							this._defaults.secondMax = this.secondMaxOriginal;
-							this._defaults.millisecMax = this.millisecMaxOriginal;
-							this._defaults.microsecMax = this.microsecMaxOriginal;
-						}
-					} else {
-						this._defaults.minuteMax = this.minuteMaxOriginal;
-						this._defaults.secondMax = this.secondMaxOriginal;
-						this._defaults.millisecMax = this.millisecMaxOriginal;
-						this._defaults.microsecMax = this.microsecMaxOriginal;
-					}
-				} else {
-					this._defaults.hourMax = this.hourMaxOriginal;
-					this._defaults.minuteMax = this.minuteMaxOriginal;
-					this._defaults.secondMax = this.secondMaxOriginal;
-					this._defaults.millisecMax = this.millisecMaxOriginal;
-					this._defaults.microsecMax = this.microsecMaxOriginal;
-				}
-			}
-
-			if (dp_inst.settings.minTime!==null) {
-				var tempMinTime=new Date("01/01/1970 " + dp_inst.settings.minTime);
-				if (this.hour<tempMinTime.getHours()) {
-					this.hour=this._defaults.hourMin=tempMinTime.getHours();
-					this.minute=this._defaults.minuteMin=tempMinTime.getMinutes();
-				} else if (this.hour===tempMinTime.getHours() && this.minute<tempMinTime.getMinutes()) {
-					this.minute=this._defaults.minuteMin=tempMinTime.getMinutes();
-				} else {
-					if (this._defaults.hourMin<tempMinTime.getHours()) {
-						this._defaults.hourMin=tempMinTime.getHours();
-						this._defaults.minuteMin=tempMinTime.getMinutes();
-					} else if (this._defaults.hourMin===tempMinTime.getHours()===this.hour && this._defaults.minuteMin<tempMinTime.getMinutes()) {
-						this._defaults.minuteMin=tempMinTime.getMinutes();
-					} else {
-						this._defaults.minuteMin=0;
-					}
-				}
-			}
-
-			if (dp_inst.settings.maxTime!==null) {
-				var tempMaxTime=new Date("01/01/1970 " + dp_inst.settings.maxTime);
-				if (this.hour>tempMaxTime.getHours()) {
-					this.hour=this._defaults.hourMax=tempMaxTime.getHours();
-					this.minute=this._defaults.minuteMax=tempMaxTime.getMinutes();
-				} else if (this.hour===tempMaxTime.getHours() && this.minute>tempMaxTime.getMinutes()) {
-					this.minute=this._defaults.minuteMax=tempMaxTime.getMinutes();
-				} else {
-					if (this._defaults.hourMax>tempMaxTime.getHours()) {
-						this._defaults.hourMax=tempMaxTime.getHours();
-						this._defaults.minuteMax=tempMaxTime.getMinutes();
-					} else if (this._defaults.hourMax===tempMaxTime.getHours()===this.hour && this._defaults.minuteMax>tempMaxTime.getMinutes()) {
-						this._defaults.minuteMax=tempMaxTime.getMinutes();
-					} else {
-						this._defaults.minuteMax=59;
-					}
-				}
-			}
-
-			if (adjustSliders !== undefined && adjustSliders === true) {
-				var hourMax = parseInt((this._defaults.hourMax - ((this._defaults.hourMax - this._defaults.hourMin) % this._defaults.stepHour)), 10),
-					minMax = parseInt((this._defaults.minuteMax - ((this._defaults.minuteMax - this._defaults.minuteMin) % this._defaults.stepMinute)), 10),
-					secMax = parseInt((this._defaults.secondMax - ((this._defaults.secondMax - this._defaults.secondMin) % this._defaults.stepSecond)), 10),
-					millisecMax = parseInt((this._defaults.millisecMax - ((this._defaults.millisecMax - this._defaults.millisecMin) % this._defaults.stepMillisec)), 10),
-					microsecMax = parseInt((this._defaults.microsecMax - ((this._defaults.microsecMax - this._defaults.microsecMin) % this._defaults.stepMicrosec)), 10);
-
-				if (this.hour_slider) {
-					this.control.options(this, this.hour_slider, 'hour', { min: this._defaults.hourMin, max: hourMax, step: this._defaults.stepHour });
-					this.control.value(this, this.hour_slider, 'hour', this.hour - (this.hour % this._defaults.stepHour));
-				}
-				if (this.minute_slider) {
-					this.control.options(this, this.minute_slider, 'minute', { min: this._defaults.minuteMin, max: minMax, step: this._defaults.stepMinute });
-					this.control.value(this, this.minute_slider, 'minute', this.minute - (this.minute % this._defaults.stepMinute));
-				}
-				if (this.second_slider) {
-					this.control.options(this, this.second_slider, 'second', { min: this._defaults.secondMin, max: secMax, step: this._defaults.stepSecond });
-					this.control.value(this, this.second_slider, 'second', this.second - (this.second % this._defaults.stepSecond));
-				}
-				if (this.millisec_slider) {
-					this.control.options(this, this.millisec_slider, 'millisec', { min: this._defaults.millisecMin, max: millisecMax, step: this._defaults.stepMillisec });
-					this.control.value(this, this.millisec_slider, 'millisec', this.millisec - (this.millisec % this._defaults.stepMillisec));
-				}
-				if (this.microsec_slider) {
-					this.control.options(this, this.microsec_slider, 'microsec', { min: this._defaults.microsecMin, max: microsecMax, step: this._defaults.stepMicrosec });
-					this.control.value(this, this.microsec_slider, 'microsec', this.microsec - (this.microsec % this._defaults.stepMicrosec));
-				}
-			}
-
-		},
-
-		/*
-		* when a slider moves, set the internal time...
-		* on time change is also called when the time is updated in the text field
-		*/
-		_onTimeChange: function () {
-			if (!this._defaults.showTimepicker) {
-                                return;
-			}
-			var hour = (this.hour_slider) ? this.control.value(this, this.hour_slider, 'hour') : false,
-				minute = (this.minute_slider) ? this.control.value(this, this.minute_slider, 'minute') : false,
-				second = (this.second_slider) ? this.control.value(this, this.second_slider, 'second') : false,
-				millisec = (this.millisec_slider) ? this.control.value(this, this.millisec_slider, 'millisec') : false,
-				microsec = (this.microsec_slider) ? this.control.value(this, this.microsec_slider, 'microsec') : false,
-				timezone = (this.timezone_select) ? this.timezone_select.val() : false,
-				o = this._defaults,
-				pickerTimeFormat = o.pickerTimeFormat || o.timeFormat,
-				pickerTimeSuffix = o.pickerTimeSuffix || o.timeSuffix;
-
-			if (typeof(hour) === 'object') {
-				hour = false;
-			}
-			if (typeof(minute) === 'object') {
-				minute = false;
-			}
-			if (typeof(second) === 'object') {
-				second = false;
-			}
-			if (typeof(millisec) === 'object') {
-				millisec = false;
-			}
-			if (typeof(microsec) === 'object') {
-				microsec = false;
-			}
-			if (typeof(timezone) === 'object') {
-				timezone = false;
-			}
-
-			if (hour !== false) {
-				hour = parseInt(hour, 10);
-			}
-			if (minute !== false) {
-				minute = parseInt(minute, 10);
-			}
-			if (second !== false) {
-				second = parseInt(second, 10);
-			}
-			if (millisec !== false) {
-				millisec = parseInt(millisec, 10);
-			}
-			if (microsec !== false) {
-				microsec = parseInt(microsec, 10);
-			}
-			if (timezone !== false) {
-				timezone = timezone.toString();
-			}
-
-			var ampm = o[hour < 12 ? 'amNames' : 'pmNames'][0];
-
-			// If the update was done in the input field, the input field should not be updated.
-			// If the update was done using the sliders, update the input field.
-			var hasChanged = (
-						hour !== parseInt(this.hour,10) || // sliders should all be numeric
-						minute !== parseInt(this.minute,10) ||
-						second !== parseInt(this.second,10) ||
-						millisec !== parseInt(this.millisec,10) ||
-						microsec !== parseInt(this.microsec,10) ||
-						(this.ampm.length > 0 && (hour < 12) !== ($.inArray(this.ampm.toUpperCase(), this.amNames) !== -1)) ||
-						(this.timezone !== null && timezone !== this.timezone.toString()) // could be numeric or "EST" format, so use toString()
-					);
-
-			if (hasChanged) {
-
-				if (hour !== false) {
-					this.hour = hour;
-				}
-				if (minute !== false) {
-					this.minute = minute;
-				}
-				if (second !== false) {
-					this.second = second;
-				}
-				if (millisec !== false) {
-					this.millisec = millisec;
-				}
-				if (microsec !== false) {
-					this.microsec = microsec;
-				}
-				if (timezone !== false) {
-					this.timezone = timezone;
-				}
-
-				if (!this.inst) {
-					this.inst = $.datepicker._getInst(this.$input[0]);
-				}
-
-				this._limitMinMaxDateTime(this.inst, true);
-			}
-			if (this.support.ampm) {
-				this.ampm = ampm;
-			}
-
-			// Updates the time within the timepicker
-			this.formattedTime = $.datepicker.formatTime(o.timeFormat, this, o);
-			if (this.$timeObj) {
-				if (pickerTimeFormat === o.timeFormat) {
-					this.$timeObj.val(this.formattedTime + pickerTimeSuffix);
-				}
-				else {
-					this.$timeObj.val($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix);
-				}
-				if (this.$timeObj[0].setSelectionRange) {
-					var sPos = this.$timeObj[0].selectionStart;
-					var ePos = this.$timeObj[0].selectionEnd;
-					this.$timeObj[0].setSelectionRange(sPos, ePos);
-				}
-			}
-
-			this.timeDefined = true;
-			if (hasChanged) {
-				this._updateDateTime();
-				//this.$input.focus(); // may automatically open the picker on setDate
-			}
-		},
-
-		/*
-		* call custom onSelect.
-		* bind to sliders slidestop, and grid click.
-		*/
-		_onSelectHandler: function () {
-			var onSelect = this._defaults.onSelect || this.inst.settings.onSelect;
-			var inputEl = this.$input ? this.$input[0] : null;
-			if (onSelect && inputEl) {
-				onSelect.apply(inputEl, [this.formattedDateTime, this]);
-			}
-		},
-
-		/*
-		* update our input with the new date time..
-		*/
-		_updateDateTime: function (dp_inst) {
-			dp_inst = this.inst || dp_inst;
-			var dtTmp = (dp_inst.currentYear > 0?
-							new Date(dp_inst.currentYear, dp_inst.currentMonth, dp_inst.currentDay) :
-							new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay)),
-				dt = $.datepicker._daylightSavingAdjust(dtTmp),
-				//dt = $.datepicker._daylightSavingAdjust(new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay)),
-				//dt = $.datepicker._daylightSavingAdjust(new Date(dp_inst.currentYear, dp_inst.currentMonth, dp_inst.currentDay)),
-				dateFmt = $.datepicker._get(dp_inst, 'dateFormat'),
-				formatCfg = $.datepicker._getFormatConfig(dp_inst),
-				timeAvailable = dt !== null && this.timeDefined;
-			this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg);
-			var formattedDateTime = this.formattedDate;
-
-			// if a slider was changed but datepicker doesn't have a value yet, set it
-			if (dp_inst.lastVal === "") {
-                dp_inst.currentYear = dp_inst.selectedYear;
-                dp_inst.currentMonth = dp_inst.selectedMonth;
-                dp_inst.currentDay = dp_inst.selectedDay;
-            }
-
-			/*
-			* remove following lines to force every changes in date picker to change the input value
-			* Bug descriptions: when an input field has a default value, and click on the field to pop up the date picker.
-			* If the user manually empty the value in the input field, the date picker will never change selected value.
-			*/
-			//if (dp_inst.lastVal !== undefined && (dp_inst.lastVal.length > 0 && this.$input.val().length === 0)) {
-			//	return;
-			//}
-
-			if (this._defaults.timeOnly === true && this._defaults.timeOnlyShowDate === false) {
-				formattedDateTime = this.formattedTime;
-			} else if ((this._defaults.timeOnly !== true && (this._defaults.alwaysSetTime || timeAvailable)) || (this._defaults.timeOnly === true && this._defaults.timeOnlyShowDate === true)) {
-				formattedDateTime += this._defaults.separator + this.formattedTime + this._defaults.timeSuffix;
-			}
-
-			this.formattedDateTime = formattedDateTime;
-
-			if (!this._defaults.showTimepicker) {
-				this.$input.val(this.formattedDate);
-			} else if (this.$altInput && this._defaults.timeOnly === false && this._defaults.altFieldTimeOnly === true) {
-				this.$altInput.val(this.formattedTime);
-				this.$input.val(this.formattedDate);
-			} else if (this.$altInput) {
-				this.$input.val(formattedDateTime);
-				var altFormattedDateTime = '',
-					altSeparator = this._defaults.altSeparator !== null ? this._defaults.altSeparator : this._defaults.separator,
-					altTimeSuffix = this._defaults.altTimeSuffix !== null ? this._defaults.altTimeSuffix : this._defaults.timeSuffix;
-
-				if (!this._defaults.timeOnly) {
-					if (this._defaults.altFormat) {
-						altFormattedDateTime = $.datepicker.formatDate(this._defaults.altFormat, (dt === null ? new Date() : dt), formatCfg);
-					}
-					else {
-						altFormattedDateTime = this.formattedDate;
-					}
-
-					if (altFormattedDateTime) {
-						altFormattedDateTime += altSeparator;
-					}
-				}
-
-				if (this._defaults.altTimeFormat !== null) {
-					altFormattedDateTime += $.datepicker.formatTime(this._defaults.altTimeFormat, this, this._defaults) + altTimeSuffix;
-				}
-				else {
-					altFormattedDateTime += this.formattedTime + altTimeSuffix;
-				}
-				this.$altInput.val(altFormattedDateTime);
-			} else {
-				this.$input.val(formattedDateTime);
-			}
-
-			this.$input.trigger("change");
-		},
-
-		_onFocus: function () {
-			if (!this.$input.val() && this._defaults.defaultValue) {
-				this.$input.val(this._defaults.defaultValue);
-				var inst = $.datepicker._getInst(this.$input.get(0)),
-					tp_inst = $.datepicker._get(inst, 'timepicker');
-				if (tp_inst) {
-					if (tp_inst._defaults.timeOnly && (inst.input.val() !== inst.lastVal)) {
-						try {
-							$.datepicker._updateDatepicker(inst);
-						} catch (err) {
-							$.timepicker.log(err);
-						}
-					}
-				}
-			}
-		},
-
-		/*
-		* Small abstraction to control types
-		* We can add more, just be sure to follow the pattern: create, options, value
-		*/
-		_controls: {
-			// slider methods
-			slider: {
-				create: function (tp_inst, obj, unit, val, min, max, step) {
-					var rtl = tp_inst._defaults.isRTL; // if rtl go -60->0 instead of 0->60
-					return obj.prop('slide', null).slider({
-						orientation: "horizontal",
-						value: rtl ? val * -1 : val,
-						min: rtl ? max * -1 : min,
-						max: rtl ? min * -1 : max,
-						step: step,
-						slide: function (event, ui) {
-							tp_inst.control.value(tp_inst, $(this), unit, rtl ? ui.value * -1 : ui.value);
-							tp_inst._onTimeChange();
-						},
-						stop: function (event, ui) {
-							tp_inst._onSelectHandler();
-						}
-					});
-				},
-				options: function (tp_inst, obj, unit, opts, val) {
-					if (tp_inst._defaults.isRTL) {
-						if (typeof(opts) === 'string') {
-							if (opts === 'min' || opts === 'max') {
-								if (val !== undefined) {
-									return obj.slider(opts, val * -1);
-								}
-								return Math.abs(obj.slider(opts));
-							}
-							return obj.slider(opts);
-						}
-						var min = opts.min,
-							max = opts.max;
-						opts.min = opts.max = null;
-						if (min !== undefined) {
-							opts.max = min * -1;
-						}
-						if (max !== undefined) {
-							opts.min = max * -1;
-						}
-						return obj.slider(opts);
-					}
-					if (typeof(opts) === 'string' && val !== undefined) {
-						return obj.slider(opts, val);
-					}
-					return obj.slider(opts);
-				},
-				value: function (tp_inst, obj, unit, val) {
-					if (tp_inst._defaults.isRTL) {
-						if (val !== undefined) {
-							return obj.slider('value', val * -1);
-						}
-						return Math.abs(obj.slider('value'));
-					}
-					if (val !== undefined) {
-						return obj.slider('value', val);
-					}
-					return obj.slider('value');
-				}
-			},
-			// select methods
-			select: {
-				create: function (tp_inst, obj, unit, val, min, max, step) {
-					var sel = '<select class="ui-timepicker-select ui-state-default ui-corner-all" data-unit="' + unit + '" data-min="' + min + '" data-max="' + max + '" data-step="' + step + '">',
-						format = tp_inst._defaults.pickerTimeFormat || tp_inst._defaults.timeFormat;
-
-					for (var i = min; i <= max; i += step) {
-						sel += '<option value="' + i + '"' + (i === val ? ' selected' : '') + '>';
-						if (unit === 'hour') {
-							sel += $.datepicker.formatTime($.trim(format.replace(/[^ht ]/ig, '')), {hour: i}, tp_inst._defaults);
-						}
-						else if (unit === 'millisec' || unit === 'microsec' || i >= 10) { sel += i; }
-						else {sel += '0' + i.toString(); }
-						sel += '</option>';
-					}
-					sel += '</select>';
-
-					obj.children('select').remove();
-
-					$(sel).appendTo(obj).change(function (e) {
-						tp_inst._onTimeChange();
-						tp_inst._onSelectHandler();
-						tp_inst._afterInject();
-					});
-
-					return obj;
-				},
-				options: function (tp_inst, obj, unit, opts, val) {
-					var o = {},
-						$t = obj.children('select');
-					if (typeof(opts) === 'string') {
-						if (val === undefined) {
-							return $t.data(opts);
-						}
-						o[opts] = val;
-					}
-					else { o = opts; }
-					return tp_inst.control.create(tp_inst, obj, $t.data('unit'), $t.val(), o.min>=0 ? o.min : $t.data('min'), o.max || $t.data('max'), o.step || $t.data('step'));
-				},
-				value: function (tp_inst, obj, unit, val) {
-					var $t = obj.children('select');
-					if (val !== undefined) {
-						return $t.val(val);
-					}
-					return $t.val();
-				}
-			}
-		} // end _controls
-
-	});
-
-	$.fn.extend({
-		/*
-		* shorthand just to use timepicker.
-		*/
-		timepicker: function (o) {
-			o = o || {};
-			var tmp_args = Array.prototype.slice.call(arguments);
-
-			if (typeof o === 'object') {
-				tmp_args[0] = $.extend(o, {
-					timeOnly: true
-				});
-			}
-
-			return $(this).each(function () {
-				$.fn.datetimepicker.apply($(this), tmp_args);
-			});
-		},
-
-		/*
-		* extend timepicker to datepicker
-		*/
-		datetimepicker: function (o) {
-			o = o || {};
-			var tmp_args = arguments;
-
-			if (typeof(o) === 'string') {
-				if (o === 'getDate'  || (o === 'option' && tmp_args.length === 2 && typeof (tmp_args[1]) === 'string')) {
-					return $.fn.datepicker.apply($(this[0]), tmp_args);
-				} else {
-					return this.each(function () {
-						var $t = $(this);
-						$t.datepicker.apply($t, tmp_args);
-					});
-				}
-			} else {
-				return this.each(function () {
-					var $t = $(this);
-					$t.datepicker($.timepicker._newInst($t, o)._defaults);
-				});
-			}
-		}
-	});
-
-	/*
-	* Public Utility to parse date and time
-	*/
-	$.datepicker.parseDateTime = function (dateFormat, timeFormat, dateTimeString, dateSettings, timeSettings) {
-		var parseRes = parseDateTimeInternal(dateFormat, timeFormat, dateTimeString, dateSettings, timeSettings);
-		if (parseRes.timeObj) {
-			var t = parseRes.timeObj;
-			parseRes.date.setHours(t.hour, t.minute, t.second, t.millisec);
-			parseRes.date.setMicroseconds(t.microsec);
-		}
-
-		return parseRes.date;
-	};
-
-	/*
-	* Public utility to parse time
-	*/
-	$.datepicker.parseTime = function (timeFormat, timeString, options) {
-		var o = extendRemove(extendRemove({}, $.timepicker._defaults), options || {}),
-			iso8601 = (timeFormat.replace(/\'.*?\'/g, '').indexOf('Z') !== -1);
-
-		// Strict parse requires the timeString to match the timeFormat exactly
-		var strictParse = function (f, s, o) {
-
-			// pattern for standard and localized AM/PM markers
-			var getPatternAmpm = function (amNames, pmNames) {
-				var markers = [];
-				if (amNames) {
-					$.merge(markers, amNames);
-				}
-				if (pmNames) {
-					$.merge(markers, pmNames);
-				}
-				markers = $.map(markers, function (val) {
-					return val.replace(/[.*+?|()\[\]{}\\]/g, '\\$&');
-				});
-				return '(' + markers.join('|') + ')?';
-			};
-
-			// figure out position of time elements.. cause js cant do named captures
-			var getFormatPositions = function (timeFormat) {
-				var finds = timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|l{1}|c{1}|t{1,2}|z|'.*?')/g),
-					orders = {
-						h: -1,
-						m: -1,
-						s: -1,
-						l: -1,
-						c: -1,
-						t: -1,
-						z: -1
-					};
-
-				if (finds) {
-					for (var i = 0; i < finds.length; i++) {
-						if (orders[finds[i].toString().charAt(0)] === -1) {
-							orders[finds[i].toString().charAt(0)] = i + 1;
-						}
-					}
-				}
-				return orders;
-			};
-
-			var regstr = '^' + f.toString()
-					.replace(/([hH]{1,2}|mm?|ss?|[tT]{1,2}|[zZ]|[lc]|'.*?')/g, function (match) {
-							var ml = match.length;
-							switch (match.charAt(0).toLowerCase()) {
-							case 'h':
-								return ml === 1 ? '(\\d?\\d)' : '(\\d{' + ml + '})';
-							case 'm':
-								return ml === 1 ? '(\\d?\\d)' : '(\\d{' + ml + '})';
-							case 's':
-								return ml === 1 ? '(\\d?\\d)' : '(\\d{' + ml + '})';
-							case 'l':
-								return '(\\d?\\d?\\d)';
-							case 'c':
-								return '(\\d?\\d?\\d)';
-							case 'z':
-								return '(z|[-+]\\d\\d:?\\d\\d|\\S+)?';
-							case 't':
-								return getPatternAmpm(o.amNames, o.pmNames);
-							default:    // literal escaped in quotes
-								return '(' + match.replace(/\'/g, "").replace(/(\.|\$|\^|\\|\/|\(|\)|\[|\]|\?|\+|\*)/g, function (m) { return "\\" + m; }) + ')?';
-							}
-						})
-					.replace(/\s/g, '\\s?') +
-					o.timeSuffix + '$',
-				order = getFormatPositions(f),
-				ampm = '',
-				treg;
-
-			treg = s.match(new RegExp(regstr, 'i'));
-
-			var resTime = {
-				hour: 0,
-				minute: 0,
-				second: 0,
-				millisec: 0,
-				microsec: 0
-			};
-
-			if (treg) {
-				if (order.t !== -1) {
-					if (treg[order.t] === undefined || treg[order.t].length === 0) {
-						ampm = '';
-						resTime.ampm = '';
-					} else {
-						ampm = $.inArray(treg[order.t].toUpperCase(), $.map(o.amNames, function (x,i) { return x.toUpperCase(); })) !== -1 ? 'AM' : 'PM';
-						resTime.ampm = o[ampm === 'AM' ? 'amNames' : 'pmNames'][0];
-					}
-				}
-
-				if (order.h !== -1) {
-					if (ampm === 'AM' && treg[order.h] === '12') {
-						resTime.hour = 0; // 12am = 0 hour
-					} else {
-						if (ampm === 'PM' && treg[order.h] !== '12') {
-							resTime.hour = parseInt(treg[order.h], 10) + 12; // 12pm = 12 hour, any other pm = hour + 12
-						} else {
-							resTime.hour = Number(treg[order.h]);
-						}
-					}
-				}
-
-				if (order.m !== -1) {
-					resTime.minute = Number(treg[order.m]);
-				}
-				if (order.s !== -1) {
-					resTime.second = Number(treg[order.s]);
-				}
-				if (order.l !== -1) {
-					resTime.millisec = Number(treg[order.l]);
-				}
-				if (order.c !== -1) {
-					resTime.microsec = Number(treg[order.c]);
-				}
-				if (order.z !== -1 && treg[order.z] !== undefined) {
-					resTime.timezone = $.timepicker.timezoneOffsetNumber(treg[order.z]);
-				}
-
-
-				return resTime;
-			}
-			return false;
-		};// end strictParse
-
-		// First try JS Date, if that fails, use strictParse
-		var looseParse = function (f, s, o) {
-			try {
-				var d = new Date('2012-01-01 ' + s);
-				if (isNaN(d.getTime())) {
-					d = new Date('2012-01-01T' + s);
-					if (isNaN(d.getTime())) {
-						d = new Date('01/01/2012 ' + s);
-						if (isNaN(d.getTime())) {
-							throw "Unable to parse time with native Date: " + s;
-						}
-					}
-				}
-
-				return {
-					hour: d.getHours(),
-					minute: d.getMinutes(),
-					second: d.getSeconds(),
-					millisec: d.getMilliseconds(),
-					microsec: d.getMicroseconds(),
-					timezone: d.getTimezoneOffset() * -1
-				};
-			}
-			catch (err) {
-				try {
-					return strictParse(f, s, o);
-				}
-				catch (err2) {
-					$.timepicker.log("Unable to parse \ntimeString: " + s + "\ntimeFormat: " + f);
-				}
-			}
-			return false;
-		}; // end looseParse
-
-		if (typeof o.parse === "function") {
-			return o.parse(timeFormat, timeString, o);
-		}
-		if (o.parse === 'loose') {
-			return looseParse(timeFormat, timeString, o);
-		}
-		return strictParse(timeFormat, timeString, o);
-	};
-
-	/**
-	 * Public utility to format the time
-	 * @param {string} format format of the time
-	 * @param {Object} time Object not a Date for timezones
-	 * @param {Object} [options] essentially the regional[].. amNames, pmNames, ampm
-	 * @returns {string} the formatted time
-	 */
-	$.datepicker.formatTime = function (format, time, options) {
-		options = options || {};
-		options = $.extend({}, $.timepicker._defaults, options);
-		time = $.extend({
-			hour: 0,
-			minute: 0,
-			second: 0,
-			millisec: 0,
-			microsec: 0,
-			timezone: null
-		}, time);
-
-		var tmptime = format,
-			ampmName = options.amNames[0],
-			hour = parseInt(time.hour, 10);
-
-		if (hour > 11) {
-			ampmName = options.pmNames[0];
-		}
-
-		tmptime = tmptime.replace(/(?:HH?|hh?|mm?|ss?|[tT]{1,2}|[zZ]|[lc]|'.*?')/g, function (match) {
-			switch (match) {
-			case 'HH':
-				return ('0' + hour).slice(-2);
-			case 'H':
-				return hour;
-			case 'hh':
-				return ('0' + convert24to12(hour)).slice(-2);
-			case 'h':
-				return convert24to12(hour);
-			case 'mm':
-				return ('0' + time.minute).slice(-2);
-			case 'm':
-				return time.minute;
-			case 'ss':
-				return ('0' + time.second).slice(-2);
-			case 's':
-				return time.second;
-			case 'l':
-				return ('00' + time.millisec).slice(-3);
-			case 'c':
-				return ('00' + time.microsec).slice(-3);
-			case 'z':
-				return $.timepicker.timezoneOffsetString(time.timezone === null ? options.timezone : time.timezone, false);
-			case 'Z':
-				return $.timepicker.timezoneOffsetString(time.timezone === null ? options.timezone : time.timezone, true);
-			case 'T':
-				return ampmName.charAt(0).toUpperCase();
-			case 'TT':
-				return ampmName.toUpperCase();
-			case 't':
-				return ampmName.charAt(0).toLowerCase();
-			case 'tt':
-				return ampmName.toLowerCase();
-			default:
-				return match.replace(/'/g, "");
-			}
-		});
-
-		return tmptime;
-	};
-
-	/*
-	* the bad hack :/ override datepicker so it doesn't close on select
-	// inspired: http://stackoverflow.com/questions/1252512/jquery-datepicker-prevent-closing-picker-when-clicking-a-date/1762378#1762378
-	*/
-	$.datepicker._base_selectDate = $.datepicker._selectDate;
-	$.datepicker._selectDate = function (id, dateStr) {
-		var inst = this._getInst($(id)[0]),
-			tp_inst = this._get(inst, 'timepicker'),
-			was_inline;
-
-		if (tp_inst && inst.settings.showTimepicker) {
-			tp_inst._limitMinMaxDateTime(inst, true);
-			was_inline = inst.inline;
-			inst.inline = inst.stay_open = true;
-			//This way the onSelect handler called from calendarpicker get the full dateTime
-			this._base_selectDate(id, dateStr);
-			inst.inline = was_inline;
-			inst.stay_open = false;
-			this._notifyChange(inst);
-			this._updateDatepicker(inst);
-		} else {
-			this._base_selectDate(id, dateStr);
-		}
-	};
-
-	/*
-	* second bad hack :/ override datepicker so it triggers an event when changing the input field
-	* and does not redraw the datepicker on every selectDate event
-	*/
-	$.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker;
-	$.datepicker._updateDatepicker = function (inst) {
-
-		// don't popup the datepicker if there is another instance already opened
-		var input = inst.input[0];
-		if ($.datepicker._curInst && $.datepicker._curInst !== inst && $.datepicker._datepickerShowing && $.datepicker._lastInput !== input) {
-			return;
-		}
-
-		if (typeof(inst.stay_open) !== 'boolean' || inst.stay_open === false) {
-
-			this._base_updateDatepicker(inst);
-
-			// Reload the time control when changing something in the input text field.
-			var tp_inst = this._get(inst, 'timepicker');
-			if (tp_inst) {
-				tp_inst._addTimePicker(inst);
-			}
-		}
-	};
-
-	/*
-	* third bad hack :/ override datepicker so it allows spaces and colon in the input field
-	*/
-	$.datepicker._base_doKeyPress = $.datepicker._doKeyPress;
-	$.datepicker._doKeyPress = function (event) {
-		var inst = $.datepicker._getInst(event.target),
-			tp_inst = $.datepicker._get(inst, 'timepicker');
-
-		if (tp_inst) {
-			if ($.datepicker._get(inst, 'constrainInput')) {
-				var ampm = tp_inst.support.ampm,
-					tz = tp_inst._defaults.showTimezone !== null ? tp_inst._defaults.showTimezone : tp_inst.support.timezone,
-					dateChars = $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat')),
-					datetimeChars = tp_inst._defaults.timeFormat.toString()
-											.replace(/[hms]/g, '')
-											.replace(/TT/g, ampm ? 'APM' : '')
-											.replace(/Tt/g, ampm ? 'AaPpMm' : '')
-											.replace(/tT/g, ampm ? 'AaPpMm' : '')
-											.replace(/T/g, ampm ? 'AP' : '')
-											.replace(/tt/g, ampm ? 'apm' : '')
-											.replace(/t/g, ampm ? 'ap' : '') +
-											" " + tp_inst._defaults.separator +
-											tp_inst._defaults.timeSuffix +
-											(tz ? tp_inst._defaults.timezoneList.join('') : '') +
-											(tp_inst._defaults.amNames.join('')) + (tp_inst._defaults.pmNames.join('')) +
-											dateChars,
-					chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode);
-				return event.ctrlKey || (chr < ' ' || !dateChars || datetimeChars.indexOf(chr) > -1);
-			}
-		}
-
-		return $.datepicker._base_doKeyPress(event);
-	};
-
-	/*
-	* Fourth bad hack :/ override _updateAlternate function used in inline mode to init altField
-	* Update any alternate field to synchronise with the main field.
-	*/
-	$.datepicker._base_updateAlternate = $.datepicker._updateAlternate;
-	$.datepicker._updateAlternate = function (inst) {
-		var tp_inst = this._get(inst, 'timepicker');
-		if (tp_inst) {
-			var altField = tp_inst._defaults.altField;
-			if (altField) { // update alternate field too
-				var altFormat = tp_inst._defaults.altFormat || tp_inst._defaults.dateFormat,
-					date = this._getDate(inst),
-					formatCfg = $.datepicker._getFormatConfig(inst),
-					altFormattedDateTime = '',
-					altSeparator = tp_inst._defaults.altSeparator ? tp_inst._defaults.altSeparator : tp_inst._defaults.separator,
-					altTimeSuffix = tp_inst._defaults.altTimeSuffix ? tp_inst._defaults.altTimeSuffix : tp_inst._defaults.timeSuffix,
-					altTimeFormat = tp_inst._defaults.altTimeFormat !== null ? tp_inst._defaults.altTimeFormat : tp_inst._defaults.timeFormat;
-
-				altFormattedDateTime += $.datepicker.formatTime(altTimeFormat, tp_inst, tp_inst._defaults) + altTimeSuffix;
-				if (!tp_inst._defaults.timeOnly && !tp_inst._defaults.altFieldTimeOnly && date !== null) {
-					if (tp_inst._defaults.altFormat) {
-						altFormattedDateTime = $.datepicker.formatDate(tp_inst._defaults.altFormat, date, formatCfg) + altSeparator + altFormattedDateTime;
-					}
-					else {
-						altFormattedDateTime = tp_inst.formattedDate + altSeparator + altFormattedDateTime;
-					}
-				}
-				$(altField).val( inst.input.val() ? altFormattedDateTime : "");
-			}
-		}
-		else {
-			$.datepicker._base_updateAlternate(inst);
-		}
-	};
-
-	/*
-	* Override key up event to sync manual input changes.
-	*/
-	$.datepicker._base_doKeyUp = $.datepicker._doKeyUp;
-	$.datepicker._doKeyUp = function (event) {
-		var inst = $.datepicker._getInst(event.target),
-			tp_inst = $.datepicker._get(inst, 'timepicker');
-
-		if (tp_inst) {
-			if (tp_inst._defaults.timeOnly && (inst.input.val() !== inst.lastVal)) {
-				try {
-					$.datepicker._updateDatepicker(inst);
-				} catch (err) {
-					$.timepicker.log(err);
-				}
-			}
-		}
-
-		return $.datepicker._base_doKeyUp(event);
-	};
-
-	/*
-	* override "Today" button to also grab the time and set it to input field.
-	*/
-	$.datepicker._base_gotoToday = $.datepicker._gotoToday;
-	$.datepicker._gotoToday = function (id) {
-		var inst = this._getInst($(id)[0]);
-		this._base_gotoToday(id);
-		var tp_inst = this._get(inst, 'timepicker');
-		if (!tp_inst) {
-		  return;
-		}
-
-		var tzoffset = $.timepicker.timezoneOffsetNumber(tp_inst.timezone);
-		var now = new Date();
-		now.setMinutes(now.getMinutes() + now.getTimezoneOffset() + parseInt(tzoffset, 10));
-		this._setTime(inst, now);
-		this._setDate(inst, now);
-		tp_inst._onSelectHandler();
-	};
-
-	/*
-	* Disable & enable the Time in the datetimepicker
-	*/
-	$.datepicker._disableTimepickerDatepicker = function (target) {
-		var inst = this._getInst(target);
-		if (!inst) {
-			return;
-		}
-
-		var tp_inst = this._get(inst, 'timepicker');
-		$(target).datepicker('getDate'); // Init selected[Year|Month|Day]
-		if (tp_inst) {
-			inst.settings.showTimepicker = false;
-			tp_inst._defaults.showTimepicker = false;
-			tp_inst._updateDateTime(inst);
-		}
-	};
-
-	$.datepicker._enableTimepickerDatepicker = function (target) {
-		var inst = this._getInst(target);
-		if (!inst) {
-			return;
-		}
-
-		var tp_inst = this._get(inst, 'timepicker');
-		$(target).datepicker('getDate'); // Init selected[Year|Month|Day]
-		if (tp_inst) {
-			inst.settings.showTimepicker = true;
-			tp_inst._defaults.showTimepicker = true;
-			tp_inst._addTimePicker(inst); // Could be disabled on page load
-			tp_inst._updateDateTime(inst);
-		}
-	};
-
-	/*
-	* Create our own set time function
-	*/
-	$.datepicker._setTime = function (inst, date) {
-		var tp_inst = this._get(inst, 'timepicker');
-		if (tp_inst) {
-			var defaults = tp_inst._defaults;
-
-			// calling _setTime with no date sets time to defaults
-			tp_inst.hour = date ? date.getHours() : defaults.hour;
-			tp_inst.minute = date ? date.getMinutes() : defaults.minute;
-			tp_inst.second = date ? date.getSeconds() : defaults.second;
-			tp_inst.millisec = date ? date.getMilliseconds() : defaults.millisec;
-			tp_inst.microsec = date ? date.getMicroseconds() : defaults.microsec;
-
-			//check if within min/max times..
-			tp_inst._limitMinMaxDateTime(inst, true);
-
-			tp_inst._onTimeChange();
-			tp_inst._updateDateTime(inst);
-		}
-	};
-
-	/*
-	* Create new public method to set only time, callable as $().datepicker('setTime', date)
-	*/
-	$.datepicker._setTimeDatepicker = function (target, date, withDate) {
-		var inst = this._getInst(target);
-		if (!inst) {
-			return;
-		}
-
-		var tp_inst = this._get(inst, 'timepicker');
-
-		if (tp_inst) {
-			this._setDateFromField(inst);
-			var tp_date;
-			if (date) {
-				if (typeof date === "string") {
-					tp_inst._parseTime(date, withDate);
-					tp_date = new Date();
-					tp_date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second, tp_inst.millisec);
-					tp_date.setMicroseconds(tp_inst.microsec);
-				} else {
-					tp_date = new Date(date.getTime());
-					tp_date.setMicroseconds(date.getMicroseconds());
-				}
-				if (tp_date.toString() === 'Invalid Date') {
-					tp_date = undefined;
-				}
-				this._setTime(inst, tp_date);
-			}
-		}
-
-	};
-
-	/*
-	* override setDate() to allow setting time too within Date object
-	*/
-	$.datepicker._base_setDateDatepicker = $.datepicker._setDateDatepicker;
-	$.datepicker._setDateDatepicker = function (target, _date) {
-		var inst = this._getInst(target);
-		var date = _date;
-		if (!inst) {
-			return;
-		}
-
-		if (typeof(_date) === 'string') {
-			date = new Date(_date);
-			if (!date.getTime()) {
-				this._base_setDateDatepicker.apply(this, arguments);
-				date = $(target).datepicker('getDate');
-			}
-		}
-
-		var tp_inst = this._get(inst, 'timepicker');
-		var tp_date;
-		if (date instanceof Date) {
-			tp_date = new Date(date.getTime());
-			tp_date.setMicroseconds(date.getMicroseconds());
-		} else {
-			tp_date = date;
-		}
-
-		// This is important if you are using the timezone option, javascript's Date
-		// object will only return the timezone offset for the current locale, so we
-		// adjust it accordingly.  If not using timezone option this won't matter..
-		// If a timezone is different in tp, keep the timezone as is
-		if (tp_inst && tp_date) {
-			// look out for DST if tz wasn't specified
-			if (!tp_inst.support.timezone && tp_inst._defaults.timezone === null) {
-				tp_inst.timezone = tp_date.getTimezoneOffset() * -1;
-			}
-			date = $.timepicker.timezoneAdjust(date, $.timepicker.timezoneOffsetString(-date.getTimezoneOffset()), tp_inst.timezone);
-			tp_date = $.timepicker.timezoneAdjust(tp_date, $.timepicker.timezoneOffsetString(-tp_date.getTimezoneOffset()), tp_inst.timezone);
-		}
-
-		this._updateDatepicker(inst);
-		this._base_setDateDatepicker.apply(this, arguments);
-		this._setTimeDatepicker(target, tp_date, true);
-	};
-
-	/*
-	* override getDate() to allow getting time too within Date object
-	*/
-	$.datepicker._base_getDateDatepicker = $.datepicker._getDateDatepicker;
-	$.datepicker._getDateDatepicker = function (target, noDefault) {
-		var inst = this._getInst(target);
-		if (!inst) {
-			return;
-		}
-
-		var tp_inst = this._get(inst, 'timepicker');
-
-		if (tp_inst) {
-			// if it hasn't yet been defined, grab from field
-			if (inst.lastVal === undefined) {
-				this._setDateFromField(inst, noDefault);
-			}
-
-			var date = this._getDate(inst);
-
-			var currDT = null;
-
-			if (tp_inst.$altInput && tp_inst._defaults.altFieldTimeOnly) {
-				currDT = tp_inst.$input.val() + ' ' + tp_inst.$altInput.val();
-			}
-			else if (tp_inst.$input.get(0).tagName !== 'INPUT' && tp_inst.$altInput) {
-				/**
-				 * in case the datetimepicker has been applied to a non-input tag for inline UI,
-				 * and the user has not configured the plugin to display only time in altInput,
-				 * pick current date time from the altInput (and hope for the best, for now, until "ER1" is applied)
-				 *
-				 * @todo ER1. Since altInput can have a totally difference format, convert it to standard format by reading input format from "altFormat" and "altTimeFormat" option values
-				 */
-				currDT = tp_inst.$altInput.val();
-			}
-			else {
-				currDT = tp_inst.$input.val();
-			}
-
-			if (date && tp_inst._parseTime(currDT, !inst.settings.timeOnly)) {
-				date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second, tp_inst.millisec);
-				date.setMicroseconds(tp_inst.microsec);
-
-				// This is important if you are using the timezone option, javascript's Date
-				// object will only return the timezone offset for the current locale, so we
-				// adjust it accordingly.  If not using timezone option this won't matter..
-				if (tp_inst.timezone != null) {
-					// look out for DST if tz wasn't specified
-					if (!tp_inst.support.timezone && tp_inst._defaults.timezone === null) {
-						tp_inst.timezone = date.getTimezoneOffset() * -1;
-					}
-					date = $.timepicker.timezoneAdjust(date, tp_inst.timezone, $.timepicker.timezoneOffsetString(-date.getTimezoneOffset()));
-				}
-			}
-			return date;
-		}
-		return this._base_getDateDatepicker(target, noDefault);
-	};
-
-	/*
-	* override parseDate() because UI 1.8.14 throws an error about "Extra characters"
-	* An option in datapicker to ignore extra format characters would be nicer.
-	*/
-	$.datepicker._base_parseDate = $.datepicker.parseDate;
-	$.datepicker.parseDate = function (format, value, settings) {
-		var date;
-		try {
-			date = this._base_parseDate(format, value, settings);
-		} catch (err) {
-			// Hack!  The error message ends with a colon, a space, and
-			// the "extra" characters.  We rely on that instead of
-			// attempting to perfectly reproduce the parsing algorithm.
-			if (err.indexOf(":") >= 0) {
-				date = this._base_parseDate(format, value.substring(0, value.length - (err.length - err.indexOf(':') - 2)), settings);
-				$.timepicker.log("Error parsing the date string: " + err + "\ndate string = " + value + "\ndate format = " + format);
-			} else {
-				throw err;
-			}
-		}
-		return date;
-	};
-
-	/*
-	* override formatDate to set date with time to the input
-	*/
-	$.datepicker._base_formatDate = $.datepicker._formatDate;
-	$.datepicker._formatDate = function (inst, day, month, year) {
-		var tp_inst = this._get(inst, 'timepicker');
-		if (tp_inst) {
-			tp_inst._updateDateTime(inst);
-			return tp_inst.$input.val();
-		}
-		return this._base_formatDate(inst);
-	};
-
-	/*
-	* override options setter to add time to maxDate(Time) and minDate(Time). MaxDate
-	*/
-	$.datepicker._base_optionDatepicker = $.datepicker._optionDatepicker;
-	$.datepicker._optionDatepicker = function (target, name, value) {
-		var inst = this._getInst(target),
-			name_clone;
-		if (!inst) {
-			return null;
-		}
-
-		var tp_inst = this._get(inst, 'timepicker');
-		if (tp_inst) {
-			var min = null,
-				max = null,
-				onselect = null,
-				overrides = tp_inst._defaults.evnts,
-				fns = {},
-				prop,
-				ret,
-				oldVal,
-				$target;
-			if (typeof name === 'string') { // if min/max was set with the string
-				if (name === 'minDate' || name === 'minDateTime') {
-					min = value;
-				} else if (name === 'maxDate' || name === 'maxDateTime') {
-					max = value;
-				} else if (name === 'onSelect') {
-					onselect = value;
-				} else if (overrides.hasOwnProperty(name)) {
-					if (typeof (value) === 'undefined') {
-						return overrides[name];
-					}
-					fns[name] = value;
-					name_clone = {}; //empty results in exiting function after overrides updated
-				}
-			} else if (typeof name === 'object') { //if min/max was set with the JSON
-				if (name.minDate) {
-					min = name.minDate;
-				} else if (name.minDateTime) {
-					min = name.minDateTime;
-				} else if (name.maxDate) {
-					max = name.maxDate;
-				} else if (name.maxDateTime) {
-					max = name.maxDateTime;
-				}
-				for (prop in overrides) {
-					if (overrides.hasOwnProperty(prop) && name[prop]) {
-						fns[prop] = name[prop];
-					}
-				}
-			}
-			for (prop in fns) {
-				if (fns.hasOwnProperty(prop)) {
-					overrides[prop] = fns[prop];
-					if (!name_clone) { name_clone = $.extend({}, name); }
-					delete name_clone[prop];
-				}
-			}
-			if (name_clone && isEmptyObject(name_clone)) { return; }
-			if (min) { //if min was set
-				if (min === 0) {
-					min = new Date();
-				} else {
-					min = new Date(min);
-				}
-				tp_inst._defaults.minDate = min;
-				tp_inst._defaults.minDateTime = min;
-			} else if (max) { //if max was set
-				if (max === 0) {
-					max = new Date();
-				} else {
-					max = new Date(max);
-				}
-				tp_inst._defaults.maxDate = max;
-				tp_inst._defaults.maxDateTime = max;
-			} else if (onselect) {
-				tp_inst._defaults.onSelect = onselect;
-			}
-
-			// Datepicker will override our date when we call _base_optionDatepicker when
-			// calling minDate/maxDate, so we will first grab the value, call
-			// _base_optionDatepicker, then set our value back.
-			if(min || max){
-				$target = $(target);
-				oldVal = $target.datetimepicker('getDate');
-				ret = this._base_optionDatepicker.call($.datepicker, target, name_clone || name, value);
-				$target.datetimepicker('setDate', oldVal);
-				return ret;
-			}
-		}
-		if (value === undefined) {
-			return this._base_optionDatepicker.call($.datepicker, target, name);
-		}
-		return this._base_optionDatepicker.call($.datepicker, target, name_clone || name, value);
-	};
-
-	/*
-	* jQuery isEmptyObject does not check hasOwnProperty - if someone has added to the object prototype,
-	* it will return false for all objects
-	*/
-	var isEmptyObject = function (obj) {
-		var prop;
-		for (prop in obj) {
-			if (obj.hasOwnProperty(prop)) {
-				return false;
-			}
-		}
-		return true;
-	};
-
-	/*
-	* jQuery extend now ignores nulls!
-	*/
-	var extendRemove = function (target, props) {
-		$.extend(target, props);
-		for (var name in props) {
-			if (props[name] === null || props[name] === undefined) {
-				target[name] = props[name];
-			}
-		}
-		return target;
-	};
-
-	/*
-	* Determine by the time format which units are supported
-	* Returns an object of booleans for each unit
-	*/
-	var detectSupport = function (timeFormat) {
-		var tf = timeFormat.replace(/'.*?'/g, '').toLowerCase(), // removes literals
-			isIn = function (f, t) { // does the format contain the token?
-					return f.indexOf(t) !== -1 ? true : false;
-				};
-		return {
-				hour: isIn(tf, 'h'),
-				minute: isIn(tf, 'm'),
-				second: isIn(tf, 's'),
-				millisec: isIn(tf, 'l'),
-				microsec: isIn(tf, 'c'),
-				timezone: isIn(tf, 'z'),
-				ampm: isIn(tf, 't') && isIn(timeFormat, 'h'),
-				iso8601: isIn(timeFormat, 'Z')
-			};
-	};
-
-	/*
-	* Converts 24 hour format into 12 hour
-	* Returns 12 hour without leading 0
-	*/
-	var convert24to12 = function (hour) {
-		hour %= 12;
-
-		if (hour === 0) {
-			hour = 12;
-		}
-
-		return String(hour);
-	};
-
-	var computeEffectiveSetting = function (settings, property) {
-		return settings && settings[property] ? settings[property] : $.timepicker._defaults[property];
-	};
-
-	/*
-	* Splits datetime string into date and time substrings.
-	* Throws exception when date can't be parsed
-	* Returns {dateString: dateString, timeString: timeString}
-	*/
-	var splitDateTime = function (dateTimeString, timeSettings) {
-		// The idea is to get the number separator occurrences in datetime and the time format requested (since time has
-		// fewer unknowns, mostly numbers and am/pm). We will use the time pattern to split.
-		var separator = computeEffectiveSetting(timeSettings, 'separator'),
-			format = computeEffectiveSetting(timeSettings, 'timeFormat'),
-			timeParts = format.split(separator), // how many occurrences of separator may be in our format?
-			timePartsLen = timeParts.length,
-			allParts = dateTimeString.split(separator),
-			allPartsLen = allParts.length;
-
-		if (allPartsLen > 1) {
-			return {
-				dateString: allParts.splice(0, allPartsLen - timePartsLen).join(separator),
-				timeString: allParts.splice(0, timePartsLen).join(separator)
-			};
-		}
-
-		return {
-			dateString: dateTimeString,
-			timeString: ''
-		};
-	};
-
-	/*
-	* Internal function to parse datetime interval
-	* Returns: {date: Date, timeObj: Object}, where
-	*   date - parsed date without time (type Date)
-	*   timeObj = {hour: , minute: , second: , millisec: , microsec: } - parsed time. Optional
-	*/
-	var parseDateTimeInternal = function (dateFormat, timeFormat, dateTimeString, dateSettings, timeSettings) {
-		var date,
-			parts,
-			parsedTime;
-
-		parts = splitDateTime(dateTimeString, timeSettings);
-		date = $.datepicker._base_parseDate(dateFormat, parts.dateString, dateSettings);
-
-		if (parts.timeString === '') {
-			return {
-				date: date
-			};
-		}
-
-		parsedTime = $.datepicker.parseTime(timeFormat, parts.timeString, timeSettings);
-
-		if (!parsedTime) {
-			throw 'Wrong time format';
-		}
-
-		return {
-			date: date,
-			timeObj: parsedTime
-		};
-	};
-
-	/*
-	* Internal function to set timezone_select to the local timezone
-	*/
-	var selectLocalTimezone = function (tp_inst, date) {
-		if (tp_inst && tp_inst.timezone_select) {
-			var now = date || new Date();
-			tp_inst.timezone_select.val(-now.getTimezoneOffset());
-		}
-	};
-
-	/*
-	* Create a Singleton Instance
-	*/
-	$.timepicker = new Timepicker();
-
-	/**
-	 * Get the timezone offset as string from a date object (eg '+0530' for UTC+5.5)
-	 * @param {number} tzMinutes if not a number, less than -720 (-1200), or greater than 840 (+1400) this value is returned
-	 * @param {boolean} iso8601 if true formats in accordance to iso8601 "+12:45"
-	 * @return {string}
-	 */
-	$.timepicker.timezoneOffsetString = function (tzMinutes, iso8601) {
-		if (isNaN(tzMinutes) || tzMinutes > 840 || tzMinutes < -720) {
-			return tzMinutes;
-		}
-
-		var off = tzMinutes,
-			minutes = off % 60,
-			hours = (off - minutes) / 60,
-			iso = iso8601 ? ':' : '',
-			tz = (off >= 0 ? '+' : '-') + ('0' + Math.abs(hours)).slice(-2) + iso + ('0' + Math.abs(minutes)).slice(-2);
-
-		if (tz === '+00:00') {
-			return 'Z';
-		}
-		return tz;
-	};
-
-	/**
-	 * Get the number in minutes that represents a timezone string
-	 * @param  {string} tzString formatted like "+0500", "-1245", "Z"
-	 * @return {number} the offset minutes or the original string if it doesn't match expectations
-	 */
-	$.timepicker.timezoneOffsetNumber = function (tzString) {
-		var normalized = tzString.toString().replace(':', ''); // excuse any iso8601, end up with "+1245"
-
-		if (normalized.toUpperCase() === 'Z') { // if iso8601 with Z, its 0 minute offset
-			return 0;
-		}
-
-		if (!/^(\-|\+)\d{4}$/.test(normalized)) { // possibly a user defined tz, so just give it back
-			return parseInt(tzString, 10);
-		}
-
-		return ((normalized.substr(0, 1) === '-' ? -1 : 1) * // plus or minus
-					((parseInt(normalized.substr(1, 2), 10) * 60) + // hours (converted to minutes)
-					parseInt(normalized.substr(3, 2), 10))); // minutes
-	};
-
-	/**
-	 * No way to set timezone in js Date, so we must adjust the minutes to compensate. (think setDate, getDate)
-	 * @param  {Date} date
-	 * @param  {string} fromTimezone formatted like "+0500", "-1245"
-	 * @param  {string} toTimezone formatted like "+0500", "-1245"
-	 * @return {Date}
-	 */
-	$.timepicker.timezoneAdjust = function (date, fromTimezone, toTimezone) {
-		var fromTz = $.timepicker.timezoneOffsetNumber(fromTimezone);
-		var toTz = $.timepicker.timezoneOffsetNumber(toTimezone);
-		if (!isNaN(toTz)) {
-			date.setMinutes(date.getMinutes() + (-fromTz) - (-toTz));
-		}
-		return date;
-	};
-
-	/**
-	 * Calls `timepicker()` on the `startTime` and `endTime` elements, and configures them to
-	 * enforce date range limits.
-	 * n.b. The input value must be correctly formatted (reformatting is not supported)
-	 * @param  {Element} startTime
-	 * @param  {Element} endTime
-	 * @param  {Object} options Options for the timepicker() call
-	 * @return {jQuery}
-	 */
-	$.timepicker.timeRange = function (startTime, endTime, options) {
-		return $.timepicker.handleRange('timepicker', startTime, endTime, options);
-	};
-
-	/**
-	 * Calls `datetimepicker` on the `startTime` and `endTime` elements, and configures them to
-	 * enforce date range limits.
-	 * @param  {Element} startTime
-	 * @param  {Element} endTime
-	 * @param  {Object} options Options for the `timepicker()` call. Also supports `reformat`,
-	 *   a boolean value that can be used to reformat the input values to the `dateFormat`.
-	 * @param  {string} method Can be used to specify the type of picker to be added
-	 * @return {jQuery}
-	 */
-	$.timepicker.datetimeRange = function (startTime, endTime, options) {
-		$.timepicker.handleRange('datetimepicker', startTime, endTime, options);
-	};
-
-	/**
-	 * Calls `datepicker` on the `startTime` and `endTime` elements, and configures them to
-	 * enforce date range limits.
-	 * @param  {Element} startTime
-	 * @param  {Element} endTime
-	 * @param  {Object} options Options for the `timepicker()` call. Also supports `reformat`,
-	 *   a boolean value that can be used to reformat the input values to the `dateFormat`.
-	 * @return {jQuery}
-	 */
-	$.timepicker.dateRange = function (startTime, endTime, options) {
-		$.timepicker.handleRange('datepicker', startTime, endTime, options);
-	};
-
-	/**
-	 * Calls `method` on the `startTime` and `endTime` elements, and configures them to
-	 * enforce date range limits.
-	 * @param  {string} method Can be used to specify the type of picker to be added
-	 * @param  {Element} startTime
-	 * @param  {Element} endTime
-	 * @param  {Object} options Options for the `timepicker()` call. Also supports `reformat`,
-	 *   a boolean value that can be used to reformat the input values to the `dateFormat`.
-	 * @return {jQuery}
-	 */
-	$.timepicker.handleRange = function (method, startTime, endTime, options) {
-		options = $.extend({}, {
-			minInterval: 0, // min allowed interval in milliseconds
-			maxInterval: 0, // max allowed interval in milliseconds
-			start: {},      // options for start picker
-			end: {}         // options for end picker
-		}, options);
-
-		// for the mean time this fixes an issue with calling getDate with timepicker()
-		var timeOnly = false;
-		if(method === 'timepicker'){
-			timeOnly = true;
-			method = 'datetimepicker';
-		}
-
-		function checkDates(changed, other) {
-			var startdt = startTime[method]('getDate'),
-				enddt = endTime[method]('getDate'),
-				changeddt = changed[method]('getDate');
-
-			if (startdt !== null) {
-				var minDate = new Date(startdt.getTime()),
-					maxDate = new Date(startdt.getTime());
-
-				minDate.setMilliseconds(minDate.getMilliseconds() + options.minInterval);
-				maxDate.setMilliseconds(maxDate.getMilliseconds() + options.maxInterval);
-
-				if (options.minInterval > 0 && minDate > enddt) { // minInterval check
-					endTime[method]('setDate', minDate);
-				}
-				else if (options.maxInterval > 0 && maxDate < enddt) { // max interval check
-					endTime[method]('setDate', maxDate);
-				}
-				else if (startdt > enddt) {
-					other[method]('setDate', changeddt);
-				}
-			}
-		}
-
-		function selected(changed, other, option) {
-			if (!changed.val()) {
-				return;
-			}
-			var date = changed[method].call(changed, 'getDate');
-			if (date !== null && options.minInterval > 0) {
-				if (option === 'minDate') {
-					date.setMilliseconds(date.getMilliseconds() + options.minInterval);
-				}
-				if (option === 'maxDate') {
-					date.setMilliseconds(date.getMilliseconds() - options.minInterval);
-				}
-			}
-
-			if (date.getTime) {
-				other[method].call(other, 'option', option, date);
-			}
-		}
-
-		$.fn[method].call(startTime, $.extend({
-			timeOnly: timeOnly,
-			onClose: function (dateText, inst) {
-				checkDates($(this), endTime);
-			},
-			onSelect: function (selectedDateTime) {
-				selected($(this), endTime, 'minDate');
-			}
-		}, options, options.start));
-		$.fn[method].call(endTime, $.extend({
-			timeOnly: timeOnly,
-			onClose: function (dateText, inst) {
-				checkDates($(this), startTime);
-			},
-			onSelect: function (selectedDateTime) {
-				selected($(this), startTime, 'maxDate');
-			}
-		}, options, options.end));
-
-		checkDates(startTime, endTime);
-
-		selected(startTime, endTime, 'minDate');
-		selected(endTime, startTime, 'maxDate');
-
-		return $([startTime.get(0), endTime.get(0)]);
-	};
-
-	/**
-	 * Log error or data to the console during error or debugging
-	 * @param  {Object} err pass any type object to log to the console during error or debugging
-	 * @return {void}
-	 */
-	$.timepicker.log = function () {
-		// Older IE (9, maybe 10) throw error on accessing `window.console.log.apply`, so check first.
-		if (window.console && window.console.log && window.console.log.apply) {
-			window.console.log.apply(window.console, Array.prototype.slice.call(arguments));
-		}
-	};
-
-	/*
-	 * Add util object to allow access to private methods for testability.
-	 */
-	$.timepicker._util = {
-		_extendRemove: extendRemove,
-		_isEmptyObject: isEmptyObject,
-		_convert24to12: convert24to12,
-		_detectSupport: detectSupport,
-		_selectLocalTimezone: selectLocalTimezone,
-		_computeEffectiveSetting: computeEffectiveSetting,
-		_splitDateTime: splitDateTime,
-		_parseDateTimeInternal: parseDateTimeInternal
-	};
-
-	/*
-	* Microsecond support
-	*/
-	if (!Date.prototype.getMicroseconds) {
-		Date.prototype.microseconds = 0;
-		Date.prototype.getMicroseconds = function () { return this.microseconds; };
-		Date.prototype.setMicroseconds = function (m) {
-			this.setMilliseconds(this.getMilliseconds() + Math.floor(m / 1000));
-			this.microseconds = m % 1000;
-			return this;
-		};
-	}
-
-	/*
-	* Keep up with the version
-	*/
-	$.timepicker.version = "1.6.3";
-
-}));
diff --git a/vendor/assets/stylesheets/jquery-ui-timepicker-addon.css b/vendor/assets/stylesheets/jquery-ui-timepicker-addon.css
deleted file mode 100644
index 7c62ee8454..0000000000
--- a/vendor/assets/stylesheets/jquery-ui-timepicker-addon.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
-.ui-timepicker-div dl { text-align: left; }
-.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
-.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
-.ui-timepicker-div td { font-size: 90%; }
-.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
-.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
-
-.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
-.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
-
-.ui-timepicker-rtl{ direction: rtl; }
-.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
-.ui-timepicker-rtl dl dt{ float: right; clear: right; }
-.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
-
-/* Shortened version style */
-.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
-.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
-.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
-.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
-.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
-.ui-timepicker-div.ui-timepicker-oneLine dl dd,
-.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
-.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
-.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
-.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
-.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
-.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
-.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
diff --git a/vendor/assets/stylesheets/jquery-ui.datepicker.css b/vendor/assets/stylesheets/jquery-ui.datepicker.css
deleted file mode 100644
index 33b69f7253..0000000000
--- a/vendor/assets/stylesheets/jquery-ui.datepicker.css
+++ /dev/null
@@ -1,357 +0,0 @@
-/*
- * jQuery UI CSS Framework 1.8.14
- *
- * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * http://docs.jquery.com/UI/Theming/API
- */
-
-/* Layout helpers
-----------------------------------*/
-.ui-helper-hidden { display: none; }
-.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
-.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
-.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
-.ui-helper-clearfix { display: inline-block; }
-/* required comment for clearfix to work in Opera \*/
-* html .ui-helper-clearfix { height:1%; }
-.ui-helper-clearfix { display:block; }
-/* end clearfix */
-.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
-
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-disabled { cursor: default !important; }
-
-
-/* Icons
-----------------------------------*/
-
-/* states and images */
-.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
-
-
-/* Misc visuals
-----------------------------------*/
-
-/* Overlays */
-.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
-
-
-/*
- * jQuery UI CSS Framework 1.8.14
- *
- * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * http://docs.jquery.com/UI/Theming/API
- *
- * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Helvetica,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=2px&bgColorHeader=dddddd&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=50&borderColorHeader=dddddd&fcHeader=444444&iconColorHeader=0073ea&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=dddddd&fcContent=444444&iconColorContent=ff0084&bgColorDefault=f6f6f6&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=100&borderColorDefault=dddddd&fcDefault=0073ea&iconColorDefault=666666&bgColorHover=0073ea&bgTextureHover=03_highlight_soft.png&bgImgOpacityHover=25&borderColorHover=0073ea&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=dddddd&fcActive=ff0084&iconColorActive=454545&bgColorHighlight=ffffff&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=cccccc&fcHighlight=444444&iconColorHighlight=0073ea&bgColorError=ffffff&bgTextureError=01_flat.png&bgImgOpacityError=55&borderColorError=ff0084&fcError=222222&iconColorError=ff0084&bgColorOverlay=eeeeee&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=4px&offsetTopShadow=-4px&offsetLeftShadow=-4px&cornerRadiusShadow=0px
- */
-
-
-/* Component containers
-----------------------------------*/
-.ui-widget { font-family: Helvetica, Arial, sans-serif; font-size: 1.1em; }
-.ui-widget .ui-widget { font-size: 1em; }
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Helvetica, Arial, sans-serif; font-size: 1em; }
-.ui-widget-content { border: 1px solid #dddddd; background: #ffffff url(<%= asset_path("jquery-ui/ui-bg_flat_75_ffffff_40x100.png") %>) 50% 50% repeat-x; color: #444444; }
-.ui-widget-content a { color: #444444; }
-.ui-widget-header { border: 1px solid #dddddd; background: #dddddd url(<%= asset_path("jquery-ui/ui-bg_highlight-soft_50_dddddd_1x100.png") %>) 50% 50% repeat-x; color: #444444; font-weight: bold; }
-.ui-widget-header a { color: #444444; }
-
-/* Interaction states
-----------------------------------*/
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #dddddd; background: #f6f6f6 url(<%= asset_path("jquery-ui/ui-bg_highlight-soft_100_f6f6f6_1x100.png") %>) 50% 50% repeat-x; font-weight: bold; color: #0073ea; }
-.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #0073ea; text-decoration: none; }
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #0073ea; background: #0073ea url(<%= asset_path("jquery-ui/ui-bg_highlight-soft_25_0073ea_1x100.png") %>) 50% 50% repeat-x; font-weight: bold; color: #ffffff; }
-.ui-state-hover a, .ui-state-hover a:hover { color: #ffffff; text-decoration: none; }
-.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #dddddd; background: #ffffff url(<%= asset_path("jquery-ui/ui-bg_glass_65_ffffff_1x400.png") %>) 50% 50% repeat-x; font-weight: bold; color: #ff0084; }
-.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ff0084; text-decoration: none; }
-.ui-widget :active { outline: none; }
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #cccccc; background: #ffffff url(<%= asset_path("jquery-ui/ui-bg_flat_55_ffffff_40x100.png") %>) 50% 50% repeat-x; color: #444444; }
-.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #444444; }
-.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #ff0084; background: #ffffff url(<%= asset_path("jquery-ui/ui-bg_flat_55_ffffff_40x100.png") %>) 50% 50% repeat-x; color: #222222; }
-.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #222222; }
-.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #222222; }
-.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
-.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
-.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
-
-/* Icons
-----------------------------------*/
-
-/* states and images */
-.ui-icon { width: 16px; height: 16px; background-image: url(<%= asset_path("jquery-ui/ui-icons_ff0084_256x240.png") %>); }
-.ui-widget-content .ui-icon {background-image: url(<%= asset_path("jquery-ui/ui-icons_ff0084_256x240.png") %>); }
-.ui-widget-header .ui-icon {background-image: url(<%= asset_path("jquery-ui/ui-icons_0073ea_256x240.png") %>); }
-.ui-state-default .ui-icon { background-image: url(<%= asset_path("jquery-ui/ui-icons_666666_256x240.png") %>); }
-.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(<%= asset_path("jquery-ui/ui-icons_ffffff_256x240.png") %>); }
-.ui-state-active .ui-icon {background-image: url(<%= asset_path("jquery-ui/ui-icons_454545_256x240.png") %>); }
-.ui-state-highlight .ui-icon {background-image: url(<%= asset_path("jquery-ui/ui-icons_0073ea_256x240.png") %>); }
-.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(<%= asset_path("jquery-ui/ui-icons_ff0084_256x240.png") %>); }
-
-/* positioning */
-.ui-icon-carat-1-n { background-position: 0 0; }
-.ui-icon-carat-1-ne { background-position: -16px 0; }
-.ui-icon-carat-1-e { background-position: -32px 0; }
-.ui-icon-carat-1-se { background-position: -48px 0; }
-.ui-icon-carat-1-s { background-position: -64px 0; }
-.ui-icon-carat-1-sw { background-position: -80px 0; }
-.ui-icon-carat-1-w { background-position: -96px 0; }
-.ui-icon-carat-1-nw { background-position: -112px 0; }
-.ui-icon-carat-2-n-s { background-position: -128px 0; }
-.ui-icon-carat-2-e-w { background-position: -144px 0; }
-.ui-icon-triangle-1-n { background-position: 0 -16px; }
-.ui-icon-triangle-1-ne { background-position: -16px -16px; }
-.ui-icon-triangle-1-e { background-position: -32px -16px; }
-.ui-icon-triangle-1-se { background-position: -48px -16px; }
-.ui-icon-triangle-1-s { background-position: -64px -16px; }
-.ui-icon-triangle-1-sw { background-position: -80px -16px; }
-.ui-icon-triangle-1-w { background-position: -96px -16px; }
-.ui-icon-triangle-1-nw { background-position: -112px -16px; }
-.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
-.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
-.ui-icon-arrow-1-n { background-position: 0 -32px; }
-.ui-icon-arrow-1-ne { background-position: -16px -32px; }
-.ui-icon-arrow-1-e { background-position: -32px -32px; }
-.ui-icon-arrow-1-se { background-position: -48px -32px; }
-.ui-icon-arrow-1-s { background-position: -64px -32px; }
-.ui-icon-arrow-1-sw { background-position: -80px -32px; }
-.ui-icon-arrow-1-w { background-position: -96px -32px; }
-.ui-icon-arrow-1-nw { background-position: -112px -32px; }
-.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
-.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
-.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
-.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
-.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
-.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
-.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
-.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
-.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
-.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
-.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
-.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
-.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
-.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
-.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
-.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
-.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
-.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
-.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
-.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
-.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
-.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
-.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
-.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
-.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
-.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
-.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
-.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
-.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
-.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
-.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
-.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
-.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
-.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
-.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
-.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
-.ui-icon-arrow-4 { background-position: 0 -80px; }
-.ui-icon-arrow-4-diag { background-position: -16px -80px; }
-.ui-icon-extlink { background-position: -32px -80px; }
-.ui-icon-newwin { background-position: -48px -80px; }
-.ui-icon-refresh { background-position: -64px -80px; }
-.ui-icon-shuffle { background-position: -80px -80px; }
-.ui-icon-transfer-e-w { background-position: -96px -80px; }
-.ui-icon-transferthick-e-w { background-position: -112px -80px; }
-.ui-icon-folder-collapsed { background-position: 0 -96px; }
-.ui-icon-folder-open { background-position: -16px -96px; }
-.ui-icon-document { background-position: -32px -96px; }
-.ui-icon-document-b { background-position: -48px -96px; }
-.ui-icon-note { background-position: -64px -96px; }
-.ui-icon-mail-closed { background-position: -80px -96px; }
-.ui-icon-mail-open { background-position: -96px -96px; }
-.ui-icon-suitcase { background-position: -112px -96px; }
-.ui-icon-comment { background-position: -128px -96px; }
-.ui-icon-person { background-position: -144px -96px; }
-.ui-icon-print { background-position: -160px -96px; }
-.ui-icon-trash { background-position: -176px -96px; }
-.ui-icon-locked { background-position: -192px -96px; }
-.ui-icon-unlocked { background-position: -208px -96px; }
-.ui-icon-bookmark { background-position: -224px -96px; }
-.ui-icon-tag { background-position: -240px -96px; }
-.ui-icon-home { background-position: 0 -112px; }
-.ui-icon-flag { background-position: -16px -112px; }
-.ui-icon-calendar { background-position: -32px -112px; }
-.ui-icon-cart { background-position: -48px -112px; }
-.ui-icon-pencil { background-position: -64px -112px; }
-.ui-icon-clock { background-position: -80px -112px; }
-.ui-icon-disk { background-position: -96px -112px; }
-.ui-icon-calculator { background-position: -112px -112px; }
-.ui-icon-zoomin { background-position: -128px -112px; }
-.ui-icon-zoomout { background-position: -144px -112px; }
-.ui-icon-search { background-position: -160px -112px; }
-.ui-icon-wrench { background-position: -176px -112px; }
-.ui-icon-gear { background-position: -192px -112px; }
-.ui-icon-heart { background-position: -208px -112px; }
-.ui-icon-star { background-position: -224px -112px; }
-.ui-icon-link { background-position: -240px -112px; }
-.ui-icon-cancel { background-position: 0 -128px; }
-.ui-icon-plus { background-position: -16px -128px; }
-.ui-icon-plusthick { background-position: -32px -128px; }
-.ui-icon-minus { background-position: -48px -128px; }
-.ui-icon-minusthick { background-position: -64px -128px; }
-.ui-icon-close { background-position: -80px -128px; }
-.ui-icon-closethick { background-position: -96px -128px; }
-.ui-icon-key { background-position: -112px -128px; }
-.ui-icon-lightbulb { background-position: -128px -128px; }
-.ui-icon-scissors { background-position: -144px -128px; }
-.ui-icon-clipboard { background-position: -160px -128px; }
-.ui-icon-copy { background-position: -176px -128px; }
-.ui-icon-contact { background-position: -192px -128px; }
-.ui-icon-image { background-position: -208px -128px; }
-.ui-icon-video { background-position: -224px -128px; }
-.ui-icon-script { background-position: -240px -128px; }
-.ui-icon-alert { background-position: 0 -144px; }
-.ui-icon-info { background-position: -16px -144px; }
-.ui-icon-notice { background-position: -32px -144px; }
-.ui-icon-help { background-position: -48px -144px; }
-.ui-icon-check { background-position: -64px -144px; }
-.ui-icon-bullet { background-position: -80px -144px; }
-.ui-icon-radio-off { background-position: -96px -144px; }
-.ui-icon-radio-on { background-position: -112px -144px; }
-.ui-icon-pin-w { background-position: -128px -144px; }
-.ui-icon-pin-s { background-position: -144px -144px; }
-.ui-icon-play { background-position: 0 -160px; }
-.ui-icon-pause { background-position: -16px -160px; }
-.ui-icon-seek-next { background-position: -32px -160px; }
-.ui-icon-seek-prev { background-position: -48px -160px; }
-.ui-icon-seek-end { background-position: -64px -160px; }
-.ui-icon-seek-start { background-position: -80px -160px; }
-/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
-.ui-icon-seek-first { background-position: -80px -160px; }
-.ui-icon-stop { background-position: -96px -160px; }
-.ui-icon-eject { background-position: -112px -160px; }
-.ui-icon-volume-off { background-position: -128px -160px; }
-.ui-icon-volume-on { background-position: -144px -160px; }
-.ui-icon-power { background-position: 0 -176px; }
-.ui-icon-signal-diag { background-position: -16px -176px; }
-.ui-icon-signal { background-position: -32px -176px; }
-.ui-icon-battery-0 { background-position: -48px -176px; }
-.ui-icon-battery-1 { background-position: -64px -176px; }
-.ui-icon-battery-2 { background-position: -80px -176px; }
-.ui-icon-battery-3 { background-position: -96px -176px; }
-.ui-icon-circle-plus { background-position: 0 -192px; }
-.ui-icon-circle-minus { background-position: -16px -192px; }
-.ui-icon-circle-close { background-position: -32px -192px; }
-.ui-icon-circle-triangle-e { background-position: -48px -192px; }
-.ui-icon-circle-triangle-s { background-position: -64px -192px; }
-.ui-icon-circle-triangle-w { background-position: -80px -192px; }
-.ui-icon-circle-triangle-n { background-position: -96px -192px; }
-.ui-icon-circle-arrow-e { background-position: -112px -192px; }
-.ui-icon-circle-arrow-s { background-position: -128px -192px; }
-.ui-icon-circle-arrow-w { background-position: -144px -192px; }
-.ui-icon-circle-arrow-n { background-position: -160px -192px; }
-.ui-icon-circle-zoomin { background-position: -176px -192px; }
-.ui-icon-circle-zoomout { background-position: -192px -192px; }
-.ui-icon-circle-check { background-position: -208px -192px; }
-.ui-icon-circlesmall-plus { background-position: 0 -208px; }
-.ui-icon-circlesmall-minus { background-position: -16px -208px; }
-.ui-icon-circlesmall-close { background-position: -32px -208px; }
-.ui-icon-squaresmall-plus { background-position: -48px -208px; }
-.ui-icon-squaresmall-minus { background-position: -64px -208px; }
-.ui-icon-squaresmall-close { background-position: -80px -208px; }
-.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
-.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
-.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
-.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
-.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
-.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
-
-
-/* Misc visuals
-----------------------------------*/
-
-/* Corner radius */
-.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; }
-.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; }
-.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }
-.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -webkit-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }
-
-/* Overlays */
-.ui-widget-overlay { background: #eeeeee url(<%= asset_path("jquery-ui/ui-bg_flat_0_eeeeee_40x100.png") %>) 50% 50% repeat-x; opacity: .80;filter:Alpha(Opacity=80); }
-.ui-widget-shadow { margin: -4px 0 0 -4px; padding: 4px; background: #aaaaaa url(<%= asset_path("jquery-ui/ui-bg_flat_0_aaaaaa_40x100.png") %>) 50% 50% repeat-x; opacity: .60;filter:Alpha(Opacity=60); -khtml-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }/*
- * jQuery UI Datepicker 1.8.14
- *
- * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- * http://jquery.org/license
- *
- * http://docs.jquery.com/UI/Datepicker#theming
- */
-.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
-.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
-.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
-.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
-.ui-datepicker .ui-datepicker-prev { left:2px; }
-.ui-datepicker .ui-datepicker-next { right:2px; }
-.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
-.ui-datepicker .ui-datepicker-next-hover { right:1px; }
-.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
-.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
-.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
-.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
-.ui-datepicker select.ui-datepicker-month, 
-.ui-datepicker select.ui-datepicker-year { width: 49%;}
-.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
-.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
-.ui-datepicker td { border: 0; padding: 1px; }
-.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
-.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
-.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
-.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
-
-/* with multiple calendars */
-.ui-datepicker.ui-datepicker-multi { width:auto; }
-.ui-datepicker-multi .ui-datepicker-group { float:left; }
-.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
-.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
-.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
-.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
-.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
-.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
-.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
-.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }
-
-/* RTL support */
-.ui-datepicker-rtl { direction: rtl; }
-.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
-.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
-.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
-.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
-.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
-.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
-.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
-.ui-datepicker-rtl .ui-datepicker-group { float:right; }
-.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
-.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
-
-/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
-.ui-datepicker-cover {
-    display: none; /*sorry for IE5*/
-    display/**/: block; /*sorry for IE5*/
-    position: absolute; /*must have*/
-    z-index: -1; /*must have*/
-    filter: mask(); /*must have*/
-    top: -4px; /*must have*/
-    left: -4px; /*must have*/
-    width: 200px; /*must have*/
-    height: 200px; /*must have*/
-}
\ No newline at end of file

From 11d62eb3319d0b4708bc9211a71d4514f0ee9416 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 21 Jan 2021 12:05:29 +0100
Subject: [PATCH 14/27] add translation for "today" and "now" buttons

and remove useless translations
---
 app/assets/javascripts/admin/util.js.erb            | 4 ++--
 app/views/spree/admin/shared/_translations.html.erb | 5 ++---
 config/locales/en.yml                               | 6 ++----
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb
index f2297cafcd..85b2cabc4c 100644
--- a/app/assets/javascripts/admin/util.js.erb
+++ b/app/assets/javascripts/admin/util.js.erb
@@ -14,7 +14,7 @@ $(document).ready(function() {
     plugins: [
         ShortcutButtonsPlugin({
           button: [{
-            label: "Today"
+            label: Spree.translations.today
           }],
           label: "or",
           onClick: onClickButtons
@@ -30,7 +30,7 @@ $(document).ready(function() {
       plugins: [
         ShortcutButtonsPlugin({
           button: [{
-            label: "Now"
+            label: Spree.translations.now
           }],
           label: "or",
           onClick: onClickButtons
diff --git a/app/views/spree/admin/shared/_translations.html.erb b/app/views/spree/admin/shared/_translations.html.erb
index 13a4a6dd61..75a1028bfa 100644
--- a/app/views/spree/admin/shared/_translations.html.erb
+++ b/app/views/spree/admin/shared/_translations.html.erb
@@ -3,6 +3,8 @@
   {:flatpickr_date_format    => Spree.t(:flatpickr_date_format,
                               :scope => 'date_picker',
                               :default => 'Y-m-d H:i'),
+    :today                    => Spree.t('date_picker.today'),
+    :now                      => Spree.t('date_picker.now'),
     :add                      => I18n.t(:add, scope: :actions),
     :are_you_sure_delete      => Spree.t(:are_you_sure_delete),
     :bill_address             => I18n.t(:bill_address),
@@ -13,9 +15,6 @@
     :edit                     => Spree.t(:edit),
     :loading                  => Spree.t(:loading),
     :more                     => Spree.t(:more),
-    :datetime_ui_current_text => I18n.t('datetime_picker_ui.current_text'),
-    :datetime_ui_close_text   => I18n.t('datetime_picker_ui.close_text'),
-    :datetime_ui_time_text    => I18n.t('datetime_picker_ui.time_text'),
     :name                     => Spree.t(:name),
     :next                     => I18n.t(:next),
     :paste                    => I18n.t(:paste, scope: :actions),
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 97f2e5a4bc..0d3f774658 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -151,10 +151,6 @@ en:
       not_array_error: "must be an array"
       invalid_element_error: "must contain only valid integers"
 
-  datetime_picker_ui:
-    current_text: Now
-    close_text: Done
-    time_text: Time
   enterprise_mailer:
     confirmation_instructions:
       subject: "Please confirm the email address for %{enterprise}"
@@ -3594,6 +3590,8 @@ See the %{link} to find out more about %{sitename}'s features and to start using
           remember_this_card: Remember this card?
     date_picker:
       flatpickr_date_format: "Y-m-d H:i"
+      today: "Today"
+      now: "Now"
     orders:
       error_flash_for_unavailable_items: "An item in your cart has become unavailable. Please update the selected quantities."
       edit:

From e3db4e2e866025d167485566175f653dd1aa4119 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 21 Jan 2021 15:19:45 +0100
Subject: [PATCH 15/27] update test to match new datepicker

And use the method choose_today_from_datepicker
---
 spec/features/admin/subscriptions_spec.rb  | 4 +---
 spec/support/features/datepicker_helper.rb | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/spec/features/admin/subscriptions_spec.rb b/spec/features/admin/subscriptions_spec.rb
index af9c7b8eaa..0b73748b97 100644
--- a/spec/features/admin/subscriptions_spec.rb
+++ b/spec/features/admin/subscriptions_spec.rb
@@ -195,9 +195,7 @@ feature 'Subscriptions' do
         expect(page).to have_content 'can\'t be blank', count: 1
         expect(page).to have_content 'Oops! Please fill in all of the required fields...'
         find_field('begins_at').click
-        within(".ui-datepicker-calendar") do
-          find('.ui-datepicker-today').click
-        end
+        choose_today_from_datepicker
 
         click_button('Next')
         expect(page).to have_content 'BILLING ADDRESS'
diff --git a/spec/support/features/datepicker_helper.rb b/spec/support/features/datepicker_helper.rb
index 9c8b6adc63..afeef2a046 100644
--- a/spec/support/features/datepicker_helper.rb
+++ b/spec/support/features/datepicker_helper.rb
@@ -3,8 +3,8 @@
 module Features
   module DatepickerHelper
     def choose_today_from_datepicker
-      within(".ui-datepicker-calendar") do
-        find(".ui-datepicker-today").click
+      within(".flatpickr-calendar.open") do
+        find('.shortcut-buttons-flatpickr-button').click
       end
     end
 

From 6dbaf1f7f3900b22093b3daea0681462c6261dd4 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 21 Jan 2021 16:02:43 +0100
Subject: [PATCH 16/27] specify date and datetime format

---
 app/assets/javascripts/admin/util.js.erb            | 1 +
 app/views/spree/admin/shared/_translations.html.erb | 3 +++
 config/locales/en.yml                               | 3 ++-
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb
index 85b2cabc4c..698f199816 100644
--- a/app/assets/javascripts/admin/util.js.erb
+++ b/app/assets/javascripts/admin/util.js.erb
@@ -25,6 +25,7 @@ $(document).ready(function() {
     {},
     window.FLATPICKR_DATE_DEFAULT,
     {
+      dateFormat: Spree.translations.flatpickr_datetime_format,
       enableTime: true,
       time_24hr: true,
       plugins: [
diff --git a/app/views/spree/admin/shared/_translations.html.erb b/app/views/spree/admin/shared/_translations.html.erb
index 75a1028bfa..ae1c510129 100644
--- a/app/views/spree/admin/shared/_translations.html.erb
+++ b/app/views/spree/admin/shared/_translations.html.erb
@@ -1,6 +1,9 @@
 <script>
   Spree.translations = <%==
   {:flatpickr_date_format    => Spree.t(:flatpickr_date_format,
+                              :scope => 'date_picker',
+                              :default => 'Y-m-d'),
+    :flatpickr_datetime_format    => Spree.t(:flatpickr_datetime_format,
                               :scope => 'date_picker',
                               :default => 'Y-m-d H:i'),
     :today                    => Spree.t('date_picker.today'),
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 0d3f774658..1368104cfc 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3589,7 +3589,8 @@ See the %{link} to find out more about %{sitename}'s features and to start using
           or_enter_new_card: "Or, enter details for a new card:"
           remember_this_card: Remember this card?
     date_picker:
-      flatpickr_date_format: "Y-m-d H:i"
+      flatpickr_date_format: "Y-m-d"
+      flatpickr_datetime_format: "Y-m-d H:i"
       today: "Today"
       now: "Now"
     orders:

From 1dbafcaf7dd2ca22f778788967cc52f61c307ebd Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 21 Jan 2021 16:59:38 +0100
Subject: [PATCH 17/27] remove animation

To make tests ok.
I could use Capybara.disable_animation = true, but there was no animation to old datetimepicker, so it's more consistant like this.
---
 .../stylesheets/admin/plugins/flatpickr-customization.scss    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
index 70090c9223..a667d912a5 100644
--- a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
+++ b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
@@ -1,4 +1,8 @@
 .flatpickr-calendar {
+    /* Disable animation */
+    &.animate.open {
+        animation: none;
+    }
     border-radius: 0;
     &.arrowBottom:after {
         border-top-color: #eceef1;

From 3ab1d728a113d50dd971afa9a9acd4aa92685877 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 21 Jan 2021 16:59:59 +0100
Subject: [PATCH 18/27] update helper with right selectors

As we now use flatpickr, need to update css/xpath selectors used by tests.
---
 spec/support/features/datepicker_helper.rb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/spec/support/features/datepicker_helper.rb b/spec/support/features/datepicker_helper.rb
index afeef2a046..8aff099ccb 100644
--- a/spec/support/features/datepicker_helper.rb
+++ b/spec/support/features/datepicker_helper.rb
@@ -21,15 +21,15 @@ module Features
     end
 
     def navigate_datepicker_to_previous_month
-      find('#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev').click
+      find('.flatpickr-calendar.open .flatpickr-months .flatpickr-prev-month').click
     end
 
     def navigate_datepicker_to_next_month
-      find('#ui-datepicker-div .ui-datepicker-header .ui-datepicker-next').click
+      find('.flatpickr-calendar.open .flatpickr-months .flatpickr-next-month').click
     end
 
     def datepicker_month_and_year
-      find("#ui-datepicker-div .ui-datepicker-title").text
+      find(".flatpickr-calendar.open .flatpickr-current-month").text
     end
   end
 end

From b72ef18ad647d8414fece3102241bddb654f705f Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 27 Jan 2021 21:18:51 +0100
Subject: [PATCH 19/27] update datepicker_helper and add method to select date

Introduce a new method `select_date_from_datepicker` and then use it on test
---
 .../admin/bulk_order_management_spec.rb       | 19 ++++++-------------
 spec/support/features/datepicker_helper.rb    | 13 ++++++++++---
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/spec/features/admin/bulk_order_management_spec.rb b/spec/features/admin/bulk_order_management_spec.rb
index 9c6f8fbf13..5a1aae73de 100644
--- a/spec/features/admin/bulk_order_management_spec.rb
+++ b/spec/features/admin/bulk_order_management_spec.rb
@@ -471,7 +471,7 @@ feature '
 
       it "displays only line items whose orders meet the date restriction criteria, when changed" do
         find('#start_date_filter').click
-        select_date(Time.zone.today - 8.days)
+        select_date_from_datepicker Time.zone.today - 8.days
 
         expect(page).to have_selector "tr#li_#{li1.id}"
         expect(page).to have_selector "tr#li_#{li2.id}"
@@ -479,7 +479,7 @@ feature '
         expect(page).to have_no_selector "tr#li_#{li4.id}"
 
         find('#end_date_filter').click
-        select_date(Time.zone.today + 1.day)
+        select_date_from_datepicker Time.zone.today + 1.day
 
         expect(page).to have_selector "tr#li_#{li1.id}"
         expect(page).to have_selector "tr#li_#{li2.id}"
@@ -496,7 +496,8 @@ feature '
 
         it "shows a dialog and ignores changes when confirm dialog is accepted" do
           page.driver.accept_modal :confirm, text: "Unsaved changes exist and will be lost if you continue." do
-            fill_in "start_date_filter", with: (Date.current - 9).strftime('%Y-%m-%d')
+            find('#start_date_filter').click
+            select_date_from_datepicker Time.zone.today - 9.days
           end
           expect(page).to have_no_selector "#save-bar"
           within("tr#li_#{li2.id} td.quantity") do
@@ -506,7 +507,8 @@ feature '
 
         it "shows a dialog and keeps changes when confirm dialog is rejected" do
           page.driver.dismiss_modal :confirm, text: "Unsaved changes exist and will be lost if you continue." do
-            fill_in "start_date_filter", with: (Date.current - 9).strftime("%F %T")
+            find('#start_date_filter').click
+            select_date_from_datepicker Time.zone.today - 9.days
           end
           expect(page).to have_selector "#save-bar"
           within("tr#li_#{li2.id} td.quantity") do
@@ -747,13 +749,4 @@ feature '
     visit spree.admin_bulk_order_management_path
     expect(page).to have_no_text 'Loading orders'
   end
-
-  def select_date(date)
-    # Wait for datepicker to open and be associated to the datepicker trigger.
-    expect(page).to have_selector("#ui-datepicker-div")
-
-    navigate_datepicker_to_month date
-
-    find('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default', text: date.strftime("%e").to_s.strip, exact_text: true).click
-  end
 end
diff --git a/spec/support/features/datepicker_helper.rb b/spec/support/features/datepicker_helper.rb
index 8aff099ccb..b54e46bd2c 100644
--- a/spec/support/features/datepicker_helper.rb
+++ b/spec/support/features/datepicker_helper.rb
@@ -8,9 +8,14 @@ module Features
       end
     end
 
+    def select_date_from_datepicker(date)
+      navigate_datepicker_to_month date
+      find('.flatpickr-calendar.open .flatpickr-days .flatpickr-day', text: date.strftime("%e").to_s.strip, exact_text: true, match: :first).click
+    end
+    
     def navigate_datepicker_to_month(date, reference_date = Time.zone.today)
-      month_and_year = date.strftime("%B %Y")
-
+      month_and_year = date.strftime("%-m %Y")
+      
       until datepicker_month_and_year == month_and_year.upcase
         if date < reference_date
           navigate_datepicker_to_previous_month
@@ -29,7 +34,9 @@ module Features
     end
 
     def datepicker_month_and_year
-      find(".flatpickr-calendar.open .flatpickr-current-month").text
+      month = find(".flatpickr-calendar.open .flatpickr-current-month select.flatpickr-monthDropdown-months").value.to_i + 1
+      year = find(".flatpickr-calendar.open .flatpickr-current-month .numInputWrapper .cur-year").value
+      return month.to_s + " " + year.to_s
     end
   end
 end

From f5c77f17a6e3e16c5373902a9c45228402493844 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 22 Jan 2021 09:53:18 +0100
Subject: [PATCH 20/27] remove useless files.

As we use flatpickr, these files are useless. Delete it.
---
 .../admin/directives/date_picker.js.coffee            |  9 ---------
 .../admin/directives/datetime_picker.js.coffee        | 11 -----------
 2 files changed, 20 deletions(-)
 delete mode 100644 app/assets/javascripts/admin/directives/date_picker.js.coffee
 delete mode 100644 app/assets/javascripts/admin/directives/datetime_picker.js.coffee

diff --git a/app/assets/javascripts/admin/directives/date_picker.js.coffee b/app/assets/javascripts/admin/directives/date_picker.js.coffee
deleted file mode 100644
index 6b5cac3e1b..0000000000
--- a/app/assets/javascripts/admin/directives/date_picker.js.coffee
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/directives/datetime_picker.js.coffee b/app/assets/javascripts/admin/directives/datetime_picker.js.coffee
deleted file mode 100644
index 0d9728701f..0000000000
--- a/app/assets/javascripts/admin/directives/datetime_picker.js.coffee
+++ /dev/null
@@ -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

From 54f34093b4477fe7b563d605622b4c137b2d0d48 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 27 Jan 2021 21:22:44 +0100
Subject: [PATCH 21/27] reorder tests and set oc1 to an "updated" value

Seems like we need to set a value to "" before fill_in the input.
---
 .../admin/order_cycles/simple_spec.rb         | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/spec/features/admin/order_cycles/simple_spec.rb b/spec/features/admin/order_cycles/simple_spec.rb
index 614401248e..ae9f6ad722 100644
--- a/spec/features/admin/order_cycles/simple_spec.rb
+++ b/spec/features/admin/order_cycles/simple_spec.rb
@@ -25,9 +25,13 @@ feature '
     # When I go to the order cycles page
     login_as_admin_and_visit admin_order_cycles_path
 
-    # And I fill in a time using the datepicker
+    ## -- OC1
+    find("input#oc#{oc1.id}_name").set ""
+    fill_in("oc#{oc1.id}_name", :with => "Updated Order Cycle 1")
+    
+    ## -- OC2
+    fill_in("oc#{oc2.id}_name", :with => "Updated Order Cycle 2")
     within("tr.order-cycle-#{oc2.id} .orders_open_at") do
-      # When I trigger the datepicker
       find('input.datetimepicker', match: :first).click
     end
 
@@ -41,9 +45,9 @@ feature '
       expect(find("input#oc#{oc2.id}_orders_open_at").value).to eq "2000-12-01 12:12"
     end
 
-    # And I fill in a time using the datepicker
+    # -- OC3
+    fill_in("oc#{oc3.id}_name", :with => "Updated Order Cycle 3")
     within("tr.order-cycle-#{oc3.id} .orders_close_at") do
-      # When I trigger the datepicker
       find('input.datetimepicker', match: :first).click
     end
 
@@ -53,20 +57,15 @@ feature '
     end
 
     within("tr.order-cycle-#{oc3.id}") do
-      # Then that date/time should appear on the form
       expect(find("input#oc#{oc3.id}_orders_close_at").value).to eq "2041-12-01 12:12"
     end
 
-    # Manually fill out time
-    find("input#oc#{oc2.id}_name").set "Updated Order Cycle 2"
-    find("input#oc#{oc3.id}_name").set "Updated Order Cycle 3"
-
     click_button 'Save Changes'
 
     # Then my details should have been saved
     expect(page).to have_selector "#save-bar", text: "Order cycles have been updated."
     order_cycles = OrderCycle.order("id ASC")
-    expect(order_cycles.map(&:name)).to eq ["Order Cycle 1", "Updated Order Cycle 2", "Updated Order Cycle 3"]
+    expect(order_cycles.map(&:name)).to eq ["Updated Order Cycle 1", "Updated Order Cycle 2", "Updated Order Cycle 3"]
     expect(order_cycles.map { |oc| oc.orders_open_at.sec }).to eq [0, 0, 4]
     expect(order_cycles.map { |oc| oc.orders_close_at.sec }).to eq [1, 3, 0]
   end

From 9619ea06de2fa9c563aa8791cce11502e947dfe5 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 25 Jan 2021 10:56:03 +0100
Subject: [PATCH 22/27] code climate checks

 - use variables for colors instead of values
 - trailinf line at the end of file
 - new line after each declaration
 - 2 spaces of indentation
 - avoid qualifying elements in selectors
 - prefer lowercase in hexa color
---
 app/assets/stylesheets/admin/datepicker.scss  |   6 +-
 .../plugins/flatpickr-customization.scss      | 106 ++++++++++--------
 2 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/app/assets/stylesheets/admin/datepicker.scss b/app/assets/stylesheets/admin/datepicker.scss
index 176415d930..d75093d941 100644
--- a/app/assets/stylesheets/admin/datepicker.scss
+++ b/app/assets/stylesheets/admin/datepicker.scss
@@ -2,8 +2,8 @@ input.datetimepicker {
   min-width: 12.9em;
 }
 
-.container input[readonly].flatpickr-input {
-  background-color: #ffffff;
+.container .flatpickr-input {
+  background-color: $white;
   cursor: pointer;
 }
 
@@ -11,4 +11,4 @@ img.ui-datepicker-trigger {
   margin-left: -1.75em;
   position: absolute;
   margin-top: 0.5em;
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
index a667d912a5..39880e4683 100644
--- a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
+++ b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
@@ -1,50 +1,58 @@
-.flatpickr-calendar {
-    /* Disable animation */
-    &.animate.open {
-        animation: none;
-    }
-    border-radius: 0;
-    &.arrowBottom:after {
-        border-top-color: #eceef1;
-    }
-    &.arrowTop:after {
-        border-bottom-color: #5498DA;
-    }
-    .flatpickr-months .flatpickr-month {
-        border-radius: 0;
-    }
-    .flatpickr-months .flatpickr-month,
-    .flatpickr-current-month .flatpickr-monthDropdown-months {
-        background: #5498DA;
-    }
-        
-    .flatpickr-weekdays {
-        background: #5498DA;
-        span.flatpickr-weekday {
-            background: #5498DA;
-        }
-    }
-  
-    .flatpickr-day.selected,
-    .flatpickr-day.startRange,
-    .flatpickr-day.endRange,
-    .flatpickr-day.selected.inRange,
-    .flatpickr-day.startRange.inRange,
-    .flatpickr-day.endRange.inRange,
-    .flatpickr-day.selected:focus,
-    .flatpickr-day.startRange:focus,
-    .flatpickr-day.endRange:focus,
-    .flatpickr-day.selected:hover,
-    .flatpickr-day.startRange:hover,
-    .flatpickr-day.endRange:hover,
-    .flatpickr-day.selected.prevMonthDay,
-    .flatpickr-day.startRange.prevMonthDay,
-    .flatpickr-day.endRange.prevMonthDay,
-    .flatpickr-day.selected.nextMonthDay,
-    .flatpickr-day.startRange.nextMonthDay,
-    .flatpickr-day.endRange.nextMonthDay {
-        background: #5498DA;
-        border-color: #5498DA;
-    }
+$background-grey: #eceef1;
+$background-blue: #5498da;
 
-}
\ No newline at end of file
+.flatpickr-calendar {
+  border-radius: 0;
+
+  // Disable animation
+  &.animate.open {
+    animation: none;
+  }
+
+  &.arrowBottom::after {
+    border-top-color: $background-grey;
+  }
+
+  &.arrowTop::after {
+    border-bottom-color: $background-blue;
+  }
+
+  .flatpickr-months .flatpickr-month {
+    border-radius: 0;
+  }
+
+  .flatpickr-months .flatpickr-month,
+  .flatpickr-current-month .flatpickr-monthDropdown-months {
+    background: $background-blue;
+  }
+
+  .flatpickr-weekdays {
+    background: $background-blue;
+
+    .flatpickr-weekday {
+      background: $background-blue;
+    }
+  }
+
+  .flatpickr-day.selected,
+  .flatpickr-day.startRange,
+  .flatpickr-day.endRange,
+  .flatpickr-day.selected.inRange,
+  .flatpickr-day.startRange.inRange,
+  .flatpickr-day.endRange.inRange,
+  .flatpickr-day.selected:focus,
+  .flatpickr-day.startRange:focus,
+  .flatpickr-day.endRange:focus,
+  .flatpickr-day.selected:hover,
+  .flatpickr-day.startRange:hover,
+  .flatpickr-day.endRange:hover,
+  .flatpickr-day.selected.prevMonthDay,
+  .flatpickr-day.startRange.prevMonthDay,
+  .flatpickr-day.endRange.prevMonthDay,
+  .flatpickr-day.selected.nextMonthDay,
+  .flatpickr-day.startRange.nextMonthDay,
+  .flatpickr-day.endRange.nextMonthDay {
+    background: $background-blue;
+    border-color: $background-blue;
+  }
+}

From 8383b19458a1bd4f5b81a00f2e79e289a18d7dd5 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 25 Jan 2021 11:02:03 +0100
Subject: [PATCH 23/27] factorize as we need only one file for datepicker

---
 .../admin/components/date-picker.scss           | 17 ++++++++++++++++-
 app/assets/stylesheets/admin/datepicker.scss    | 14 --------------
 2 files changed, 16 insertions(+), 15 deletions(-)
 delete mode 100644 app/assets/stylesheets/admin/datepicker.scss

diff --git a/app/assets/stylesheets/admin/components/date-picker.scss b/app/assets/stylesheets/admin/components/date-picker.scss
index 2550f46d76..2e267fa7e3 100644
--- a/app/assets/stylesheets/admin/components/date-picker.scss
+++ b/app/assets/stylesheets/admin/components/date-picker.scss
@@ -9,4 +9,19 @@
   input.datepicker {
     width: 96px !important;
   }
-}
\ No newline at end of file
+}
+
+input.datetimepicker {
+  min-width: 12.9em;
+}
+
+.container input[readonly].flatpickr-input {
+  background-color: $white;
+  cursor: pointer;
+}
+
+img.ui-datepicker-trigger {
+  margin-left: -1.75em;
+  position: absolute;
+  margin-top: 0.5em;
+}
diff --git a/app/assets/stylesheets/admin/datepicker.scss b/app/assets/stylesheets/admin/datepicker.scss
deleted file mode 100644
index d75093d941..0000000000
--- a/app/assets/stylesheets/admin/datepicker.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-input.datetimepicker {
-  min-width: 12.9em;
-}
-
-.container .flatpickr-input {
-  background-color: $white;
-  cursor: pointer;
-}
-
-img.ui-datepicker-trigger {
-  margin-left: -1.75em;
-  position: absolute;
-  margin-top: 0.5em;
-}

From fbd6db89c901bbf460d744523c78de72fe8a4e95 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 27 Jan 2021 21:20:38 +0100
Subject: [PATCH 24/27] avoid selecting the day in the previous month

When you select date at the end of the month (27,28,29,30,...) it is likely possible that this date is already displayed by the calender but for the previous month.
Avoid this by using css selector :not()
---
 spec/support/features/datepicker_helper.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/support/features/datepicker_helper.rb b/spec/support/features/datepicker_helper.rb
index b54e46bd2c..d891e4e294 100644
--- a/spec/support/features/datepicker_helper.rb
+++ b/spec/support/features/datepicker_helper.rb
@@ -10,7 +10,7 @@ module Features
 
     def select_date_from_datepicker(date)
       navigate_datepicker_to_month date
-      find('.flatpickr-calendar.open .flatpickr-days .flatpickr-day', text: date.strftime("%e").to_s.strip, exact_text: true, match: :first).click
+      find('.flatpickr-calendar.open .flatpickr-days .flatpickr-day:not(.prevMonthDay)', text: date.strftime("%e").to_s.strip, exact_text: true, match: :first).click
     end
     
     def navigate_datepicker_to_month(date, reference_date = Time.zone.today)

From 6a2461b30b2fbe35bd5df9f67d71d61f3b113497 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 29 Jan 2021 10:16:31 +0100
Subject: [PATCH 25/27] overriding specific selectors needs to be as specific

so disable the scss-lint check QualifyingElement
---
 app/assets/stylesheets/admin/components/date-picker.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/admin/components/date-picker.scss b/app/assets/stylesheets/admin/components/date-picker.scss
index 2e267fa7e3..6b251b441f 100644
--- a/app/assets/stylesheets/admin/components/date-picker.scss
+++ b/app/assets/stylesheets/admin/components/date-picker.scss
@@ -2,6 +2,8 @@
 @import 'admin/globals/mixins';
 @import 'admin/plugins/font-awesome';
 
+// scss-lint:disable QualifyingElement
+
 .date-range-filter {
   .range-divider {
     padding: 0;
@@ -25,3 +27,5 @@ img.ui-datepicker-trigger {
   position: absolute;
   margin-top: 0.5em;
 }
+
+// scss-lint:enable QualifyingElement

From 57e20373fcb8d891faba729c0c0bb339fb769af1 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 29 Jan 2021 10:17:01 +0100
Subject: [PATCH 26/27] overriding flatpickr selectors needs to be with
 uppercase

so disable the scss-lint check SelectorFormat
---
 .../stylesheets/admin/plugins/flatpickr-customization.scss    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
index 39880e4683..e26fb0af97 100644
--- a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
+++ b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
@@ -1,6 +1,8 @@
 $background-grey: #eceef1;
 $background-blue: #5498da;
 
+// scss-lint:disable SelectorFormat
+
 .flatpickr-calendar {
   border-radius: 0;
 
@@ -56,3 +58,5 @@ $background-blue: #5498da;
     border-color: $background-blue;
   }
 }
+
+// scss-lint:enable SelectorFormat

From 653f576bb158eeaa1d6643a204ac652ed9cc1393 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 29 Jan 2021 11:35:29 +0100
Subject: [PATCH 27/27] Fill date and time value into the fields

as the new datetimepicker provide a disabled input field, it needs to be virtualized (and cannot be filled in with method `fill_in`)
---
 .../complex_creating_specific_time_spec.rb    | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/spec/features/admin/order_cycles/complex_creating_specific_time_spec.rb b/spec/features/admin/order_cycles/complex_creating_specific_time_spec.rb
index 237764eaae..6a67fd141a 100644
--- a/spec/features/admin/order_cycles/complex_creating_specific_time_spec.rb
+++ b/spec/features/admin/order_cycles/complex_creating_specific_time_spec.rb
@@ -10,8 +10,8 @@ feature '
   include AuthenticationHelper
   include WebHelper
 
-  let(:order_cycle_opening_time) { Time.zone.local(2040, 11, 0o6, 0o6, 0o0, 0o0).strftime("%F %T %z") }
-  let(:order_cycle_closing_time) { Time.zone.local(2040, 11, 13, 17, 0o0, 0o0).strftime("%F %T %z") }
+  let(:order_cycle_opening_time) { Time.zone.local(2040, 11, 0o6, 0o6, 0o0, 0o0) }
+  let(:order_cycle_closing_time) { Time.zone.local(2040, 11, 13, 17, 0o0, 0o0) }
 
   scenario "creating an order cycle with full interface", js: true do
     # Given coordinating, supplying and distributing enterprises with some products with variants
@@ -48,8 +48,27 @@ feature '
     expect(page).to have_button("Create", disabled: false)
 
     # If I fill in the basic fields
-    fill_in 'order_cycle_orders_open_at', with: order_cycle_opening_time
-    fill_in 'order_cycle_orders_close_at', with: order_cycle_closing_time
+    find('#order_cycle_orders_open_at').click
+    # select date
+    select_date_from_datepicker Time.at(order_cycle_opening_time)
+    # select time
+    within(".flatpickr-calendar.open .flatpickr-time") do
+      find('.flatpickr-hour').set('%02d' % order_cycle_opening_time.hour)
+      find('.flatpickr-minute').set('%02d' % order_cycle_opening_time.min)
+    end
+    # hide the datetimepicker
+    find("body").send_keys(:escape)
+
+    find('#order_cycle_orders_close_at').click
+    # select date
+    select_date_from_datepicker Time.at(order_cycle_closing_time)
+     # select time
+     within(".flatpickr-calendar.open .flatpickr-time") do
+      find('.flatpickr-hour').set('%02d' % order_cycle_closing_time.hour)
+      find('.flatpickr-minute').set('%02d' % order_cycle_closing_time.min)
+    end
+    # hide the datetimepicker
+    find("body").send_keys(:escape)
 
     # And I add a coordinator fee
     click_button 'Add coordinator fee'
@@ -109,8 +128,8 @@ feature '
     toggle_columns "Producers", "Shops"
 
     expect(page).to have_input "oc#{oc.id}[name]", value: "Plums & Avos"
-    expect(page).to have_input "oc#{oc.id}[orders_open_at]", value: order_cycle_opening_time
-    expect(page).to have_input "oc#{oc.id}[orders_close_at]", value: order_cycle_closing_time
+    expect(page).to have_input "oc#{oc.id}[orders_open_at]", value: order_cycle_opening_time.strftime("%F %T %z")
+    expect(page).to have_input "oc#{oc.id}[orders_close_at]", value: order_cycle_closing_time.strftime("%F %T %z")
     expect(page).to have_content "My coordinator"
 
     expect(page).to have_selector 'td.producers', text: 'My supplier'