score:3
Accepted answer
the documentation of react date time picker you have used uses onchange
function programmatically and does not relay the change event
back to the user. instead the parameter inside onchange
is the moment date object itself.
class app extends react.component {
constructor(props) {
super(props);
this.state = {
datetime: ''
}
this.updatestate = this.updatestate.bind(this);
}
updatestate(date) {
// this function gives you the moment object of date selected.
console.log(date);
}
render() {
return (
<datetime onchange={this.updatestate}/>
);
}
}
reactdom.render(<app />, document.getelementbyid("root"));
<link rel="stylesheet" type="text/css" href="https://rawgit.com/arqex/react-datetime/master/css/react-datetime.css"/>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.js"></script>
<script src="https://rawgit.com/arqex/react-datetime/master/dist/react-datetime.js"></script>
something else you should look up is how to use setstate
callback. because setstate is asynchronous, you cannot use a function to log the state value.
Source: stackoverflow.com
Related Query
- Display the date selected in react-datetime picker
- Airbnb react date range picker only showing current month calendar not selected dates month calender
- How can I change the icon in material-ui date picker for React
- How to style the day button in react material-ui date picker
- MUI V5 React unit test not triggering the Date Picker handler
- React Date picker question: How to display date in proper format in a table?
- Click on radio button and display the corresponding value inside the radio button as selected in react js material UI design
- How to display the selected date from the calendar using react-calendar-pane?
- In my react hooks the display of record based on latest date is not happening
- Display the selected item to another component using react hooks
- React ant design date time picker time not update on the top
- Date range picker Max date is 30 days from the selected Date in ReactJS
- how to validate date based on input type text and display the day according to input date in react
- Use the date picker to display date ranges - as opposed to picking
- Converting the date returned from the server to the format used by the React Date Picker
- React JS display all data in the textfield for particuler selected ID
- React - Triggering click event on table row and display the selected row details in another page
- Is there a way to bind the selected date in a calendar date picker to a variable that can be accessed by another file?
- React Date Picker - How to handle if user only selects the start date in range and does not selects the end date?
- React DatePicker Not showing the selected date in useState
- How to link react with redux to add and remove selected movies to the array by clicking on the heart to display them on the favoŠ³ites page
- react date picker gives unwanted data along with the date value when sent to backend after form submit
- Is there a better alternative to componentDidUpdate for getting the selected date from a date picker and sending that in API?
- How to display the date and time that is in the country in the React Date Picker?
- How do I display the content of React Quill without the html markup?
- React Datetime Picker Component with Semantic UI React example
- How to display the saved content of CKEditor5 in React Js
- React - toggle display of one component from the onClick of another component
- How do I spawn my date picker UI upon first clicking on the date text field?
- How to make the API call and display it in React JS using React Table and Axios?
More Query from same tag
- How to import values from Laravel into react.js
- useEffect dependency cause an infinite loop
- Code Mirror 6 & React component on update re-subscribe after CM6 state reset
- Should I connect child component to avoid re-render?
- How to make two Component connect each other on React-Redux
- How to Integrate React Epub Reader with next js
- Is there a way to wrap background color around text in react-native?
- React Dev Tools: "parse hook names" action throws a "Hook parsing failed" error
- Load component in a page after href redirection in ReactJs
- Pass data between independent component react and redux
- How to pass authorization token in header to react Axios.post?
- What is the best implememtation of react shouldComponentUpdate with immutable.js
- ReactJs nested list collapse for only one list item
- How to get re-usable menu component?
- reset values before running next mutation
- Accurately Incrementing and Assigning Order Numbers (eCommerce) with React.js & Firebse
- How to make spread operator enumerate through non-function properties only?
- React custom hook batch updates
- i need to make animation on scroll
- migrating react-router v2 to v4 onEnter arguments
- How do I access store state in React Redux?
- How can I add Redux to a React app with Authentication?
- Automate deployment of static website files to S3 after the build
- Next.js + eslint: unable to resolve path to module 'fs/promises'
- Got the error "Build optimization failed: found page without a React Component as default export in pages/"
- Best way to find React button with selenium?
- How to precisely control where script tag is inserted using Next Script
- react-router and pretty URLs
- making a wide drop down with reactstrap
- React: Action on variable change