ant-design-vue2-datepicker

Ant Design Vue v4 DatePicker 组件的 Vue 2.x 移植版本。

特性

• ✅ 完整移植 Ant Design Vue v4 DatePicker 所有功能
• ✅ 与原版完全一致的 API、样式和交互
• ✅ 支持日期、周、月、季度、年选择
• ✅ 支持范围选择（RangePicker）
• ✅ 支持预设快捷选项
• ✅ 支持禁用日期
• ✅ 支持多种尺寸
• ✅ 支持国际化
• ✅ 基于 dayjs，轻量无依赖

安装

npm install ant-design-vue2-datepicker
# 或
yarn add ant-design-vue2-datepicker

依赖

需要先安装以下依赖：

npm install @vue/composition-api portal-vue dayjs

使用

全局注册

import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
import PortalVue from 'portal-vue';
import DatePicker from 'ant-design-vue2-datepicker';
import 'ant-design-vue2-datepicker/dist/ant-design-vue2-datepicker.css';

Vue.use(VueCompositionAPI);
Vue.use(PortalVue);
Vue.use(DatePicker);

按需引入

import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
import { ADatePicker, ARangePicker } from 'ant-design-vue2-datepicker';
import 'ant-design-vue2-datepicker/dist/ant-design-vue2-datepicker.css';

Vue.use(VueCompositionAPI);
Vue.component('ADatePicker', ADatePicker);
Vue.component('ARangePicker', ARangePicker);

基础示例

日期选择

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

<script>
export default {
  data() {
    return {
      date: null,
    };
  },
};
</script>

范围选择

<template>
  <a-range-picker
    v-model="dateRange"
    :placeholder="['开始日期', '结束日期']"
  />
</template>

<script>
export default {
  data() {
    return {
      dateRange: null,
    };
  },
};
</script>

月份选择

<template>
  <a-date-picker v-model="month" picker="month" placeholder="请选择月份" />
</template>

年份选择

<template>
  <a-date-picker v-model="year" picker="year" placeholder="请选择年份" />
</template>

预设快捷选项

<template>
  <a-range-picker v-model="dateRange" :presets="presets" />
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      dateRange: null,
      presets: [
        {
          label: '最近7天',
          value: () => [dayjs().subtract(7, 'day'), dayjs()],
        },
        {
          label: '最近30天',
          value: () => [dayjs().subtract(30, 'day'), dayjs()],
        },
        {
          label: '本月',
          value: () => [dayjs().startOf('month'), dayjs().endOf('month')],
        },
      ],
    };
  },
};
</script>

禁用日期

<template>
  <a-date-picker
    v-model="date"
    :disabled-date="disabledDate"
    placeholder="不能选择今天之前"
  />
</template>

<script>
import dayjs from 'dayjs';

export default {
  methods: {
    disabledDate(current) {
      return current && current.isBefore(dayjs(), 'day');
    },
  },
};
</script>

API

DatePicker

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | value (v-model) | 日期值 | dayjs | string | - | | defaultValue | 默认日期 | dayjs | string | - | | picker | 选择器类型 | date | week | month | quarter | year | date | | format | 展示的日期格式 | string | YYYY-MM-DD | | valueFormat | 绑定值的格式 | string | - | | placeholder | 输入框提示文字 | string | - | | disabled | 禁用 | boolean | false | | disabledDate | 禁用日期 | (current: dayjs) => boolean | - | | allowClear | 是否显示清除按钮 | boolean | true | | showToday | 是否显示今天按钮 | boolean | true | | showTime | 是否显示时间选择 | boolean | object | false | | size | 输入框尺寸 | large | middle | small | middle | | bordered | 是否有边框 | boolean | true | | status | 状态 | error | warning | - | | presets | 预设快捷选项 | Array<{label: string, value: dayjs | () => dayjs}> | - | | locale | 国际化配置 | object | zh_CN | | open | 控制弹出层是否展开 | boolean | - |

DatePicker 事件

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | change | 日期变化时触发 | (date: dayjs, dateString: string) | | openChange | 弹出层展开/收起时触发 | (open: boolean) | | focus | 获得焦点时触发 | - | | blur | 失去焦点时触发 | - | | clear | 清除时触发 | - | | ok | 确定按钮点击时触发 | (date: dayjs) |

RangePicker

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | value (v-model) | 日期范围 | [dayjs, dayjs] | - | | defaultValue | 默认日期范围 | [dayjs, dayjs] | - | | picker | 选择器类型 | date | week | month | year | date | | format | 展示的日期格式 | string | YYYY-MM-DD | | placeholder | 输入框提示文字 | [string, string] | - | | separator | 分隔符 | string | ~ | | disabled | 禁用 | boolean | [boolean, boolean] | false | | disabledDate | 禁用日期 | (current: dayjs) => boolean | - | | allowClear | 是否显示清除按钮 | boolean | true | | presets | 预设快捷选项 | Array<{label: string, value: [dayjs, dayjs] | () => [dayjs, dayjs]}> | - |

RangePicker 事件

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | change | 日期范围变化时触发 | (dates: [dayjs, dayjs], dateStrings: [string, string]) | | calendarChange | 日期选择变化时触发（选择过程中） | (dates: [dayjs, dayjs]) | | openChange | 弹出层展开/收起时触发 | (open: boolean) | | ok | 确定按钮点击时触发 | (dates: [dayjs, dayjs]) |

国际化

import zhCN from 'ant-design-vue2-datepicker/src/locale/zh_CN';
import enUS from 'ant-design-vue2-datepicker/src/locale/en_US';

// 使用英文
<a-date-picker :locale="enUS" />

开发

# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 构建
npm run build

许可证

MIT