<template>
    <a-range-picker
        @change="onChange"
        style="width: 100%"
        :showTime="showTime"
        :value="value"
        v-bind="$attrs"
    />
</template>

<script>
import moment from 'moment';

export default {
    props: {
        startTime: String,
        endTime: String,
        showTime: Boolean,
    },
    computed: {
        value() {
            return this.startTime ? [moment(this.startTime), moment(this.endTime)] : [];
        },
    },
    methods: {
        onChange(val, [startTimeString, endTimeString]) {
            this.$emit('update:startTime', startTimeString);
            this.$emit('update:endTime', endTimeString);
        },
    },
};
</script>
