onefinestay / react-daterange-picker

Other
563 stars 209 forks source link

How to select only single day ? #238

Closed iamrraj closed 4 years ago

iamrraj commented 4 years ago

Hey, I an trying to select single day from DateRangePicker but i am not able to select when i try to select single day all time it give error, here is my code so far i did.

import React from "react";
import DateRangePicker from "react-daterange-picker";
import "react-daterange-picker/dist/css/react-calendar.css";
import originalMoment from "moment";
import { extendMoment } from "moment-range";
const moment = extendMoment(originalMoment);

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    const today = moment();

    this.state = {
      isOpen: false,
      value: null
    };
  }

  handleSelect = value => {
    this.setState({
      value: value
    });
  };

  onToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  renderSelectionValue = () => {
    return (
      <div>
        <div>Selection</div>
        {this.state.value}
      </div>
    );
  };

  render() {
    return (
      <div>
        <div>{this.renderSelectionValue()}</div>

        <div>
          <input
            type="button"
            value="Toggle date picker"
            onClick={this.onToggle}
          />
        </div>

        {this.state.isOpen && (
          <DateRangePicker
            value={this.state.value}
            onSelect={this.handleSelect}
            selectionType="single"
          />
        )}
      </div>
    );
  }
}

export default Example;

Thanks

iamrraj commented 4 years ago

I managed to do it , Thanks