#  DatePicker 日期选择器

### 介绍
    
时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。
    
### 安装
    
```javascript
import { createApp } from 'vue';
import { DatePicker } from '@nutui/nutui';

const app = createApp();
app.use(DatePicker);
```
    
## 代码演示
    
### 日期选择-每列不显示中文
```html
<nut-datepicker
    v-model="currentDate"
    @confirm="confirm"
    v-model:visible="show"
    :is-show-chinese="false"
></nut-datepicker> 
```
```javascript
<script>
export default createDemo({
  setup(props, { emit }) {
    const show = ref(false);
    const desc = ref('2020-1-1');

    return {
      show,
      desc
      open: (index) => {
        show.value = true;
      },
      confirm: (res) => {
        desc.value = val.join('-');
      }
    };
  }
});
</script>
```
### 日期选择-限制开始结束时间
```html
<nut-datepicker
    v-model="currentDate"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="confirm"
    v-model:visible="show"
    :is-show-chinese="false"
></nut-datepicker> 
```
```javascript
<script>
export default createDemo({
  setup(props, { emit }) {
    const show = ref(false);
    const desc = ref('2020-1-1');

    return {
      show,
      desc,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      open: (index) => {
        show.value = true;
      },
      confirm: (res) => {
        desc.value = val.join('-');
      }
    };
  }
});
</script>
```
### 日期时间-限制开始结束时间（有默认值）
```html
<nut-datepicker
    v-model="currentDate"
    :min-date="minDate"
    :max-date="maxDate"
    type="datetime"
    @confirm="confirm"
    v-model:visible="show" 
></nut-datepicker> 
```
```javascript
<script>
export default createDemo({
  setup(props, { emit }) {
    const show = ref(false);
    const desc = ref('2020年-1月-1日-0时-0分');

    return {
      show,
      desc,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      open: (index) => {
        show.value = true;
      },
      confirm: (res) => {
        desc.value = val.join('-');
      }
    };
  }
});
</script>
```
### 时间选择-12小时制
```html
<nut-datepicker
    v-model="currentDate"
    type="time"
    :min-date="minDate"
    :max-date="maxDate"
    :is-use12-hours="true"
    @confirm="confirm"
    v-model:visible="show"
></nut-datepicker>
``` 
### 时间选择-分钟数递增步长设置
```html
<nut-datepicker
    v-model="currentDate"
    type="time"
    :minute-step="5"
    :min-date="minDate"
    :max-date="maxDate"
    :is-use12-hours="true"
    @confirm="confirm"
    v-model:visible="show"
></nut-datepicker>
```  

## API
    
### Props
    
| 参数            | 说明                                              | 类型    | 默认值   |
|-----------------|---------------------------------------------------|---------|----------|
| v-model         | 初始值                                            | Date    | `null`   |
| v-model:visible | 是否可见                                          | Boolean | `false`  |
| type            | 类型，日期'date'， 日期时间'datetime'，时间'time' | String  | `'date'` |
| is-use12-hours  | 是否十二小时制度，只限类型为'time'时使用          | Boolean | `false`  |
| minute-step     | 分钟步进值                                        | Number  | `1`      |
| is-show-chinese | 每列是否展示中文                                  | Boolean | `false`  |
| title           | 设置标题                                          | String  | `null`   |
| min-date        | 开始日期                                          | Date    | `十年前` |
| max-date        | 结束日期                                          | Date    | `十年后` |



### Events
    
| 事件名  | 说明               | 回调参数     |
|---------|--------------------|--------------|
| confirm | 点击确定按钮时触发 | event: Event |
| close   | 关闭时触发         | event: Event |