I am working on a react project trying to add a react date picker using npm react-datepicker. I am using this.state and handleChange(e). how do I add a date picker on my react app without using hooks?
here is sample of the connection, in App component, its old way of doing date picker using in reactjs,
your imports are,
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
and application would be,
class App extends Component {
constructor (props) {
super(props)
this.state = {
startDate: new Date()
};
this.handleChange = this.handleChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
})
}
onFormSubmit(e) {
e.preventDefault();
console.log(this.state.startDate)
}
render() {
return (
<form onSubmit={ this.onFormSubmit }>
<div className="form-group">
<DatePicker
selected={ this.state.startDate }
onChange={ this.handleChange }
name="startDate"
dateFormat="MM/dd/yyyy"
/>
<button className="btn btn-primary">Show Date</button>
</div>
</form>
);
}
}
export default App;
Related
I tried to load a component to my web app after submitting a form. However, the value doesn't persist on the web page for more than a few seconds.
import React,{Component} from 'react';
import Load from './load'
class Form extends Component {
constructor(props) {
super(props);
this.state = {value: '',
showComponent: false,
};
this.handleChange = this.handleChange.bind(this);
this._handleSubmit = this._handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
_handleSubmit(event) {
//alert('A name was submitted: ' + this.state.value);
this.setState({
showComponent: true,
});
}
render() {
return (
<div>
<form onSubmit={this._handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
{this.state.showComponent ?
<Load /> :
null
}
</div>
);
}
}
export default Form
The code for Load is as follows
import React,{Component} from 'react';
class Load extends Component {
render() {
return (
<p>hello</p>
)
}
}
export default Load
As I had said, the value of hello doesn't stay on my screen for more than a few seconds. Please help. I am very new to react
Just try preventing default Submit Event of the form this will initiate a GET request and your URL will reload and this will lead to your main component ReRendering and showComponent is being set to false again.
_handleSubmit(event) {
event.preventDefault(); // Add this line to prevent your form's default event.
//alert('A name was submitted: ' + this.state.value);
this.setState({
showComponent: true,
});
}
ReactJS DatePicker works fine when I keep the state inside Datepicker itself, however once I lift the state up it stops working - nothing happening when I select a date.
This code works:
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class Datepicker extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return <DatePicker selected={this.state.date} onChange={this.handleChange} />;
}
}
class Index extends React.Component {
render() {
return (
<div>
<Datepicker />
</div>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
But this code does not work - nothing happens when I select a date in the datepicker:
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class Datepicker extends React.Component {
render() {
return (
<DatePicker
selected={this.props.date}
onChange={() => {
this.props.handleChange(this.props.date);
}}
/>
);
}
}
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return (
<div>
<Datepicker date={this.state.date} handleChange={this.handleChange} />
</div>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
I also uploaded code example here (index.js is not working as expected while index2.js is working).
Would be very grateful if anyone could advise how to lift the state up and at the same moment have Datepicker working.
The issue is you are passing the this.props.date into the handleChange function which never changes.
You can simply remove the arrow function and just call this.props.handleChange without passing it any parameters. It should automatically choose the new date value selected.
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const Datepicker = props => (
<DatePicker selected={props.date} onChange={props.handleChange} />
);
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return (
<Datepicker
date={this.state.date}
handleChange={this.handleChange}
/>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
See a working example: https://codesandbox.io/s/my4zp6rj8y
I created a custom redux form component of this react-date-range (https://github.com/Adphorus/react-date-range ). This component somehow unintentionally submits the form when I change the data.
this is my implementation of component
import React from 'react';
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
import { DateRange } from 'react-date-range';
class RenderDateRange extends React.Component {
constructor(props) {
super(props);
const initValues = props.input && props.input.value || {};
this.state = {
startDate: initValues.startDate || new Date(),
endDate: initValues.endDate || new Date(),
key: 'selection',
showDatePicker : false
}
}
constructEvent(selection) {
return {
startDate: selection.startDate.getTime(),
endDate: selection.endDate.getTime()
}
}
handleChange(payload) {
this.setState({
...this.state,
...payload.selection
});
this.props.input.onChange(this.constructEvent(payload.selection));
}
render() {
const {input} = this.props;
return (
<div>
<DateRange
{...input}
onChange={this.handleChange.bind(this)}
ranges={[this.state]}
className={'PreviewArea'}
/>
</div>
);
}
}
export default RenderDateRange;
and this is how my form is about
<form className="form" onSubmit={handleSubmit}>
<Field name="eventDate" component={RenderDateRange} />
<button className="btn btn-default btn-save" disabled={submitting || pristine || invalid}>
Save
</button>
</form>
and this is the component that contains the form like:
render() {
const _props = this.props;
return (
<div>
<div className="col-lg-10 col-md-10 col-sm-12 content-container">
{this.renderNotification()}
<NewCustomerForm { ..._props } onSubmit={_props.createCustomer.bind(this, _props.lang)}/>
</div>
</div>
);
}
anyone has a clue what is wrong with my implementation?
========================================================
I also have tried to remove this.props.input and onChange from props of DateRange and it still submits the form.
<DateRange
ranges={[this.state]}
className={'PreviewArea'}
/>
I am a newbie to meteor and react , sorry if this is a silly question.
I am trying to put a react datetimepicker in my meteor project without success.
below is the project structure ( same as the todo app in meteor's official guide)
imports
-ui
-App.jsx
-Example.jsx
code in Example.jsx (which I copied from the Controlled Component example in http://dev.quri.com/react-bootstrap-datetimepicker/]1
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';
// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
class Example extends React.Component {
constructor (props) {
super(props)
this.state = {
startDate: moment()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render() {
return <DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
/>;
}
}
code in App.jsx
import React, { Component } from 'react';
import Example from './Example.jsx';
import DatePicker from 'react-datepicker';
import moment from 'moment';
export default class App extends Component {
render() {
return (
<div className="container">
<h1> Time selecting </h1>
<DatePicker selected={this.state.date} onChange={this.handleChange} />
</div>
)
};
}
My app can run and print the line "Time selecting" before I tried to add the datetimepicker and put the line
<DatePicker selected={this.state.date} onChange={this.handleChange} />
in App.jsx
How can I use the datetimepicker correctly?
Now I deleted the Example.jsx file and changed the file in App.jsx to
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
date: "1990-06-05",
format: "YYYY-MM-DD",
inputFormat: "DD/MM/YYYY",
mode: "date"
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render() {
return (
<div className="container">
<h1> Time selecting </h1>
<DatePicker selected={this.state.startDate}
onChange = {this.handleChange} />
</div>
)
}
}
but the browser is still showing nothing.
you probably just copied only the <DatePicker> part you should also include the handleChange call back function and the initial state like below.
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {date: moment()};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render() {
return <div className="container">
<h1> Time selecting </h1>
<DatePicker selected={this.state.date}
onChange={this.dateChanged} />
</div>
}
}
here is the codepen for react-datepicker demo.
I would like to have, an Add button. The following is the React.js code that I thought is one way of implement the logic that I want, but unfortunately it's doesn't work.
my getting this Error:
bundle.js:47 Uncaught Error: Cannot find module "./src/index.js"
at webpackMissingModule at Object.<anonymous>
at __webpack_require__
How do I solve this problem?
import React from "react"
import ReactDOM from "react-dom"
import SearchBar from "./components/search_bar"
const API_KEY = "TheRealAPIKeyWouldGoHere"
const App = () => {
handleChange(value){
this.setState({
value: event.target.value
});
}
return ( <div>
<SearchBar onChange={this.handleChange}/>
</div>
)
}
ReactDOM.render(<App />, document.querySelector(".container"))
This is my component. I have assigned Button to input but i can't figure out how to make it work.
import React, { Component } from "react"
class SearchBar extends Component {
constructor(props){
super(props)
this.state = {term: ""}
}
handleChange(evt){
this.props.onChange(value);
}
render () {
return <div>
<button onClick={this.handleChange}>Search</button>
<input ref="inputName" onChange= { event => console.log(event.target.value)} />
</div>
}
}
export default SearchBar
In your component:
import React, { Component } from "react"
class SearchBar extends Component {
constructor(props) {
super(props)
this.state = { term: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.term })
}
handleSubmit(event) {
console.log(event.target.value)
event.preventDefault()
}
render() {
return (
<div>
<button onClick={this.handleSubmit}>Search</button>
<input
type="text"
value={this.state.term}
onClick={this.handleChange}
/>
</div>
)
}
}
export default SearchBar