1 files changed, 14 insertions, 43 deletions
diff --git a/app/assets/javascripts/vue_shared/components/pikaday.vue b/app/assets/javascripts/vue_shared/components/pikaday.vue
index 85481f3f7b4..3c0ac32e512 100644
--- a/app/assets/javascripts/vue_shared/components/pikaday.vue
+++ b/app/assets/javascripts/vue_shared/components/pikaday.vue
@@ -1,20 +1,13 @@
 <script>
-import Pikaday from 'pikaday';
-import { GlIcon } from '@gitlab/ui';
-import { parsePikadayDate, pikadayToString } from '~/lib/utils/datetime_utility';
-import { __ } from '~/locale';
+import { GlDatepicker } from '@gitlab/ui';
+import { pikadayToString } from '~/lib/utils/datetime_utility';
 
 export default {
   name: 'DatePicker',
   components: {
-    GlIcon,
+    GlDatepicker,
   },
   props: {
-    label: {
-      type: String,
-      required: false,
-      default: __('Date picker'),
-    },
     selectedDate: {
       type: Date,
       required: false,
@@ -31,32 +24,9 @@ export default {
       default: null,
     },
   },
-  mounted() {
-    this.calendar = new Pikaday({
-      field: this.$el.querySelector('.dropdown-menu-toggle'),
-      theme: 'gitlab-theme animate-picker',
-      format: 'yyyy-mm-dd',
-      container: this.$el,
-      defaultDate: this.selectedDate,
-      setDefaultDate: Boolean(this.selectedDate),
-      minDate: this.minDate,
-      maxDate: this.maxDate,
-      parse: dateString => parsePikadayDate(dateString),
-      toString: date => pikadayToString(date),
-      onSelect: this.selected.bind(this),
-      onClose: this.toggled.bind(this),
-      firstDay: gon.first_day_of_week,
-    });
-
-    this.$el.append(this.calendar.el);
-    this.calendar.show();
-  },
-  beforeDestroy() {
-    this.calendar.destroy();
-  },
   methods: {
-    selected(dateText) {
-      this.$emit('newDateSelected', this.calendar.toString(dateText));
+    selected(date) {
+      this.$emit('newDateSelected', pikadayToString(date));
     },
     toggled() {
       this.$emit('hidePicker');
@@ -66,12 +36,13 @@ export default {
 </script>
 
 <template>
-  <div class="pikaday-container">
-    <div class="dropdown open">
-      <button type="button" class="dropdown-menu-toggle" data-toggle="dropdown" @click="toggled">
-        <span class="dropdown-toggle-text"> {{ label }} </span>
-        <gl-icon name="chevron-down" class="gl-absolute gl-right-3 gl-top-3 gl-text-gray-500" />
-      </button>
-    </div>
-  </div>
+  <gl-datepicker
+    :value="selectedDate"
+    :min-date="minDate"
+    :max-date="maxDate"
+    start-opened
+    @close="toggled"
+    @click="toggled"
+    @input="selected"
+  />
 </template>