React antd DatePicker 自定义星期行的显示

antd RangePicker 英文状态下的这行星期缩写,只有两个字母,非常奇怪。。。

像这样

在这里插入图片描述

这是改过之后的,看起来正常多了 : - )
在这里插入图片描述
其实改起来也很简单,只要设置一下moment.local里的weekdaysMin就可以了

 componentDidMount() {
 	moment.locale('en',{
           		week: {
               		dow: 7
           		},
           		weekdaysMin: 'Sun_Mon_Tue_Wen_Thr_Fri_Sat'.split('_'),
        	})
        }
<RangePicker
	ranges={{ 'This Month': [moment().startOf('month'), moment().endOf('month')]}}
 	showTime={{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }}
    style={{ borderRadius: 0, width: 250 }}
 	format="YYYY/MM/DD HH:mm:ss"
	onChange={(dates, dateStrings) => this._dateHandle(dates, dateStrings)}
 	onOk={this._dateConfirmHandle}
/>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
若要在 React Ant Design(antd)的 DatePicker 组件中根据默认值请求接口,并在选择日期后展示相关数据,你可以按照以下步骤进操作: 1. 首先,确保你已经安装了所需的依赖包。在项目根目录下,运以下命令安装所需依赖: ```bash npm install antd moment axios ``` 2. 在你的 React 组件中,引入需要的库和组件: ```jsx import React, { useEffect, useState } from 'react'; import { DatePicker, Button } from 'antd'; import moment from 'moment'; import axios from 'axios'; ``` 3. 创建一个函数组件,并在其中定义状态变量来存储选择的日期和相关数据: ```jsx const DateDataDisplay = () => { const [selectedDate, setSelectedDate] = useState(moment()); // 默认为当前日期 const [data, setData] = useState([]); ``` 4. 使用 useEffect 钩子函数来发送请求并更新数据。在依赖项数组中添加 `selectedDate`,以确保在选择日期后触发重新请求: ```jsx useEffect(() => { const fetchData = async () => { try { const response = await axios.get(`your_api_endpoint?date=${selectedDate.format('YYYY-MM-DD')}`); setData(response.data); } catch (error) { console.error(error); } }; fetchData(); }, [selectedDate]); ``` 确保将 `'your_api_endpoint'` 替换为你实际的数据接口地址。 5. 在渲染部分,使用 DatePicker 组件来选择日期,并将选择的日期更新到状态变量中: ```jsx return ( <div> <DatePicker defaultValue={selectedDate} onChange={date => setSelectedDate(date)} /> <Button onClick={() => setData([])}>Clear Data</Button> {/* 可选:添加一个按钮来清除数据 */} {/* 在这里展示数据 */} </div> ); }; ``` 以上是一个简单的示例,展示了如何在 React Ant Design 的 DatePicker 组件中根据默认值请求接口,并在选择日期后展示相关数据。请根据你的实际需求进适当的调整和修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值