I am using this library - datetimepicker_css.js in my html/jquery code. Whenever I click on the image, a time format like mm:dd:yyyy hh:mm:ss populates in input tag.

 Start time:<input type="text" id="demo1" maxlength="25" size="25" name="stime" />                                                                                                                        
 <img src="images2/cal.gif" onclick="javascript:NewCssCal ('demo1','yyyyMMdd','dropdown',true,'24',true)" style="cursor:pointer"/>   

I am trying to implement same in react js code, and facing issues doing so. I could populate start_time but couldn't do a onclick of image tag and replace in the start_time field. Any help/suggestion on this is highly appreciated.

  render() {
        return (
                <form onSubmit={this.handleSubmit}>
                    <input value={this.state.first_name} onChange={this.setFirstName} placeholder="First name"/>
                    <input value={this.state.last_name} onChange={this.setLastName} placeholder="Last name"/>
                    <input value={this.state.start_time} onChange={this.setStartTime} placeholder="Start Time" id="demo1" name="stime"/>
                    <img src="images2/cal.gif" onclick="javascript:NewCssCal ('demo1','yyyyMMdd','dropdown',true,'24',true)"/>
                    <button type="submit">Submit</button>
                </form>

        )
    }

    getInitialState() {
        return {
            first_name: "John",
            last_name: "Doe",
            start_time: "03/11/2016",
        };
    },         
   setStartTime(event) {
        this.setState({start_time: event.target.value});
    },                                                                     

I am using this library - datetimepicker_css.js in my html/jquery code. Whenever I click on the image, a time format like mm:dd:yyyy hh:mm:ss populates in input tag.

 Start time:<input type="text" id="demo1" maxlength="25" size="25" name="stime" />                                                                                                                        
 <img src="images2/cal.gif" onclick="javascript:NewCssCal ('demo1','yyyyMMdd','dropdown',true,'24',true)" style="cursor:pointer"/>   

I am trying to implement same in react js code, and facing issues doing so. I could populate start_time but couldn't do a onclick of image tag and replace in the start_time field. Any help/suggestion on this is highly appreciated.

  render() {
        return (
                <form onSubmit={this.handleSubmit}>
                    <input value={this.state.first_name} onChange={this.setFirstName} placeholder="First name"/>
                    <input value={this.state.last_name} onChange={this.setLastName} placeholder="Last name"/>
                    <input value={this.state.start_time} onChange={this.setStartTime} placeholder="Start Time" id="demo1" name="stime"/>
                    <img src="images2/cal.gif" onclick="javascript:NewCssCal ('demo1','yyyyMMdd','dropdown',true,'24',true)"/>
                    <button type="submit">Submit</button>
                </form>

        )
    }

    getInitialState() {
        return {
            first_name: "John",
            last_name: "Doe",
            start_time: "03/11/2016",
        };
    },         
   setStartTime(event) {
        this.setState({start_time: event.target.value});
    },                                                                     

• javascript
• jquery
• reactjs

• what is your html for image? – Kishore Barik Commented Mar 11, 2016 at 11:59
• @KishoreBarik edited the code – Goutam Commented Mar 11, 2016 at 12:01
• 1 change onclick to onClick in image tag – Kishore Barik Commented Mar 11, 2016 at 12:03
• @KishoreBarik Got this error : I am not sure how to use Image event as function. Uncaught Error: Invariant Violation: Expected onClick listener to be a function, instead got type string – Goutam Commented Mar 11, 2016 at 12:05
• ok now your onClick event is getting triggered. Now the error you are getting because the function you provided as string where it should be a function. you can bind a function of the ponent which will call NewCssCal ('demo1','yyyyMMdd','dropdown',true,'24',true) – Kishore Barik Commented Mar 11, 2016 at 12:10

1 Answer 1

render() {
        return (
                <form onSubmit={this.handleSubmit}>
                    <input value={this.state.first_name} onChange={this.setFirstName} placeholder="First name"/>
                    <input value={this.state.last_name} onChange={this.setLastName} placeholder="Last name"/>
                    <input value={this.state.start_time} onChange={this.setStartTime} placeholder="Start Time" id="demo1" name="stime"/>
                    <img src="images2/cal.gif" onClick={this.populateDate}/>
                    <button type="submit">Submit</button>
                </form>

        )
    },
populateDate(){
   NewCssCal('demo1','yyyyMMdd','dropdown',true,'24',true);

},

    getInitialState() {
        return {
            first_name: "John",
            last_name: "Doe",
            start_time: "03/11/2016",
        };
    },         
   setStartTime(event) {
        this.setState({start_time: event.target.value});
    },

Note: make sure your NewCssCal function is globally available