ant design框架 周一到周日 每天可以设置不同时间的示例
时间: 2024-05-09 08:16:19 浏览: 16
以下是Ant Design框架中设置不同时间的示例:
```jsx
import { TimePicker } from 'antd';
function onChange(time, timeString) {
console.log(time, timeString);
}
function App() {
return (
<div>
<p>周一:</p>
<TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
<p>周二:</p>
<TimePicker onChange={onChange} defaultOpenValue={moment('09:00:00', 'HH:mm:ss')} />
<p>周三:</p>
<TimePicker onChange={onChange} defaultOpenValue={moment('12:00:00', 'HH:mm:ss')} />
<p>周四:</p>
<TimePicker onChange={onChange} defaultOpenValue={moment('18:00:00', 'HH:mm:ss')} />
<p>周五:</p>
<TimePicker onChange={onChange} defaultOpenValue={moment('21:00:00', 'HH:mm:ss')} />
<p>周六:</p>
<TimePicker onChange={onChange} defaultOpenValue={moment('14:00:00', 'HH:mm:ss')} />
<p>周日:</p>
<TimePicker onChange={onChange} defaultOpenValue={moment('16:00:00', 'HH:mm:ss')} />
</div>
);
}
export default App;
```
在上面的代码中,我们使用Ant Design的TimePicker组件来实现时间选择器,并为每一天设置不同的默认时间。其中,我们使用moment.js库来处理时间格式。你可以根据自己的需求修改时间值和格式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)