0

I had jquery-2.2.x earlier and code was running fine. Now, I have updated the jquery-3.3.x and started getting the error datepicker() function doesn't exist. After searching about that error, came to know that it need moment.js and bootstrap.js. So after adding these package, I am getting the error : Error: Bootstrap's JavaScript requires jQuery

Although I'm importing the jquery.

This code is running without any error when I am using jquery-2.2.x, but the same code with jquery-3.3.x is not working and giving error datepicker() function is not defined.

const React = require('react');
const $ = require('jquery');
require('bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css');
require('bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js');
require('styles/InputField.css');
/*
    Renders a single input field with label and inputBox
    Attributes
    1)labelText -> text for the label
    2)inputId -> Id for the input box
    3)inputPlaceholder -> placeholder for the input
    4)isDate -> if the field is for date activate the jquery datepicker
    Returns a div
*/
class InputField extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            datepickerEnabled: false
        }
    }

    // If the component is mounted and it is a date field activate the datepicker
    componentDidMount() {
        if(this.props.isDate === 'true') {
            $('#' + this.props.inputId).datepicker({dateFormat: 'mm/dd/yy'});
            this.setState({
                datepickerEnabled: true
            });
        }
    }

    render() {
        return (
            <div>
                <label htmlFor={this.props.inputId}> {this.props.labelText} </label>
                <input type='text' id={this.props.inputId} placeholder={this.props.inputPlaceholder} className='form-control'/>
            </div>
        );
    }
}

module.exports = InputField;

4
  • why would you need moment.js? Are you sure that you maybe only need jquery-ui? Can you create a problem here that shows your problem? eg the created HTML and all JS that is imported. Commented May 13, 2019 at 12:51
  • @cloned updated the question with full code Commented May 13, 2019 at 13:00
  • Maybe check these answers? Commented May 13, 2019 at 13:08
  • You don't need any additional js libraries when your code is pure jQuery, jquery and jquery-ui is enough. Have you looked at the html source code of your page and verified that there's a script tag pointing towards your jQuery files? Commented May 13, 2019 at 13:32

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.