# Date-picker 日期选择器

<template>
  <w-date-picker
    ref="datePicker"
    :value="date"
    type="date"
    format="yyyy - MM - dd"
    value-format="yyyy-MM-dd"
    placeholder="请选择日期"
    @input="setDate"
    @pick="setDate"
  >
    <date-inputs v-model="dateInputs" @toggle-date-picker="onToggleDatePicker" />
  </w-date-picker>
</template>

<script>
  import DateInputs from '../business-components/TheDateInputs'
  import { validateDate } from '../../../packages/utils/utils'

  export default {
    components: {
      DateInputs
    },

    watch: {
      dateInputs(val) {
        if (validateDate(val)) {
          this.date = val
        }
      }
    },

    methods: {
      onToggleDatePicker() {
        if (!validateDate(this.date)) {
          this.setDate('')
        }
        this.$refs.datePicker.handleFocus();
      },

      setDate(val) {
        this.date = this.dateInputs = val
      },
    }
  }
</script>