Python私教张大鹏 Vue3整合AntDesignVue之DatePicker 日期选择框

案例：选择日期

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-date-picker v-model:value="date"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：选择周

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-date-picker v-model:value="date" picker="week"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：选择月

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-date-picker v-model:value="date" picker="month"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：选择季度

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-date-picker v-model:value="date" picker="quarter"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：选择年份

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-date-picker v-model:value="date" picker="year"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：选择日期区间

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-range-picker v-model:value="date"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：选择日期时间区间

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-range-picker v-model:value="date" show-time/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：选择周区间

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-range-picker v-model:value="date" picker="week"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：选择月区间

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-range-picker v-model:value="date" picker="month"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：选择年区间

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-range-picker v-model:value="date" picker="year"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：日期格式

<script setup>
import {ref} from "vue";const date = ref(null)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-range-picker v-model:value="date" format="YYYY年MM月DD日"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div>
</template>

案例：预设日期

<script setup>
import {ref} from "vue";
import dayjs from "dayjs"const date = ref(null)
const presets = [{label: "昨天",value: dayjs().add(-1, 'd')},{label: "上周",value: dayjs().add(-7, 'd')},{label: "上月",value: dayjs().add(-1, 'month')}
]
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-date-picker v-model:value="date" :presets="presets"/><a-divider/><a-typography-title>{{ date }}</a-typography-title></div>
</template>

案例：预设日期区间

<script setup>
import {ref} from "vue";
import dayjs from "dayjs"const date = ref(null)
const presets = [{label: "最近一周",value: [dayjs().add(-7, 'd'), dayjs()]},{label: "最近半月",value: [dayjs().add(-15, 'd'), dayjs()]},{label: "最近一月",value: [dayjs().add(-1, 'month'), dayjs()]}
]
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-range-picker v-model:value="date" :presets="presets"/><a-divider/><a-typography-title>{{ date }}</a-typography-title></div>
</template>

案例：日期选中事件

<script setup>
import {ref} from "vue";const date = ref(null)
const onChange = (date, dateStr) => {console.log(date)console.log(dateStr)
}
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-date-picker v-model:value="date" @change="onChange"/><a-divider/><a-typography-title>{{ date }}</a-typography-title></div>
</template>

案例：日期区间选中事件

<script setup>
import {ref} from "vue";const date = ref(null)
const onChange = (dates, dateStrs) => {console.log(dates)console.log(dateStrs)
}
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-range-picker v-model:value="date" @change="onChange"/><a-divider/><a-typography-title>{{ date }}</a-typography-title></div>
</template>

案例：显示中文

<script setup>
import {ref} from "vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN"const date = ref(null)
const onChange = (dates, dateStrs) => {console.log(dates)console.log(dateStrs)
}
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-range-picker v-model:value="date" @change="onChange" :locale="locale"/><a-divider/><a-typography-title>{{ date }}</a-typography-title></div>
</template>