Removed jQuery UI datepicker

Part of #18437 to remove jQuery UI. This removes the datepicker

4 files changed, 13 insertions, 8 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 637fca4d4da..0a09f1c7578 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -10,7 +10,6 @@ function requireAll(context) { return context.keys().map(context); }
 
 window.$ = window.jQuery = require('jquery');
 require('jquery-ui/ui/autocomplete');
-require('jquery-ui/ui/datepicker');
 require('jquery-ui/ui/draggable');
 require('jquery-ui/ui/effect-highlight');
 require('jquery-ui/ui/sortable');
@@ -35,6 +34,7 @@ require('bootstrap/js/transition');
 require('bootstrap/js/tooltip');
 require('bootstrap/js/popover');
 require('select2/select2.js');
+require('pikaday');
 window._ = require('underscore');
 window.Dropzone = require('dropzone');
 require('mousetrap');
diff --git a/app/assets/javascripts/boards/filters/due_date_filters.js.es6 b/app/assets/javascripts/boards/filters/due_date_filters.js.es6
index 7e192e90fe6..ac2966cef5d 100644
--- a/app/assets/javascripts/boards/filters/due_date_filters.js.es6
+++ b/app/assets/javascripts/boards/filters/due_date_filters.js.es6
@@ -1,6 +1,7 @@
 /* global Vue */
+/* global dateFormat */
 
 Vue.filter('due-date', (value) => {
   const date = new Date(value);
-  return $.datepicker.formatDate('M d, yy', date);
+  return dateFormat(date, 'mmm d, yyyy');
 });
diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6
index d81d4cf8425..4409f908eef 100644
--- a/app/assets/javascripts/due_date_select.js.es6
+++ b/app/assets/javascripts/due_date_select.js.es6
@@ -1,4 +1,5 @@
 /* eslint-disable wrap-iife, func-names, space-before-function-paren, comma-dangle, prefer-template, consistent-return, class-methods-use-this, arrow-body-style, no-unused-vars, no-underscore-dangle, no-new, max-len, no-sequences, no-unused-expressions, no-param-reassign */
+/* global dateFormat */
 
 (function(global) {
   class DueDateSelect {
@@ -86,7 +87,7 @@
         // Construct Date object manually to avoid buggy dateString support within Date constructor
         const dateArray = this.rawSelectedDate.split('-').map(v => parseInt(v, 10));
         const dateObj = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
-        this.displayedDate = $.datepicker.formatDate('M d, yy', dateObj);
+        this.displayedDate = dateFormat(dateObj, 'mmm d, yyyy');
       } else {
         this.displayedDate = 'No due date';
       }
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index 293b856dc4d..d02e98bf44e 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -3,6 +3,8 @@
 /* global UsersSelect */
 /* global ZenMode */
 /* global Autosave */
+/* global dateFormat */
+/* global Pikaday */
 
 (function() {
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
@@ -35,12 +37,13 @@
       this.initMoveDropdown();
       $issuableDueDate = $('#issuable-due-date');
       if ($issuableDueDate.length) {
-        $('.datepicker').datepicker({
-          dateFormat: 'yy-mm-dd',
-          onSelect: function(dateText, inst) {
-            return $issuableDueDate.val(dateText);
+        new Pikaday({
+          field: $issuableDueDate.get(0),
+          format: 'yyyy-mm-dd',
+          onSelect: function(dateText) {
+            $issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
           }
-        }).datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', $issuableDueDate.val()));
+        }).setDate(new Date($issuableDueDate.val()));
       }
     }