joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
63 lines (58 loc) • 1.82 kB
JavaScript
/**
*
* @api {} 组合组件
* @apiName 日期组件
* @apiGroup 日期组件
*
* @apiParam {String } value 选中的时间（时间戳）
* @apiParam {String } placeholder 默认Placeholder
* @apiParam {Array } format 日期显示格式化
* @apiParam {Function } onChange 数据变化的回调事件（时间戳）
*
* @apiSuccessExample {json} 使用案例:
* import JwDatepicker from 'joywok-material-components/lib/datepicker/normal';
* <JwDatepicker value={'1581058148'} onChange={(e)=>{console.log(e)}}></JwDatepicker>
*
*
*/
import React from 'react';
import ReactDOM from 'react-dom';
import MomentUtils from '@date-io/moment';
import {MuiPickersUtilsProvider,InlineTimePicker,DateTimePicker,TimePicker} from "material-ui-pickers";
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 TimePickers extends React.Component{
constructor(props) {
super(props);
this.state = {};
}
DateChange(date){
let self = this;
self.props.onChange && self.props.onChange(moment(date).format('X'))
}
render(){
let self = this;
let format = this.props.format || 'YYYY-MM-DD HH:mm';
return (<div className="jw-datapicker ">
<MuiPickersUtilsProvider utils={MomentUtils}>
<TimePicker
ampm={false}
format={format}
placeholder={(self.props.placeholder || "日期")}
{...this.props}
value={self.props.value!=null?moment(self.props.value*1000):null}
onChange={(e)=>this.DateChange(e)}
/>
</MuiPickersUtilsProvider>
</div>
)
}
}
export default TimePickers;