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>