Migrate Bootstrap dropdown to GitLab UI GlDropdown in pikaday.vue

app/assets/javascripts/vue_shared/components/pikaday.vue

 <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>

changelogs/unreleased/Migrate-Bootstrap-dropdown-to-GitLab-UI-GlDropdown-in-app-assets-javascri.yml

+---
+title: Migrate-Bootstrap-dropdown-to-GitLab-UI-GlDropdown-in-app/assets/javascripts/vue_shared/components/pikaday.vue
+merge_request: 41458
+author: nuwe1
+type: other

ee/spec/features/epics/update_epic_spec.rb

@@ -149,8 +149,8 @@ RSpec.describe 'Update Epic', :js do
       it 'opens datepicker when clicking Edit button' do
         page.within('.issuable-sidebar .block.start-date') do
           click_button('Edit')
-          expect(find('.value-type-fixed')).to have_selector('.pikaday-container')
-          expect(find('.value-type-fixed')).to have_selector('.pikaday-container .pika-single.is-bound')
+          expect(find('.value-type-fixed')).to have_selector('.gl-datepicker')
+          expect(find('.value-type-fixed')).to have_selector('.gl-datepicker .pika-single.is-bound')
         end
       end
     end

spec/frontend/vue_shared/components/pikaday_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlDatepicker } from '@gitlab/ui';
 import datePicker from '~/vue_shared/components/pikaday.vue';
 
 describe('datePicker', () => {
   let wrapper;
-  beforeEach(() => {
+
+  const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(datePicker, {
-      propsData: {
-        label: 'label',
-      },
-      attachToDocument: true,
-    });
+      propsData,
     });
+  };
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
+  it('should emit newDateSelected when GlDatePicker emits the input event', () => {
+    const minDate = new Date();
+    const maxDate = new Date();
+    const selectedDate = new Date();
+    const theDate = selectedDate.toISOString().slice(0, 10);
 
-  it('should render label text', () => {
-    expect(
-      wrapper
-        .find('.dropdown-toggle-text')
-        .text()
-        .trim(),
-    ).toEqual('label');
-  });
+    buildWrapper({ minDate, maxDate, selectedDate });
 
-  it('should show calendar', () => {
-    expect(wrapper.find('.pika-single').element).toBeDefined();
+    expect(wrapper.find(GlDatepicker).props()).toMatchObject({
+      minDate,
+      maxDate,
+      value: selectedDate,
     });
+    wrapper.find(GlDatepicker).vm.$emit('input', selectedDate);
+    expect(wrapper.emitted('newDateSelected')[0][0]).toBe(theDate);
+  });
+  it('should emit the hidePicker event when GlDatePicker emits the close event', () => {
+    buildWrapper();
 
-  it('should emit hidePicker event when dropdown is clicked', () => {
-    // Removing the bootstrap data-toggle property,
-    // because it interfers with our click event
-    delete wrapper.find('.dropdown-menu-toggle').element.dataset.toggle;
-
-    wrapper.find('.dropdown-menu-toggle').trigger('click');
+    wrapper.find(GlDatepicker).vm.$emit('close');
 
-    expect(wrapper.emitted('hidePicker')).toEqual([[]]);
+    expect(wrapper.emitted('hidePicker')).toHaveLength(1);
   });
 });