1

在下面的日期选择器中,选择日期不会更新日历列表的开始月份。我正在尝试这样做,以便当您在日期选择器上选择一个值时,开始月份会更新。

进口声明:

import {Calendar, CalendarList, Agenda} from 'react-native-calendars';
import DatePicker from 'react-native-datepicker';

构造函数和函数:

constructor(props) {
    super(props);
    this.state = {
    chosenDate: new Date(),
    selected: "key1",
    calenderCurrent:'2021-01-01',
    color:'green',
    };
    this.setDate = this.setDate.bind(this);
  }
setDate(newDate) {
    alert(newDate);
    //const frmtdate = moment(newDate).format('YYYY-MM-DD');
   // alert(frmtdate);
    this.setState({ chosenDate: newDate,
      calenderCurrent:'2021-02-02',
    color:'red' });
  }

反应巴别塔代码:

    <DatePicker
    style={{borderWidth:0}}
    date={this.state.chosenDate} // Initial date from state
    mode="date" // The enum of date, datetime and time
    placeholder="select date"
    format="DD-MM-YYYY"
    confirmBtnText="Confirm"
    cancelBtnText="Cancel"
    customStyles={{
    dateIcon: {
    position: 'absolute',
    left: 0,
    top: 4,
    marginLeft: 0,
    },
    dateInput: {
      marginLeft: 36,
      borderWidth:0,
    },
   }}
   onDateChange={(date) => {
   this.setDate(date)
   }} 
   />
   <CalendarList            
   onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
   pastScrollRange={0}
   futureScrollRange={2}
   scrollEnabled={true}
   showScrollIndicator={true}
   markedDates={{
      '2021-01-20': {textColor: this.state.color},
      '2020-12-22': {startingDay: true, endingDay: false, color: 'green', textColor: 'white'},
      '2020-12-23': {selected: true, startingDay: false,endingDay: true, color: 'green', textColor: 'white'},
      '2020-12-24': {disabled: true, startingDay: true, color: 'green', endingDay: true}
   }}
   markingType={'period'}
   current={this.state.calenderCurrent}
   />

4

0 回答 0