debian-mirror-gitlab/app/assets/javascripts/vue_shared/components/pikaday.vue

78 lines
1.9 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2018-12-13 13:39:08 +05:30
import Pikaday from 'pikaday';
2021-02-22 17:27:13 +05:30
import { GlIcon } from '@gitlab/ui';
2018-12-13 13:39:08 +05:30
import { parsePikadayDate, pikadayToString } from '~/lib/utils/datetime_utility';
2019-07-07 11:18:12 +05:30
import { __ } from '~/locale';
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
export default {
name: 'DatePicker',
2021-02-22 17:27:13 +05:30
components: {
GlIcon,
},
2018-12-13 13:39:08 +05:30
props: {
label: {
type: String,
required: false,
2019-07-07 11:18:12 +05:30
default: __('Date picker'),
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
selectedDate: {
type: Date,
required: false,
default: null,
},
minDate: {
type: Date,
required: false,
default: null,
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
maxDate: {
type: Date,
required: false,
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,
2019-09-04 21:01:54 +05:30
setDefaultDate: Boolean(this.selectedDate),
2018-12-13 13:39:08 +05:30
minDate: this.minDate,
maxDate: this.maxDate,
parse: dateString => parsePikadayDate(dateString),
toString: date => pikadayToString(date),
onSelect: this.selected.bind(this),
onClose: this.toggled.bind(this),
2019-03-02 22:35:43 +05:30
firstDay: gon.first_day_of_week,
2018-12-13 13:39:08 +05:30
});
this.$el.append(this.calendar.el);
this.calendar.show();
},
beforeDestroy() {
this.calendar.destroy();
},
methods: {
selected(dateText) {
this.$emit('newDateSelected', this.calendar.toString(dateText));
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
toggled() {
this.$emit('hidePicker');
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
<div class="pikaday-container">
<div class="dropdown open">
2019-02-15 15:39:39 +05:30
<button type="button" class="dropdown-menu-toggle" data-toggle="dropdown" @click="toggled">
<span class="dropdown-toggle-text"> {{ label }} </span>
2021-02-22 17:27:13 +05:30
<gl-icon name="chevron-down" class="gl-absolute gl-right-3 gl-top-3 gl-text-gray-500" />
2018-03-17 18:26:18 +05:30
</button>
</div>
</div>
</template>