Binding state variable to JqxDateTimeInput

[christian.herzogParticipant]

Hello

I’m trying to bind a state variable to a JqxDateTimeInput but I believe my thought process is somewhat off…

I would expect to define a JqxDateTimeInput like so:

<JqxDateTimeInput ref="dateTimeInput" value={this.state.myDateValue} />

However this does not work correctly. I end up with this error message (Sat Jan 01 2000 08:04:25 GMT+0100 is the date from state):

Objects are not valid as a React child (found: Sat Jan 01 2000 08:04:25 GMT+0100). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

Check the render method of <code>JqxDateTimeInput</code>.
invariant
c:\apps\jqTest\node_modules\fbjs\lib\invariant.js:44

  41 | } else {
  42 |   var args = [a, b, c, d, e, f];
  43 |   var argIndex = 0;
> 44 |   error = new Error(format.replace(/%s/g, function () {
  45 |     return args[argIndex++];
  46 |   }));
  47 |   error.name = 'Invariant Violation';

I can set the value of the JqxDateTimeInput fine via the setDate() function. However I would have expected the widget to update automatically as the state variable changes like it does with the other form elements.

Here is an example:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import JqxDateTimeInput from './jqwidgets-react/react_jqxdatetimeinput'

class App extends Component {
	
	constructor(props){
		super(props);
		
		this.state={
			myDateValue: new Date("Sat, 1 Jan 2000 07:04:25 GMT")
		}
	}

	
	changeDateValue(event){
		event.preventDefault();
		
		this.setState({
			myDateValue: new Date()
		});
		
	}
	
	
	
  componentDidMount(){
	this.refs.dateTimeInput.on('change', (event) => {
		this.setState({myDateValue: event.args.date});
	});
	  
	  
	this.refs.dateTimeInput.setDate(this.state.myDateValue);
	  
  }	
	
  render() {
    return (
      <div className="App">
		<JqxDateTimeInput ref="dateTimeInput"/>
		<br/><br/>	  
		{this.state.myDateValue.toGMTString()}
		

		<button onClick={this.changeDateValue.bind(this)}>change date value</button>
      </div>
    );
  }
}

export default App;

[Peter StoevKeymaster]

The value is not a Javascript Date object. That’s why it will not work like that.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts