Javascript 突出显示React本机日历中按下（选定）的日期

在我的项目中，我使用了react native calendars库。目前，我可以通过onPress获得日期。但问题是如何突出这一日期。逻辑：当用户按下日期时，它应该以任何颜色突出显示。主要原因是将所选日期与其他日期区分开来。这是来源

这是我的代码片段，负责获取当前日期：

state={
  selectedDate: '',
}

const getSelectedDayEvents = (date) => {
    let serviceDate = moment(date);
    serviceDate = serviceDate.format("DD.MM.YYYY");
    this.setState({selectedDate: serviceDate});
};

您需要使用

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}
  }}
/>

更改

getSelectedDayEvents

函数以创建

markedDates

对象并将其分配给state

将日历组件更改为接受标记日期

{
GetSelectedDayeEvents（day.dateString）；
}}
/>

如果你有面团，尽管问。希望这对您有所帮助。

您需要使用

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}
  }}
/>

<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'
  }
}
}}
/>

更改

getSelectedDayEvents

函数以创建

markedDates

对象并将其分配给state

将日历组件更改为接受标记日期

{
GetSelectedDayeEvents（day.dateString）；
}}
/>

---

如果你有面团，尽管问。希望这能对您有所帮助。

是的，我从文档中了解到，问题是如何实现动态颜色更改？看看，我已经做了，但它是static@JasurKurbanov我根据您的要求更改了答案。是的，我是从文档中得到的，问题是如何实现动态颜色更改？看看，我已经做了，但它是static@JasurKurbanov我根据你的要求修改了我的答案。

<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'
  }
}
}}
/>

<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,
  }