datePicker根据接口返回日期,展示是否禁用

业务场景: 根据接口返回决定 “规定天数内哪些日期” 禁用,其余日期可选择
案例:接口返回数据如下,周一、二、三禁用,其余日期可选择
data() {
	return {
		disableDate = [
			{label: '周一', value: 1},
			{label: '周二', value: 2},
			{label: '周三', value: 3},
		],
		pickerOptions : {}
	}
}


created() {
	 _this.pickerOptions = {
        disabledDate(time) {
	        let maxDate = new Date().getTime() + (30 * 24 * 3600 * 1000) // 例如规定天数为30天
	          for(let i = 0; i < disableDate.length; i++) {
		          if ((time.getDay() == disableDate[i].value) || ((time.getTime()) > maxDate)) {
			          return true
		          }
	          }
          }
     }
}

这里有个需要注意的点,循环中只能遍历禁用日期的数据,不能还有为禁用日期数据!!! 具体为什么还未得知,有知道的小伙伴留言哦,感谢!

效果如下,一二三禁用,并且从当前日期8.27日起往后算30天后均不能再点击

在这里插入图片描述
在这里插入图片描述

因为需求需要,所以只完成从今日起30天可点击,小伙伴们也可以自行完成,今日之前日期也均不能选择的功能哦;加油!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值