I am using react-native-calendars for my project. I am able to select days ON/OFF
.
However, I want user to have limitation when selecting days. So I want to let users to pick up to 3 days
.
If more than 3days are selected
, disable the selected method
.
Any idea how I can do this? Any comments or advice would be really helpful.
Thanks in advance!
This is my code:
onDaySelect = (day) => {
const _selectedDay = moment(day.dateString).format(_format);
let selected = true;
let markedDates = {}
if (this.state._markedDates[_selectedDay]) {
selected = !this.state._markedDates[_selectedDay].selected;
markedDates = this.state._markedDates[_selectedDay];
}
markedDates = {...markedDates, ...{ selected }};
const updatedMarkedDates = {...this.state._markedDates, ...{ [_selectedDay]: markedDates } }
this.setState({ _markedDates: updatedMarkedDates },
()=> {console.log(this.state._markedDates, 'this.state._markedDates')});
this.setState({bday:day.dateString}
, ()=> {
store.requestObject.date = this.state.bday
})
}
<Calendar
onDayPress={this.onDaySelect}
markedDates={this.state._markedDates}
markingType={'multi-dot'}
monthFormat={'yyyy MMMM'}/>
State:
const _format = 'YYYY-MM-DD'
const _today = moment().format(_format)
initialState = {
[_today]: {disabled: true}
}
this.state = {_markedDates: this.initialState}