How to get start and end date value in React date range picker?


In my code I've used one of the npm react components for date range picker (<a href="https://www.npmjs.com/package/react-date-range" rel="nofollow">https://www.npmjs.com/package/react-date-range</a>). In my screen I've an apply dates button. If i click that button i want to print date range value. How to get that range value onclick?

var Calendarcomponent = React.createClass({ getInitialState: function(){ this.state = { 'rangePicker' : {}, 'linked' : {}, 'datePicker' : null, 'firstDayOfWeek' : null, 'predefined' : {}, } } handleSelect:function(range){ console.log(range); }, handleClick:function(range){ console.log(range); }, render:function(){ var rangePicker = this.state; var format = 'dddd, D MMMM YYYY'; return ( <div> <h4>FILTER BY DATE</h4> <div className="date-range text-center"> <div className="group"> <label>Date range</label> <input className="inputMaterial" type="text" value={ rangePicker['endDate'] && rangePicker['endDate'].format(format).toString() } required /> </div> </div> <div className="set-borrow-dates"> <div id="select-date">Select Borrow date</div> <DateRange onInit={this.handleSelect} onclick={this.handleClick} /> <button id="apply-dates"><i className="fa fa-check-circle"></i> Apply Dates</button> </div> </div> ) } });


You can use the onChange callback to store the range in state and read it when clicking the button:

handleSelect(range){ this.setState({ range }); }, handleClick(){ console.log(this.state.range); }, render:function(){ return <div> <DateRange onInit={this.handleSelect} onChange={this.handleSelect} /> <button id="apply-dates" onClick={this.handleClick} > <i className="fa fa-check-circle"></i> Apply Dates </button> </div>; }


  • Can I use a pre-computed value as url parameter in emberjs
  • How to get week start date Sunday and week end date Saturday in php
  • Weeks that overlap a year SQL
  • Liferay input-date format
  • Multiple checkbox values handling with ReactJS
  • ES6 import vs in html [duplicate]
  • Image from custom.xcassets in React-Native
  • How do I get the Materialize select dropdown to work with React?
  • BundleConfig not rendered after publish in IIS
  • Return JSX from function
  • Using JQuery Datepicker To Only Show Months
  • Unable to import a React Component in my Mocha test
  • React Native - get refs of custom components in listview from renderRow
  • Reactjs require not defined
  • Realm React-Native: Access same realm from JS(react native code) and android(java)
  • Is it possible to access raw iphone audio output?
  • How to create local push notification using react-native-push-notification
  • Retrieve 'first day of week' and 'CalendarWeekRule' from environment
  • Router.create in react-router v1.0.0
  • Why does Internet Explorer sometimes trigger a local storage event before the data's ready? [du
  • How can i use same custom fonts for both android and ios using react native
  • Javascript syntax null : ?{}
  • A simple datepicker in VueJS
  • React Native fetch is not a function
  • Webpack-dev-server and isomorphic react-node application
  • How to link 2 Jquery UI datepickers with Knockout?
  • Print: Entry, “:CFBundleIdentifier”, Does Not Exist have tried most solutions
  • jQuery timepicker 'Object does not support this property or method'
  • what is the purpose of “export as namespace foo”?
  • include dlls in visual studio c++ 2008
  • Cross platform UI spacing/padding
  • How can we prepend rows to a react native list-view?
  • Database structure design with variable amounts of fields
  • Highlight one bar in a series in highcharts?
  • How to make a tree having multiple type of nodes and each node can have multiple child nodes in java
  • XCode can't find symbols for a specific iOS library/framework project
  • Linker errors when using intrinsic function via function pointer
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • LevelDB C iterator
  • How can i traverse a binary tree from right to left in java?