Removed jQuery UI datepicker

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

6 files changed, 25 insertions, 14 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()));
       }
     }
 
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 8b93665d085..1dcd1f8a6fc 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -2,7 +2,6 @@
  * This is a manifest file that'll automatically include all the stylesheets available in this directory
  * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
  * the top of the compiled file, but it's generally better to create a new file per style scope.
- *= require jquery-ui/datepicker
  *= require jquery-ui/autocomplete
  *= require jquery.atwho
  *= require select2
@@ -19,6 +18,8 @@
  * directory.
  */
 
+@import "../../../node_modules/pikaday/scss/pikaday";
+
 /*
  * GitLab UI framework
  */
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 60a561c9f9c..d002150e531 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -85,11 +85,16 @@
 
 
 :javascript
-  var date = $('#personal_access_token_expires_at').val();
-
-  var datepicker = $(".datepicker").datepicker({
-    dateFormat: "yy-mm-dd",
-    minDate: 0
+  var $dateField = $('#personal_access_token_expires_at');
+  var date = $dateField.val();
+
+  new Pikaday({
+    field: $dateField.get(0),
+    format: 'yyyy-mm-dd',
+    minDate: new Date(),
+    onSelect: function(dateText) {
+      $dateField.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
+    }
   });
 
   $("#created-personal-access-token").click(function() {