《Ant Design Vue DatePicker 的使用指南》

在前端开发中，日期选择器是一个常用的组件，用于方便用户选择日期。Ant Design Vue 的 DatePicker 组件提供了丰富的功能和灵活的配置选项，可以满足各种日期选择的需求。

一、引入 Ant Design Vue DatePicker

首先，确保你已经正确安装了 Ant Design Vue 库。在你的 Vue 项目中，可以通过以下方式引入 DatePicker 组件：

import { DatePicker } from 'ant-design-vue';

二、基本用法

        1、简单日期选择

        locale的作用：修改单一组件的语言

<template>
  <a-space :size="12" direction="vertical">
    <a-date-picker v-model:value="value1" />
    <a-date-picker v-model:value="value2" :locale="locale" />
  </a-space>
</template>

<script setup>
import { ref } from "vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

const value1 = ref(null);
const value2 = ref(null);
</script>

        2、选择日期范围

<template>
  <a-space :size="12" direction="vertical">
    <a-range-picker v-model:value="value1" :locale="locale" />
  </a-space>
</template>

<script setup>
import { ref } from "vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

const value1 = ref();
</script>

三、高级功能

        1、选择后格式化显示日期,添加属性

        format="YYYY-MM-DD"

        format="YYYY/MM/DD"

    <a-date-picker
      v-model:value="value1"
      :locale="locale"
      format="YYYY-MM-DD"
    />
    <a-date-picker
      v-model:value="value1"
      :locale="locale"
      format="YYYY/MM/DD"
    />

         2、有时候我们需要通过接口回显后端传来的数据，只需要添加

        valueFormat="YYYY-MM-DD"

                这里展示选择后输出的数据

<template>
  <a-space :size="12" direction="vertical">
    <a-date-picker
      v-model:value="value1"
      :locale="locale"
      format="YYYY-MM-DD"
	  valueFormat="YYYY-MM-DD"
      @change="value1change"
    />
    <a-date-picker
      v-model:value="value1"
      :locale="locale"
      format="YYYY/MM/DD"
	  valueFormat="YYYY-MM-DD"
      @change="value1change"
    />
  </a-space>
</template>

<script setup>
import { ref } from "vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

const value1 = ref();
const value1change = (val) => {
  console.log(val);
};
</script>

                这里展示数据回显,给value1赋值"2024-08-08"

<template>
  <a-space :size="12" direction="vertical">
    <a-date-picker
      v-model:value="value1"
      :locale="locale"
      format="YYYY-MM-DD"
	  valueFormat="YYYY-MM-DD"
      @change="value1change"
    />
    <a-date-picker
      v-model:value="value1"
      :locale="locale"
      format="YYYY/MM/DD"
	  valueFormat="YYYY-MM-DD"
      @change="value1change"
    />
  </a-space>
</template>

<script setup>
import { ref } from "vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

const value1 = ref('2024-08-08');
const value1change = (val) => {
  console.log(val);
};
</script>

四、总结

Ant Design Vue 的 DatePicker 组件提供了强大而灵活的日期选择功能。通过合理地配置属性和处理事件，可以满足各种复杂的日期选择需求。无论是简单的日期选择还是日期范围选择、格式化日期、禁用特定日期等，DatePicker 都能轻松应对。在实际开发中，根据具体的业务需求，充分发挥 DatePicker 的优势，能够提高用户体验和开发效率。