react antd DatePicker不可修改时间,默认为所选日期的23点59分59秒
时间: 2024-02-18 09:01:50 浏览: 107
要让 antd DatePicker 可以修改时间并设置为所选日期的 00 点 00 分 00 秒,可以使用 DatePicker 组件的 `showTime` 属性和 `defaultValue` 属性来实现。
示例代码:
```jsx
import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
function onChange(dates, dateStrings) {
console.log('From: ', dates[0], ', to: ', dates[1]);
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}
function disabledDate(current) {
// Can not select days before today and today
return current && current < moment().endOf('day');
}
function disabledDateTime() {
return {
disabledHours: () => [],
disabledMinutes: () => [],
disabledSeconds: () => [],
};
}
function disabledRangeTime(_, type) {
if (type === 'start') {
return {
disabledHours: () => [],
disabledMinutes: () => [],
disabledSeconds: () => [],
};
}
return {
disabledHours: () => [],
disabledMinutes: () => [],
disabledSeconds: () => [],
};
}
function App() {
return (
<div>
<DatePicker
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
defaultValue={moment('2021-06-01', 'YYYY-MM-DD')}
disabledDate={disabledDate}
disabledTime={disabledDateTime}
format="YYYY-MM-DD HH:mm:ss"
onChange={onChange}
/>
</div>
);
}
export default App;
```
在 `showTime` 属性中,设置 `defaultValue` 为所选日期的 00 点 00 分 00 秒,即 `moment('00:00:00', 'HH:mm:ss')`。
在 `defaultValue` 属性中,设置默认选中日期为 `moment('2021-06-01', 'YYYY-MM-DD')`。
这样设置之后,就可以在 antd DatePicker 组件中选择日期和时间,并且默认时间为所选日期的 00 点 00 分 00 秒。
阅读全文