首页a-range-picker默认值

a-range-picker默认值

时间: 2025-06-29 15:08:21 浏览: 7

### 设置 `a-range-picker` 组件默认值为了设置 `a-range-picker` 的默认值，可以通过绑定 `v-model` 属性并初始化该属性对应的变量来实现。对于日期时间的选择，默认情况下可以选择具体的日期范围以及设定特定的时间。 #### 使用 `moment.js` 如果项目中已经集成了 `moment.js`，那么可以利用它来进行日期对象的创建和格式化： ```javascript // main.js 中全局配置 moment.js import moment from "moment"; Vue.prototype.$moment = moment; ``` 在组件内部，通过 `data()` 函数返回初始状态的对象，并指定默认选中的时间段： ```vue <template> <a-range-picker v-model="selectedDateRange" :show-time="{ format: 'HH:mm:ss' }" /> </template> <script> export default { data() { return { selectedDateRange: [ this.$moment().startOf('day'), this.$moment().endOf('day') ] }; } }; </script> ``` 这段代码设置了当天的第一秒到最后一秒作为默认选择的时间段[^3]。 #### 不依赖第三方库的方式如果不希望引入额外的依赖项，则可以直接使用 JavaScript 原生 Date 对象配合 Ant Design Vue 提供的功能完成相同的效果： ```vue <template> <a-range-picker v-model:value="dateValue" showTime={{ true }} format="YYYY-MM-DD HH:mm:ss" > </a-range-picker> </template> <script> export default { data() { const now = new Date(); const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const endOfDay = new Date(startOfDay); endOfDay.setHours(23, 59, 59); return { dateValue: [startOfDay, endOfDay] }; }, }; </script> ``` 此方式同样实现了将当前日历日从零点至午夜设为预选项的目的[^1]。

阅读全文