# DatePicker 日期选择器

# 基础用法

<vp-date-picker v-model="datePicker1" placeholder="请选择日期" />

<script>
  export default {
    data() {
      return {
        datePicker1: "",
      };
    },
  };
</script>

# 不可选中

<vp-date-picker
  v-model="datePicker2"
  placeholder="请选择日期"
  :picker-option="pickerOption"
  @blur="handleDatePickerBlur"
  @focus="handleDatePickerFocus"
  @change="handleDatePickerChange"
/>

<script>
  export default {
    data() {
      return {
        datePicker2: "",
        pickerOption: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
      };
    },
    methods: {
      handleDatePickerBlur(vm) {
        console.log(vm);
      },
      handleDatePickerFocus(vm) {
        console.log(vm);
      },
      handleDatePickerChange(vm) {
        console.log(vm);
      },
    }
  };
</script>