<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-date-pickerv-model:value="date"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:选择周
<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-date-pickerv-model:value="date"picker="week"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:选择月
<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-date-pickerv-model:value="date"picker="month"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:选择季度
<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-date-pickerv-model:value="date"picker="quarter"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:选择年份
<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-date-pickerv-model:value="date"picker="year"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:选择日期区间
<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-range-pickerv-model:value="date"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:选择日期时间区间
<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-range-pickerv-model:value="date"show-time/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:选择周区间
<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-range-pickerv-model:value="date"picker="week"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:选择月区间
<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-range-pickerv-model:value="date"picker="month"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:选择年区间
<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-range-pickerv-model:value="date"picker="year"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:日期格式
<scriptsetup>import{ref}from"vue";const date =ref(null)</script><template><divclass="p-8 bg-indigo-50 text-center"><a-range-pickerv-model:value="date"format="YYYY年MM月DD日"/><a-divider/><a-typography-title>{{ date}}</a-typography-title></div></template>
案例:预设日期
<scriptsetup>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><divclass="p-8 bg-indigo-50 text-center"><a-date-pickerv-model:value="date":presets="presets"/><a-divider/><a-typography-title>{{ date }}</a-typography-title></div></template>
案例:预设日期区间
<scriptsetup>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><divclass="p-8 bg-indigo-50 text-center"><a-range-pickerv-model:value="date":presets="presets"/><a-divider/><a-typography-title>{{ date }}</a-typography-title></div></template>
案例:日期选中事件
<scriptsetup>import{ref}from"vue";const date =ref(null)constonChange=(date, dateStr)=>{console.log(date)console.log(dateStr)}</script><template><divclass="p-8 bg-indigo-50 text-center"><a-date-pickerv-model:value="date"@change="onChange"/><a-divider/><a-typography-title>{{ date }}</a-typography-title></div></template>
案例:日期区间选中事件
<scriptsetup>import{ref}from"vue";const date =ref(null)constonChange=(dates, dateStrs)=>{console.log(dates)console.log(dateStrs)}</script><template><divclass="p-8 bg-indigo-50 text-center"><a-range-pickerv-model:value="date"@change="onChange"/><a-divider/><a-typography-title>{{ date }}</a-typography-title></div></template>
案例:显示中文
<scriptsetup>import{ref}from"vue";import locale from"ant-design-vue/es/date-picker/locale/zh_CN"const date =ref(null)constonChange=(dates, dateStrs)=>{console.log(dates)console.log(dateStrs)}</script><template><divclass="p-8 bg-indigo-50 text-center"><a-range-pickerv-model:value="date"@change="onChange":locale="locale"/><a-divider/><a-typography-title>{{ date }}</a-typography-title></div></template>