Search code examples
javascriptjqueryjquery-pluginsreactjsjquery-ui-timepicker

Using the jQuery UI Timepicker Addon with React

I am attempting to use the jQuery UI Timepicker Addon in a React component that I am writing. However, whenever I try to use it I get an error that the "datetimepicker" function that the Addon adds to jQuery is not defined.

I think part of (or maybe the whole) the problem I am having is that there is no module for this in React, yet I am importing jQuery through React. What I'm trying to do...

index.html:

<!DOCTYPE html>
<html lang='eng'>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- jQuery UI core CSS -->
    <link rel="stylesheet" href="dist/jquery-ui.css">

    <!-- jQuery UI Timepicker Addon CSS -->
    <link rel="stylesheet" href="dist/jquery-ui-timepicker-addon.css">
</head>
  <body>
    <p style="color: white">
      If you see this there is a problem with React on the site.
    </p>
    <script src="dist/bundle.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery-ui-timepicker-addon.js"></script>
  </body>
</html>

As you can see, since the Addon does not currently exist as a React component (at least, I couldn't find it if it does), I manually imported it along with jQuery UI.

My component (included on index via a different component):

/** @jsx React.DOM */
var React = require('react');
var jQ    = require('jquery');

var Time = React.createClass({
    componentDidMount: function() {
        jQ('#startDate').datetimepicker({
            timeFormat: "HH:mm:ss",
            onClose: function() {
                console.log("Timepicker closed");
            }
        });
    },
    render: function() {
        return (
            <input id="startDate" className="input-xs datetime modern" type="datetime-local" />
        );
    }
});

module.exports = {Time: Time};

How should I go about including the Timepicker Addon for use in this React component?

Side note: I am using the Timepicker in large part because of how well it pop-up over other elements as well as it's inclusion of support for seconds and various time formats. I am using "datetime-local" inputs right now but they just don't really cut it :(

Solution

  • Try adding jQuery here:

    <script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
<script src="dist/bundle.min.js"></script>

    Remove

    var jQ    = require('jquery');

    and use $ instead of jQ

    $('#startDate').datetimepicker({
        timeFormat: "HH:mm:ss",
        onClose: function() {
            console.log("Timepicker closed");
        }
    });

    I also think you can use this.getDOMNode() instead of '#startDate'

     $(this.getDOMNode()).datetimepicker({
        timeFormat: "HH:mm:ss",
        onClose: function() {
            console.log("Timepicker closed");
        }
    });