store-ui/widget/date-picker.js

store-ui

/**
/**
 * hufeng on 15/2/7.
 * Description: 封装日期选择的组件
 */
var React = require('react');

var script = require('scriptjs');


//yeah, nothing to do.
function noop() {}


/**
 * 日期选择组件
 *
 * Props:
 * name: 时间选择input的name，默认'',
 * dateFmt: 时间格式，默认yyyy-MM-dd
 * onChange: 时间改变触发onChange事件
 * defaultValue: 时间默认值
 * value: 事件的值，比如通过onChange改变
 *
 * Usage:
 *
 *  var React = require('react');
 *  var DatePicker = require('uikit/datepicker');
 *
 *  <DatePicker name={'date'} dateFmt: {'yyyy-MM-dd HH:mm:ss'} onChange={...}/>
 *
 */
var DatePicker = React.createClass({

  /**
   * 组件默认属性
   * name: input name
   * dateFmt:日期格式，形如java的SimpleDateFormat格式
   * onChange: onChange的回调
   *
   * @returns {{name: string, dateFmt: string, onChange: noop}}
   */
  getDefaultProps() {
    return {
      name: '',
      dateFmt: 'yyyy-MM-dd',
      onChange: noop
    }
  },


  /**
   * 当input渲染结束的时候，开始异步加载依赖的WdatePicker的插件js
   * 然后渲染组件
   */
  componentDidMount() {
    if (this.isMounted()) {
      var _self = this;
      var node = this.refs.datePicker.getDOMNode();
      var dateFmt = this.props.dateFmt;

      script(['http://pic.ofcard.com/themes/admin/plugins/DatePicker/WdatePicker.js'], () => {
        $(node).click(function(){
          var _this = this;
          WdatePicker({el:node,
	          dateFmt: dateFmt,
	          readOnly:true,
	          onpicked: function() {
            //直接调用onChange方法set值
            _self.props.onChange($(_this).val());
          }});
        });
      });
    }
  },


  /**
   * virtual dom
   * @returns {XML}
   */
  render() {
    var value = {};
    if (!(typeof(this.props.defaultValue) === 'undefined')) {
      value['defaultValue'] = this.props.defaultValue;
    }

    if (!(typeof(this.props.value) === 'undefined')) {
      value['value'] = this.props.value;
    }

    return (
      <input type="text"
        ref={'datePicker'}
        name={this.props.name}
        className={'PicDate'}
        {... value}
        onChange={this._handleChange}/>
    );
  },


  /**
   * 处理onChange事件
   *
   * @param e
   * @private
   */
  _handleChange(e) {
    this.props.onChange(e.target.value);
  }
});

module.exports = DatePicker;