joywok-material-components/components/datepicker/daterange.js

<h1 align="center"> Joywok Material Components </h1>

import React from 'react';
import ReactDOM from 'react-dom';
import MomentUtils from '@date-io/moment';
import moment from 'moment';
import MuiPickersUtilsProvider from 'material-ui-pickers/MuiPickersUtilsProvider';
import DatePicker from 'material-ui-pickers/DatePicker';
import {InlineDatePicker} from 'material-ui-pickers/DatePicker';
require('./style/range.css');
function timetostamp_now(stamp,type){
    let date = new Date(stamp*1000);
    let data = new Date(date.getFullYear(),date.getMonth(),date.getDate());
    let datum = Date.parse(data)/1000;
    if(type){
      datum+=86399
    }
    return datum
}
class JwDateRange extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
    	startDate:props.startDate ||null,
    	endDate:props.endDate || null
    };
  }
  startDateChange(date){
    let self = this;
  	let endDate = this.state.endDate
  	let datas = {
  		startDate:timetostamp_now(date.format('X'))
  	}
    if(endDate!=null){
      if(date.format('X') > endDate){
        datas['endDate'] = null
      }  
    }else{
      datas['endDate'] = null
    }
    self.props.onChange && self.props.onChange(datas)
  }
  endDateChange(date){
    let self = this;
    let datas = {
      startDate:(this.state.startDate!=null?this.state.startDate:null),
      endDate:timetostamp_now(date.format('X'),true)
    }
    self.props.onChange && self.props.onChange(datas)
  }
  render(){
    let self = this;
    let format = this.props.format || 'YYYY-MM-DD';
  	return (<div className="jw-datarange ">
        <div className="jw-datarange-icon"></div>
        <div className="jw-datarange-c">
          <MuiPickersUtilsProvider utils={MomentUtils}>
            <InlineDatePicker
              onlyCalendar
              className={'jw-datarange-start'}
              format={format}
              placeholder={(self.props.startdatelabel || "开始时间")}
              {...self.props.startDateProps || {}}
              value={(self.state.startDate!=null&&self.state.startDate!=0)?moment(self.state.startDate*1000):null}
              onChange={(e)=>self.startDateChange(e)}
            />
            <div className="jw-datarange-sep">-</div>
            <InlineDatePicker
              onlyCalendar
              className={'jw-datarange-end'}
              format={format}
              placeholder={(self.props.enddatelabel || "结束时间")}
              disabled={self.state.startDate!=null?false:true}
              minDate={self.state.startDate!=null&&self.state.startDate!=0?moment(self.state.startDate*1000):null}
              {...self.props.endDateProps || {}}
              value={(self.state.endDate!=null&&self.state.endDate!=0)?moment(self.state.endDate*1000):null}
              onChange={(e)=>self.endDateChange(e)}
            />

          </MuiPickersUtilsProvider>

        </div>
      </div>
      )
  }
  componentWillReceiveProps(nextProps){
    this.setState(nextProps);
  }
  componentDidMount(){
  }
}

export default JwDateRange;