reactjs 如何根据API响应突出显示React日期选择器天数

ha5z0ras 于 2023-08-04 发布在 React

关注(0)|答案(1)|浏览(83)

我有一个API，它在UseState变量中返回超过50天的Unix时间戳。

const [alldata, setData] = useState(null); 

 useEffect(() => {
    fetch(`/getdates}`)
     .then((response) => response.json())
     .then((actualData) => setData(actualData));
     }, []);

字符串
我想在React日期选择器中突出显示所有这些日期。

<DatePicker 
        dateFormat="dd/MM/yyyy h:mm aa"
        selected={startDate}
        onChange={(date) => {setStartDate(date)}}
        highlightDates={[new Date("2023-08-31")]}
                            // how to add all the dates here
        
         />

型
我试着在里面做一个map函数，但是它的抛出错误.解决这个问题的最好办法是什么？谢谢你，谢谢

reactjs

来源：https://stackoverflow.com/questions/76824803/how-to-highlight-react-date-picker-days-based-on-the-api-response

1条答案

按热度按时间

v8wbuo2f1#

可以参考下面的片段，看看它是否有帮助。这里allData数组有epoch格式的日期，在将日期作为prop传递给DatePicker组件的同时，我正在解构数组，同时将epoch日期转换为JS Date对象。
根据REST API的结果，您可以修改map函数。

import React, { useState, useEffect } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function App() {
  
  const [startDate, setStartDate] = useState(new Date());
  const [allData, setData] = useState(null); 

 useEffect(() => {
    setData([1693460210000,1693373810000,1693287410000]);
     }, []);

  return (
    
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          highlightDates={allData?.length ?  [...allData.map(d=>new Date(d))] :[]}
          placeholderText="This highlights a week ago and a week from today"
        />
  )
}

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs 如何根据API响应突出显示React日期选择器天数

1条答案

相关问题

热门标签

最新问答