在React Native日历选择器中，我想通过提供一个函数来禁用某些日期

Question

我一直在研究日历主题（react-native-calendar-picker）。如果这不起作用，您可以建议我使用日期选择器依赖项，该依赖项具有范围可用性、禁用日期以及如果可能的话禁用周末。我正在使用时刻。

我的代码：

import CalendarPicker from 'react-native-calendar-picker';
import moment from 'moment';
<CalendarPicker
          startFromMonday={true}
          allowRangeSelection={true}
          minDate={minDate}
          maxDate={maxDate}
          //disabledDates={[new Date('13/02/2021'), new Date('14/02/2021'), new Date('14/02/2021')]} tried so many forms too
          disabledDates={  Date(2021,2,13)}
          width={250}
          height={250}
          maxRangeDuration={10}
          todayBackgroundColor="#f2e6ff"
          selectedDayColor="#7300e6"
          selectedDayTextColor="#FFFFFF"
          onDateChange={this.onDateChange}
        />

Answer 1

试试这个：

<CalendarPicker
    ...
    disabledDates={date => {
          let startDate = {...this.state.selectedStartDate}
          let endDate ={...this.state.selectedEndDate}
          if(date.isBetween(startDate, endDate)){
                 return true
          } else {
                return false
          }
    }}
    // or use it as an array 

我相信你也可以传递一个函数，但我还没有尝试过。

Answer 2

在此https://www.npmjs.com/package/react-date-range

我的代码如下

//date data set
const reservedDates = [
 2024/01/27','2024/01/28','2024/02/04','2024/02/05','2024/01/30','2024/02/07'
];
const [selectionRange,setSelectRange] = useState({
   startDate: new Date(),
   endDate: new Date(),
   key: "selection",
});
        
const [disabledDatesArr, setDisabledDatesArr] = useState([]);

function formatDate(string){
   var options = { year: 'numeric', month: 'numeric', day: 'numeric'};
   return new Date(string).toLocaleDateString([],options);
}
          
useEffect(() => {
   let updated = []
   reservedDates.map((date) => {
       let d = new Date(date);
       let dates = [d.getFullYear(),d.getMonth()+1,d.getDate()];
       updated.push(new Date(dates))
   });
   setDisabledDatesArr(updated);
}, []);
const handleSelect = (range) =>{
    setSelectRange({...selectionRange, 
                    startDate: range.selection.startDate, 
                    endDate: range.selection.endDate}
    );
}
<DateRangePicker
  rangeColors={["#FF7F50"]}
  disabledDates={[...disabledDatesArr]}
  ranges={[selectionRange]}
  onChange={handleSelect}
/>