Can't force a change event on input

application.js

$(document).ready(function() {
  $(".datepicker").datepicker({
    onSelect: function() {
      console.log("onSelect");

      $(this).trigger("change");

      var event = new UIEvent("select", {
        "view": window,
        "bubbles": true,
        "cancelable": true
      });
      this.dispatchEvent(event);
    }
  });
});

form.js.jsx

this.RecordForm = React.createClass({
  getInitialState: function() {
    return { title: "", date: "", amount: "" };
  },
  handleChange: function(e) {
    console.log("Handling change...");
    name = e.target.name;
    return this.setState((
      obj = {},
      obj["" + name] = e.target.value,
      obj
    ));
  },
  handleSubmit: function(e) {
    e.preventDefault();
    $.post(
      "",
      { record: this.state },
      (data) => {
        this.props.handleNewRecord(data);
        this.setState(this.getInitialState());
      },
      "json"
    );
  },
  render: function() {
    return (
      <div className="panel panel-default">
        <div className="panel-body">
          <form className="form-horizontal" onSubmit={this.handleSubmit}>
            <div className="form-group">
              <label className="control-label col-sm-2">Date</label>
              <div className="col-sm-3">
                <input type="text" className="form-control datepicker" placeholder="Date" name="date" value={this.state.date} onChange={this.handleChange} />
              </div>
            </div>
            <div className="form-group">
              <label className="control-label col-sm-2">Title</label>
              <div className="col-sm-6">
                <input type="text" className="form-control" placeholder="Title" name="title" value={this.state.title} onChange={this.handleChange} />
              </div>
            </div>
            <div className="form-group">
              <label className="control-label col-sm-2">Amount</label>
              <div className="col-sm-3">
                <input type="number" className="form-control" placeholder="Amount" name="amount" value={this.state.amount} onChange={this.handleChange} />
              </div>
            </div>
            <div className="form-group">
              <div className="col-sm-offset-2 col-sm-10">
                <button type="submit" className="btn btn-primary" disabled={!this.valid()}>Create record</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  },
  valid: function() {
    return this.state.title &&
      this.state.date &&
      this.state.amount;
  }
});