手冊地址：https://2x.antdv.com/components/date-picker-cn ``` <template> <div> <ul> <li> 用戶名:<a-input v-model:value="userinfo.username" placeholder="Basic usage" /> </li> <li> 年齡:<a-input v-model:value="userinfo.age" placeholder="Basic usage" /> </li> <li> 性別: <a-radio-group v-model:value="userinfo.sex"> <a-radio value="男">男</a-radio> <a-radio value="女">女</a-radio> </a-radio-group> </li> <li> 愛好： <span v-for="(item, index) in userinfo.hobby" :key="index"> <a-checkbox v-model:checked="item.checked">{{ item.label }}</a-checkbox> </span> </li> <li> <a-select v-model:value="userinfo.selectCity" mode="tags" style="width: 300px" > <a-select-option v-for="(item, index) in userinfo.citys" :key="index" :value="item" > {{ item }} </a-select-option> </a-select> </li> <li> 日期； <a-date-picker v-model:value="userinfo.birsthday" @change="packchange" /> </li> <li> 日期默認值: <a-space direction="vertical"> <a-date-picker v-model:value="userinfo.day" /> </a-space> </li> </ul> </div> {{ userinfo }} </template> <script lang="ts"> import { defineComponent } from "vue"; import moment from "moment"; export default defineComponent({ data() { const dateFormat = "YYYY-MM-DD"; return { userinfo: { username: "", age: "", sex: "", hobby: [ { label: "吃飯", checked: true }, { label: "睡覺", checked: true }, { label: "看電視", checked: true }, ], citys: ["北京", "上海", "天安門", "重慶"], selectCity: "北京", birsthday: "", day: moment("2015-06-06", dateFormat), }, }; }, methods: { packchange(e) { var logtime = new Date(e._d); console.log(logtime.getTime()); }, }, }); </script> <style lang="scss"> </style> ```