在 React Native Calendars 中突出显示按下(选择)的日期
Highlight pressed(selected) date in React Native Calendars
在我的项目中,我使用了 react-native-calendars 库。目前,我可以通过 onPress 获取日期。但问题是如何突出显示该日期。逻辑:当用户按下日期时,它应该以任何颜色突出显示。主要原因是将所选日期与其余日期区分开来。这是来源 code
这是我的代码片段,负责获取当前日期:
state={
selectedDate: '',
}
const getSelectedDayEvents = (date) => {
let serviceDate = moment(date);
serviceDate = serviceDate.format("DD.MM.YYYY");
this.setState({selectedDate: serviceDate});
};
According to the document 您需要使用 markedDates={}
来显示突出显示的日期。
<Calendar
markedDates={{
'2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},
'2012-05-17': {marked: true},
'2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},
'2012-05-19': {disabled: true, disableTouchEvent: true}
}}
/>
编辑
- 将
markedDates
添加到初始状态。
state = {
selectedDate: "",
markedDates: {}
};
- 更改
getSelectedDayEvents
函数以创建 markedDates
对象并将其分配给状态。
getSelectedDayEvents = date => {
let markedDates = {};
markedDates[date] = { selected: true, color: '#00B0BF', textColor: '#FFFFFF' };
let serviceDate = moment(date);
serviceDate = serviceDate.format("DD.MM.YYYY");
this.setState({
selectedDate: serviceDate,
markedDates: markedDates
});
};
- 更改日历组件以接受
markedDates
<Calendar
style={{ height: 300, width: "90%", justifyContent: "center" }}
theme={{
backgroundColor: "#ffffff",
calendarBackground: "#ffffff",
todayTextColor: "#57B9BB",
dayTextColor: "#222222",
textDisabledColor: "#d9e1e8",
monthTextColor: "#57B9BB",
arrowColor: "#57B9BB",
textDayFontWeight: "300",
textMonthFontWeight: "bold",
textDayHeaderFontWeight: "500",
textDayFontSize: 16,
textMonthFontSize: 18,
selectedDayBackgroundColor: "#57B9BB",
selectedDayTextColor: "white",
textDayHeaderFontSize: 8
}}
minDate={"1996-05-10"}
maxDate={"2030-05-30"}
monthFormat={"MMMM yyyy "}
markedDates={this.state.markedDates}
scrollEnabled={true}
horizontal={true}
showScrollIndicator={true}
disableMonthChange={true}
onDayPress={day => {
getSelectedDayEvents(day.dateString);
}}
/>
如果您有任何面团,请随时询问。希望对您有所帮助。
<Calendar
minDate={this.state.date}
onDayPress={(day) => this.setState({selected_date: day.dateString})}
renderArrow={(direction) => direction == 'left' ? <IconContainer iconObject={LEFT_ICON} /> : <IconContainer iconObject={RIGHT_ICON} />}
markedDates={{
[this.state.selected_date]: {
selected: true,
disableTouchEvent: true,
selectedColor: '#F1EFFE',
selectedTextColor: '#7954FA',
},
}}
theme={{
todayTextColor: '#7954FA',
'stylesheet.calendar.header': {
dayHeader:{
color:'#616061',
fontWeight:'bold'
}
}
}}
/>
状态:--
state={
date: moment().format("YYYY-MM-DD"),
selected_date:null,
}
在我的项目中,我使用了 react-native-calendars 库。目前,我可以通过 onPress 获取日期。但问题是如何突出显示该日期。逻辑:当用户按下日期时,它应该以任何颜色突出显示。主要原因是将所选日期与其余日期区分开来。这是来源 code
这是我的代码片段,负责获取当前日期:
state={
selectedDate: '',
}
const getSelectedDayEvents = (date) => {
let serviceDate = moment(date);
serviceDate = serviceDate.format("DD.MM.YYYY");
this.setState({selectedDate: serviceDate});
};
According to the document 您需要使用 markedDates={}
来显示突出显示的日期。
<Calendar
markedDates={{
'2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},
'2012-05-17': {marked: true},
'2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},
'2012-05-19': {disabled: true, disableTouchEvent: true}
}}
/>
编辑
- 将
markedDates
添加到初始状态。
state = {
selectedDate: "",
markedDates: {}
};
- 更改
getSelectedDayEvents
函数以创建markedDates
对象并将其分配给状态。
getSelectedDayEvents = date => {
let markedDates = {};
markedDates[date] = { selected: true, color: '#00B0BF', textColor: '#FFFFFF' };
let serviceDate = moment(date);
serviceDate = serviceDate.format("DD.MM.YYYY");
this.setState({
selectedDate: serviceDate,
markedDates: markedDates
});
};
- 更改日历组件以接受
markedDates
<Calendar
style={{ height: 300, width: "90%", justifyContent: "center" }}
theme={{
backgroundColor: "#ffffff",
calendarBackground: "#ffffff",
todayTextColor: "#57B9BB",
dayTextColor: "#222222",
textDisabledColor: "#d9e1e8",
monthTextColor: "#57B9BB",
arrowColor: "#57B9BB",
textDayFontWeight: "300",
textMonthFontWeight: "bold",
textDayHeaderFontWeight: "500",
textDayFontSize: 16,
textMonthFontSize: 18,
selectedDayBackgroundColor: "#57B9BB",
selectedDayTextColor: "white",
textDayHeaderFontSize: 8
}}
minDate={"1996-05-10"}
maxDate={"2030-05-30"}
monthFormat={"MMMM yyyy "}
markedDates={this.state.markedDates}
scrollEnabled={true}
horizontal={true}
showScrollIndicator={true}
disableMonthChange={true}
onDayPress={day => {
getSelectedDayEvents(day.dateString);
}}
/>
如果您有任何面团,请随时询问。希望对您有所帮助。
<Calendar
minDate={this.state.date}
onDayPress={(day) => this.setState({selected_date: day.dateString})}
renderArrow={(direction) => direction == 'left' ? <IconContainer iconObject={LEFT_ICON} /> : <IconContainer iconObject={RIGHT_ICON} />}
markedDates={{
[this.state.selected_date]: {
selected: true,
disableTouchEvent: true,
selectedColor: '#F1EFFE',
selectedTextColor: '#7954FA',
},
}}
theme={{
todayTextColor: '#7954FA',
'stylesheet.calendar.header': {
dayHeader:{
color:'#616061',
fontWeight:'bold'
}
}
}}
/>
状态:--
state={
date: moment().format("YYYY-MM-DD"),
selected_date:null,
}