antd DatePicker选择今天的时候多了8个小时

### Ant Design DatePicker 组件选择时分秒 为了使 `DatePicker` 组件能够选择具体的小时、分钟和秒钟，在配置该组件时需指定其显示模式为带有时间的选择器。通过设置 `showTime` 属性可以开启这一功能，并允许进一步定制时间选择的行为。 对于希望集成时分秒选择到日期选取中的场景，下面给出了一段基于 React 的代码片段来展示如何实现这一点： ```jsx import { DatePicker } from 'antd'; import moment from 'moment'; const { RangePicker } = DatePicker; // 定义禁用未来日期的方法 const disabledDate = (current) => { return current && current > moment().endOf('day'); } // 使用 showTime 配置项启用时间选择并自定义格式化字符串 <RangePicker format="YYYY-MM-DD HH:mm:ss" showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }} disabledDate={disabledDate} /> ``` 上述代码不仅启用了对时间和日期的同时选择，还设置了默认的时间值为午夜零点整[^1]。此外，通过传递给 `showTime` 选项一个对象参数，还可以更细致地控制时间部分的表现形式以及初始状态。 当涉及到 Vue 版本的 ant-design-vue 库时，类似的逻辑同样适用。这里提供了一个简单的例子用于说明怎样在 Vue 中应用相同的功能： ```vue <template> <a-range-picker v-model="dateValue" :format="'YYYY-MM-DD HH:mm:ss'" :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" :disabled-date="disabledDate" /> </template> <script> export default { data() { return { dateValue: null, }; }, methods: { disabledDate(current) { return current && current > moment().endOf('day'); } } }; </script> ``` 这段代码展示了如何利用 `v-model` 双向绑定选中的日期范围至组件的状态变量上，同时也实现了对未来日期的选择限制[^3]。