CDatePicker 日期选择组件

功能说明

CDatePicker 是一个日期选择组件，用于在表单中选择日期或日期范围。组件支持三种选择模式：日期选择、日期时间选择和日期范围选择。

引用方式

import { CDatePicker } from '@components/forms/datePicker';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• mode (String，可选)：日期时间选择器模式，可选值有 date、dateTime、dateRange，默认为 date
• placeholder (String，可选)：输入框占位提示文本
• limitStart (String，可选)：可选日期的开始日期，格式为 YYYY-MM-DD
• limitEnd (String，可选)：可选日期的结束日期，格式为 YYYY-MM-DD
• fields (String，可选)：日期选择粒度，可选值有 year、month、day，默认为 day
• readOnly (Boolean，可选)：只读模式，默认为 false
• allowClear (Boolean，可选)：是否允许清除已选值，默认为 false

使用示例

基础用法（日期选择模式）

<template>
  <CForm :form="form">
    <CFormItem name="birthday" label="出生日期">
      <CDatePicker placeholder="请选择出生日期" />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CDatePicker } from '@components/forms/datePicker';

export default {
  components: {
    CForm,
    CFormItem,
    CDatePicker
  },
  data() {
    return {
      form: {
        birthday: ''
      }
    };
  }
};
</script>

日期时间选择模式

<CFormItem name="meetingTime" label="会议时间">
  <CDatePicker 
    mode="dateTime" 
    placeholder="请选择会议时间" 
  />
</CFormItem>

日期范围选择模式

<CFormItem name="vacationPeriod" label="休假时间">
  <CDatePicker 
    mode="dateRange" 
    placeholder="请选择休假时间段" 
  />
</CFormItem>

限制可选日期范围

<CFormItem name="appointmentDate" label="预约日期">
  <CDatePicker 
    limitStart="2023-01-01" 
    limitEnd="2023-12-31" 
    placeholder="请选择预约日期" 
  />
</CFormItem>

允许清除已选值

<CFormItem name="deadline" label="截止日期">
  <CDatePicker 
    :allowClear="true" 
    placeholder="请选择截止日期" 
  />
</CFormItem>

注意事项

1. 不同的 mode 值对应不同的日期选择交互方式：

• date：选择单个日期，使用系统日期选择器
• dateTime：选择日期和时间，使用自定义的日期时间选择器
• dateRange：选择日期范围，使用自定义的日期范围选择器

1. 当设置 allowClear 为 true 时，已选择日期后会显示清除图标，点击可清除已选值
2. limitStart 和 limitEnd 参数仅在 mode 为 date 时生效
3. 组件默认的可选日期范围是当前年份的前后 30 年
4. 在只读模式下，日期选择器将不可操作