diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/pikaday.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/pikaday.vue | 57 |
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> |