为什么 <CalendarStrip /> 不能正常工作？

Question

import {StyleSheet, Text, View} from 'react-native';
import React, {useRef, useState} from 'react';
import CalenderCard from '../../component/CalenderCard';
import CalendarStrip from 'react-native-calendar-strip';
import moment from 'moment';
import {colors} from '../../../config/colors';

const Home = () => {
  const [newdate, setDate] = useState(new Date());
  const calenderRef = useRef();

  const date = new Date();
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [selectedDay, setSelectedDay] = useState(Date);
  const datesWhitelist = [
    // single date (today)
    // date range
    {
      start: startDate,
      end: moment(endDate),
      //  start: (date),
      //end: (moment('1/12/2023'))
    },
  ];
  return (
    <View>
      <CalendarStrip
        selectedDay={selectedDay}
        ref={calenderRef}
        //scrollable={true}
        headerText={null}
        selectedDate={newdate}
        onDateSelected={value => {
          setDate(moment(value).format('YYYY-MM-DD'));
          console.log(value);
        }}
        getSelectedDate={value => console.log(value)}
        daySelectionAnimation={{
          type: 'border',
          duration: 200,
          borderWidth: 1,
          borderHighlightColor: 'white',
        }}
        calendarHeaderStyle={{
          fontSize: 20,
          fontFamily: 'Roboto-Regular',
          color: 'black',
          alignSelf: 'flex-start',
        }}
        //   iconLeftStyle={{position:"absolute",top:-70}}
        //  iconRightStyle={{color:'white',backgroundColor:colors.primaryTheme,}}
        style={{height: 150, paddingTop: 20, paddingBottom: 10}}
        startDate={moment(date)}
        highlightDateContainerStyle={{
          backgroundColor: colors.secondary,
          paddingVertical: 10,
          height: 'auto',
          color: 'white',
        }}
        // dayContainerStyle={{paddingVertical:10}}
        highlightDateNumberStyle={{
          color: colors.white,
          fontFamily: 'Roboto-Medium',
          fontSize: 14,
        }}
        highlightDateNameStyle={{
          color: colors.white,
          fontFamily: 'Roboto-Medium',
          fontSize: 12,
          marginHorizontal: 1.5,
          padding: 5.5,
          borderTopEndRadius: 20,
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
        }}
        highlightDateNumberContainerStyle={{
          backgroundColor: colors.primaryTheme,
          borderRadius: 40,
          padding: 4,
          marginHorizontal: 10,
          minWidth: 30,
          minHeight: 30,
        }}
        datesWhitelist={datesWhitelist}
        useNativeDriver={false}
      />
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({});

这是我的代码。

我只能点击选定的日期。每当我单击其他任何一天时，它都不会执行任何操作。它应该突出那一天，对吧？但它不会那样做。我尝试控制台日志，似乎只有当我单击所选日期时才会调用 onDateSelected。我该如何做到这一点，以便当我点击某一天时，它将成为选定的日期。

Answer 1

datesWhitelist 道具收到一个

Array of dates that are enabled

当前组件中的 startDate 和 endDate 状态是空字符串（对于 endDate，moment 将 return 为空）。因此，datesWhitelist 禁用当前预选日期以外的所有内容。

因此，you need to assign valid dates to startDate and endDate of datesWhitelist.

例如，以下将允许您选择从 selectedDay 到“2022-06-10”的日期。

const datesWhitelist = [
    {
      start: selectedDay,
      end: new Date("2022-06-10"),
    }
  ];

如果你想允许选择所有内容，只需删除 datesWhitelist 属性。

为什么 <CalendarStrip /> 不能正常工作？

Why is <CalendarStrip /> not working properly?

javascript

android

react-native