joywok-material-components/components/datepicker/timerange.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 DatePicker from 'material-ui-pickers/DatePicker';
import {InlineDatePicker} from 'material-ui-pickers/DatePicker';
import {MuiPickersUtilsProvider,InlineDateTimePicker,DateTimePicker} from "material-ui-pickers";
import DateFnsUtils from "@date-io/date-fns"; 
require('./style/range.css');
function timetostamp_now(stamp,type){
  return stamp
}
class JwTimeRange extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
    	startDate:props.startDate ||null,
    	endDate:props.endDate || null
    };
  }
  startDateChange(data){
    let self = this;
    let date = moment(data)
  	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(data){
    let self = this;
    let date = moment(data);
    let datas = {
      startDate:(this.state.startDate!=null?this.state.startDate:null),
      endDate:timetostamp_now(date.format('X'),true)
    }

    if(datas.startDate>datas.endDate){
    	datas['startDate'] = datas.endDate
    }

    self.props.onChange && self.props.onChange(datas)
  }
  render(){
    let self = this;
    let format = this.props.format || 'YYYY-MM-DD HH:mm';
    if(window.lang == 'zh'){
      moment.locale('zh-cn', {
        months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        weekdays: ['周天', '周一', '周二', '周三', '周四', '周五', '周六'],
        weekdaysShort: ['周天', '周一', '周二', '周三', '周四', '周五', '周六'],
        weekdaysMin: ['周天', '周一', '周二', '周三', '周四', '周五', '周六'],
      })
    }else{
      moment.locale('en', {
        months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        monthsShort: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        weekdays: ["Sun", "Mon", "Tues", "Wednes", "Thurs", "Fri", "Satur"],
        weekdaysShort: ["Sun", "Mon", "Tues", "Wednes", "Thurs", "Fri", "Satur"],
        weekdaysMin: ["Sun", "Mon", "Tues", "Wednes", "Thurs", "Fri", "Satur"],
      })
    }
  	return (<div className="jw-datetimerange ">
        <div className="jw-datetimerange-icon"></div>
        <div className="jw-datetimerange-c">
          <MuiPickersUtilsProvider utils={MomentUtils} moment={moment}>
            <InlineDateTimePicker
            	className={'jw-datetimerange-start'}
             	{...self.props.startDateProps || {}}
	            showTabs
	            ampm={false}
	            showTabs={true}
	            format={format}
	            placeholder={(self.props.startdatelabel || "开始时间")}
              value={(self.state.startDate!=null&&self.state.startDate!=0)?moment(self.state.startDate*1000):null}
              onChange={(e)=>self.startDateChange(e)}
              onClose={(e)=>setTimeout(function(){},0)}
            />
            <div className="jw-datetimerange-sep">-</div>
            <InlineDateTimePicker
              className={'jw-datetimerange-end'}
              format={format}
              placeholder={(self.props.enddatelabel || "结束时间")}
              showTabs
	            ampm={false}
	            showTabs={true}
              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)}
              onClose={(e)=>setTimeout(function(){},0)}
            />
          </MuiPickersUtilsProvider>

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

export default JwTimeRange;