<template> <div class="page"> <a-button type="primary" @click="visible = true">按钮</a-button> <el-button type="primary" @click="visible = true">按钮</el-button> <br><br> <el-date-picker placeholder="请选择日期(ElementUI)" v-model="date" /> <a-date-picker placeholder="基础日期选择(AntD)" v-model="antdDate" style="margin: 0 10px;" @change="handleDateChange" /> <a-date-picker placeholder="带快捷选项" v-model="antdDate2" style="margin: 0 10px;" :disabled-date="disabledDate" :preset-ranges="presetRanges" /> <br><br> <a-range-picker :placeholder="['开始日期', '结束日期']" v-model="dateRange" style="margin: 0 10px;" /> <a-month-picker placeholder="选择月份" v-model="monthDate" style="margin: 0 10px;" /> <a-week-picker placeholder="选择周" v-model="weekDate" style="margin: 0 10px;" /> <br><br> <a-time-picker placeholder="选择时间" v-model="timeValue" style="margin: 0 10px;" /> <a-date-picker show-time placeholder="日期时间选择" v-model="dateTime" style="margin: 0 10px;" /> <br><br> <a-modal v-model:visible="visible" title="你好世界"> <p>这是 Ant Design Vue 中文演示</p> <div>已选日期: {{ antdDate ? antdDate.format('YYYY年MM月DD日') : '未选择' }}</div> </a-modal> </div> </template> <script> export default { data() { return { date: null, antdDate: null, antdDate2: null, dateRange: null, monthDate: null, weekDate: null, timeValue: null, dateTime: null, visible: false, presetRanges: { '今天': [moment(), moment()], '昨天': [moment().subtract(1,'days'), moment().subtract(1,'days')], '近7天': [moment().subtract(6,'days'), moment()], '近30天': [moment().subtract(29,'days'), moment()], '本月': [moment().startOf('month'), moment().endOf('month')], '本年': [moment().startOf('year'), moment().endOf('year')] } } }, methods: { handleDateChange(date, dateString) { console.log('选中日期:', date, '日期字符串:', dateString); }, disabledDate(current) { return current && current > moment().endOf('day'); } } } </script> <style> .page { padding: 20px; } .ant-picker, .el-date-editor { margin-bottom: 10px; margin-right: 10px; } </style>
正在加载 Monaco Editor...