# DatePicker 日期组件

DatePicker 日期组件

## Attributes

| 参数        | 说明          | 类型    | 可选值                       | 默认值       |
| ----------- | ------------- | ------- | ---------------------------- | ------------ |
| v-model     | 双向绑定数据  | String  | -                            | ''           |
| disabled    | disabled 状态 | Boolean | -                            | `false`      |
| type        | 日期类型      | String  | year、date、month、daterange | `date`       |
| valueFormat | 格式化数据    | String  | -                            | 'yyyy-MM-dd' |
| format      | 显示格式      | String  | -                            | 'yyyy-MM-dd' |

若 format 参数有值，则按照其值的格式显示日期，为空时，展示的格式则 type 的类型影响，具体如下：

| 类型值 | 显示示例   |
| ------ | ---------- |
| year   | 2022       |
| month  | 2022-07    |
| date   | 2022-07-08 |

## Events

| 事件名称 | 说明             | 回调参数 |
| -------- | ---------------- | -------- |
| change   | 值发生改变时触发 | value    |
| focus    | 聚焦时触发       | -        |
| blur     | 失去焦点时触发   | -        |

## Demo

### 基本用法

```html
<template>
  <div class="demo">
    <f-date-picker type="year" placeholder="请选择年份" v-model="year"></f-date-picker>
    <f-date-picker type="year" placeholder="只读模式" v-model="year" format="yyyy年" readonly></f-date-picker>
    <f-date-picker type="year" placeholder="禁用模式" v-model="year" disabled></f-date-picker>

    <f-date-picker type="month" placeholder="请选择月份" v-model="month"></f-date-picker>
    <f-date-picker type="month" placeholder="月份不可操作" v-model="month" readonly></f-date-picker>
    <f-date-picker type="month" placeholder="月份不可操作" v-model="month" disabled ></f-date-picker>
    <f-date-picker type="month" placeholder="请选择月份" v-model="month" format="MM月"></f-date-picker>
    <f-date-picker type="month" placeholder="请选择月份" v-model="month" format="M月"></f-date-picker>
    <f-date-picker type="month" placeholder="请选择月份" v-model="month" format="yyyy年M月"></f-date-picker>

    <f-date-picker type="date" placeholder="请选择日期" v-model="date"></f-date-picker>
    <f-date-picker type="date" placeholder="请选择日期" v-model="date" readonly></f-date-picker>
    <f-date-picker type="date" placeholder="请选择日期" v-model="date" disabled ></f-date-picker>

    <f-date-picker type="daterange" placeholder="请选择日期" v-model="daterange"></f-date-picker>
    <f-date-picker type="daterange" placeholder="请选择日期" v-model="daterange" disabled></f-date-picker>
  </div>
</template>

<script>
export default {
  name: 'DatePickerDemo',
  data(){
    return {
      year:'',
      month:'',
      date:'',
      daterange:[]
    };
  },
  methods:{
    change:function(val){
      console.log('change',val);
    },
    blur:function(val){
      console.log('blur',val);
    },
    focus:function(val){
      console.log('focus',val);
    }
  }
};
</script>
```
