CODEWITHSUNDEEP
react-day-picker
Evanss
Evanss

Reputation: 23563

Make todayButton update selectedDay for react DayPicker?

Im using React date picker http://react-day-picker.js.org/

Im using the today button: http://react-day-picker.js.org/examples/customization-today-button/

The default behaviour for the today button is to navigate to the current month but not select the actual day. How can I make it select the actual day? This is updating the selectedDay state in this code example

import React from 'react';
import DayPicker from 'react-day-picker';

import 'react-day-picker/lib/style.css';

export default class BasicConcepts extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.state = {
      selectedDay: undefined,
    };
  }
  handleDayClick(day) {
    this.setState({ selectedDay: day });
  }
  render() {
    return (
      <div>
        <DayPicker onDayClick={this.handleDayClick} />
        {this.state.selectedDay ? (
          <p>You clicked {this.state.selectedDay.toLocaleDateString()}</p>
        ) : (
          <p>Please select a day.</p>
        )}
      </div>
    );
  }
}

Upvotes: 0

Views: 669

Answers (1)

gpbl
gpbl

Reputation: 4804

You can use onTodayButtonClick and set the day as selected:

<DayPicker 
   selectedDays={this.state.selectedDay}
   todayButton="Select today" 
   onTodayButtonClick={day=>this.setState({selectedDay: day})
/>

Upvotes: 1

Related Questions