<template>
  <div class="ws-state-date">
    <Datepicker
      class="date-picker"
      :value="value"
      @input="$emit('input',$moment($event).format('YYYY-MM-DD'))"
      :format="customFormatter"
      typeable
      placeholder="選擇日期"
      calendar-class="calendar"
      input-class="input"
    >
      <template slot="afterDateInput">
        <v-icon
          size="20"
          class="icon"
        >mdi-calendar</v-icon>
      </template></Datepicker>
  </div>
</template>

<script>
import Datepicker from "vuejs-datepicker";
export default {
  props: {
    clearable: {
      type: Boolean,
      default: true
    },
    value: {},
    placeholder: {
      type: String,
      default: "選擇日期"
    },
    format: {
      type: String,
      default: "YYYY-MM-DD"
    }
  },
  methods: {
    customFormatter(date) {
      return this.$moment(date).format(this.format);
    }
  },
  components: {
    Datepicker
  }
};
</script>

<style lang="scss">
@import "../assets/scss/ws-state-date.scss";
</style>