在下面的日期选择器中,选择日期不会更新日历列表的开始月份。我正在尝试这样做,以便当您在日期选择器上选择一个值时,开始月份会更新。
进口声明:
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}
/>