如何在反应日历中选择日期?

时间:2017-11-28 12:34:45

标签: reactjs react-native

我在我的项目中下载了react-native-material-calandarview。

他们只是提供一些代码来获取日历。 https://github.com/NuclleaR/react-native-material-calendarview

我刚刚选择datesSelection={'range'},但我不知道我在哪里获得所选日期。如果datesSelection={'single'}它在

中返回日期
onDateChange={data => {
    console.log(data.date);//date selected
}}

更多代码:

render() {
    return (
        <Calendar
        width={(Dimensions.get('window').width)-32}
        height={280}
        tileHeight={35}
        style={{alignSelf: 'center'}}
        topbarVisible={true}
        datesSelection={'range'}
        firstDayOfWeek="monday"
        showOtherDates="none"
        currentDate={this.state.today}
        selectedDates={this.state.dates}
        eventsDates={[]}
        eventsColor="#9C27B0"
        onDateChange={data => {
          //alert(sel_date);
            console.log(this.state.data);

        }}
        onMonthChange={month => {
          //alert(month)
            console.log(month);

        }}
      />
    ); 
}

1 个答案:

答案 0 :(得分:1)

因此onChange将向您显示用户选择它的日期由您决定是否将函数存储在redux / local状态。对于范围相同,onChange将在您传递给它的参数中返回该范围

所以你可以做的是

在HTML中:

onDateChange={this.onChange}

组件方法:

onChange = (date) => { this.setState({ selectedDate: date }) };