react-admin-lte/lib/InputDateRange.js

简单封装的 AdminLTE react 类库，并包含一个编译配置。

import React from 'react';
import InputBase from './InputBase';
import { DateRange } from 'react-date-range';

export default class InputDateRange extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.onChange = this.onChange.bind(this);
  }

  onChange(range) {
    $("#" + this.props.name).val(
      range.startDate.format("YYYY年MM月DD") + " - " + range.endDate.format("YYYY年MM月DD")
    );
    if (this.props.onValueChange) {
      this.props.onValueChange(
        this.props.name, [
          range.startDate.format("YYYY-MM-DD"),
          range.endDate.format("YYYY-MM-DD")]
      );
    }
  }

  render() {
    return <InputBase label={this.props.label} name={this.props.name}>

      <input type="text" className="form-control" id={this.props.name} name={this.props.name}
        data-toggle="modal" data-target={"#" + this.props.name + "_selector"} readOnly={true}
        />
      <div className="modal fade" tabIndex="-1" role="dialog" id={this.props.name + "_selector"}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close"
                data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times; </span></button>
              <h4 className="modal-title">选择日期</h4>
            </div>
            <div className="modal-body">
              <DateRange
                onChange={this.onChange}
                format={this.props.format || "YYYY-MM-DD"}
                />
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">确认</button>
            </div>
          </div>
        </div>
      </div>

    </InputBase>;
  }

}