Not able to use Datefield plugin

[AfzalMohammad5]

Hi ,

I am using http://eonasdan.github.io/bootstrap-datetimepicker/#no-icon-input-field-only datefield plugin ,

not able to access the datetime field , as i am getting following error like below.

Could you please help me regarding this.

Uncaught TypeError: $(...).datetimepicker is not a function
at Constructor.componentDidMount (EmploymentVerificationForm.js:13)
at CallbackQueue.notifyAll (react-with-addons.js:889)
at ReactReconcileTransaction.close (react-with-addons.js:13509)
at ReactReconcileTransaction.closeAll (react-with-addons.js:17336)
at ReactReconcileTransaction.perform (react-with-addons.js:17283)
at ReactUpdatesFlushTransaction.perform (react-with-addons.js:17270)
at ReactUpdatesFlushTransaction.perform (react-with-addons.js:15335)
at Object.flushBatchedUpdates (react-with-addons.js:15396)
at Object.wrapper [as flushBatchedUpdates] (react-with-addons.js:12883)
at ReactDefaultBatchingStrategyTransaction.closeAll (react-with-addons.js:17336)

added the bower path to requirejs.config file and below is the class defination.

define(['react', 'classnames', 'jquery', 'jquery-ui', 'app/VerifyFooterTataCapital','app/VerifyFooter','eonasdan-bootstrap-datetimepicker'],
function(React, classNames, $, ui, VerifyFooterTataCapital,VerifyFooter,Datetimepicker){

var EmploymentVerificationForm = React.createClass({

	
	componentDidMount: function(){
		var self = this;
		 **$('#datetimepicker4').datetimepicker();**
		

		this.props.user.subscribe(function(){
			this.props.user.hasErrors() && this.setState({formStatus: 'open'});
			this.props.user.infoRecorded && this.setState({formStatus: 'submitted'});
		}.bind(this));
	},

	

	render: function(){
		var user = this.props.user,
			footer= <VerifyFooter/>,
			form = '',
			message = '';				
			if(user.lender == '23'){
				footer= <VerifyFooterTataCapital />;
			}else{
				footer= <VerifyFooter/>;
			}
		if (this.state.formStatus === 'submitted'){
			form = '';
			message = (<div className="thank-you-message">
				<p>Thank you for verifying your information.</p>
			</div>);
		} else {
			form = (
				<form className="employee-form" name="userForm">
				 	<div className="row">
			            <div className="employment-info">
			                <div className="form-group s">
			                    <label className="control-label">Employee no.</label>
			                    <input name="employeeNumber" pattern="[a-zA-Z0-9 ]+" className="form-control" value={user.employmentInfo.employeeNumber} onChange={this.onChange} onInput={this.setRegExpForField} onBlur={this.setRegExpForFieldOnPaste} autoComplete="off"/>
			                    { this.renderErrorField('employeeNumber')}
			                </div>
			                <div className="form-group s">
			                    <label className="control-label">Date of joining</label>
			                    **<input type='text' class="form-control" id='datetimepicker4' />**
			                   
			                    { this.renderErrorField('joiningDate')}
			                </div>
			                <div className="form-group m">
			                    <label className="control-label">Department name</label>
			                    <input name="department" className="form-control" value={user.employmentInfo.department} onChange={this.onChange} maxLength="100" onInput={this.setRegExpForField} onBlur={this.setRegExpForFieldOnPaste}/>
			                    { this.renderErrorField('department')}
			                </div>
			                <div className="form-group m">
			                    <label className="control-label">Place of current posting</label>
			                    <input name="jobLocation" className="form-control" value={user.employmentInfo.jobLocation} onChange={this.onChange} onInput={this.setRegExpForField} maxLength="100" onBlur={this.setRegExpForFieldOnPaste}/>
			                    { this.renderErrorField('jobLocation')}
			                </div>
			                <div className="form-group m">
			                    <label className="control-label">Phone Number</label>
			                    <input type="number" name="phoneNumber" className="form-control" value={user.employmentInfo.phoneNumber} onChange={this.onChange} onInput={this.setRegExpForField}  onBlur={this.setRegExpForFieldOnPaste}/>
			                    { this.renderErrorField('phoneNumber')}
			                </div>
			            </div>
			            <div className="employee-address">
			                <div className="form-group m">
			                    <label className="control-label">Permanent home address line 1</label>
			                    <input name="street1" className="form-control" value={user.employmentInfo.address.street1} onChange={this.onChange} maxLength="100" onInput={this.setRegExpForField} onBlur={this.setRegExpForFieldOnPaste}/>
			                    { this.renderErrorField('street1')}
			                </div>    
			                <div className="form-group m">
			                    <label className="control-label">Address line 2</label>
			                    <input name="street2" className="form-control" value={user.employmentInfo.address.street2} onChange={this.onChange} maxLength="100" onInput={this.setRegExpForField} onBlur={this.setRegExpForFieldOnPaste}/>
			                    { this.renderErrorField('street2')}
			                </div>
			                <div className="form-group m">
			                    <label className="control-label">City</label>
			                    <input name="city" className="form-control" value={user.employmentInfo.address.city} onChange={this.onChange} maxLength="100" onInput={this.setRegExpForField} onBlur={this.setRegExpForFieldOnPaste}/> 
			                    { this.renderErrorField('city')}   
			                </div>
			                <div className="form-group s">
			                    <label className="control-label">State</label>
			                    <select name="state" className="form-control" defaultValue="" value={user.employmentInfo.address.state} onChange={this.onChange}>
			                    	{
      									user.states.map(function(state) {
        									return <option key={state}
          										value={state}>{state}</option>;
      									})
    								}
			                    </select>
			                    { this.renderErrorField('state')}
			                </div>
			                <div className="form-group s">
			                    <label className="control-label">Pincode</label>
			                    <input name="pin" type="number" className="form-control" value={user.employmentInfo.address.pin} onChange={this.onChange} onInput={this.checkLength} pattern="[1-9][0-9]{5}"/>
			                    { this.renderErrorField('pin')}
			                </div>                
			            </div>
		            </div>
		            <div className="submit-button">
		                <div className="form-group">
		                    <button type="submit" className="btn btn-primary" onClick={this.submitInfo}>
		                        <span>Submit</span>
		                    </button>
		                    
		                </div>
		            </div>
		        </form>
			);
			message = <div className="message">Get started by filling in the following details below!</div>;
		}


		return(
			<div className="employment-verification-form">			        
		       	{message}
		       	{form}
		        {footer}
		    </div>
		);
	}
});

return EmploymentVerificationForm;

});