|
@ -1,7 +1,5 @@ |
|
|
import React from 'react'; |
|
|
import React from 'react'; |
|
|
import Calendar from 'rc-calendar'; |
|
|
import Calendar, {MonthCalendar, Picker as Datepicker} from 'rc-calendar'; |
|
|
const Datepicker = Calendar.Picker; |
|
|
|
|
|
|
|
|
|
|
|
import GregorianCalendar from 'gregorian-calendar'; |
|
|
import GregorianCalendar from 'gregorian-calendar'; |
|
|
import zhCn from 'gregorian-calendar/lib/locale/zh-cn'; |
|
|
import zhCn from 'gregorian-calendar/lib/locale/zh-cn'; |
|
|
import CalendarLocale from 'rc-calendar/lib/locale/zh-cn'; |
|
|
import CalendarLocale from 'rc-calendar/lib/locale/zh-cn'; |
|
@ -17,82 +15,86 @@ Locale.shortMonths = ['1月', '2月', '3月', '4月', '5月', '6月', |
|
|
let defaultCalendarValue = new GregorianCalendar(zhCn); |
|
|
let defaultCalendarValue = new GregorianCalendar(zhCn); |
|
|
defaultCalendarValue.setTime(Date.now()); |
|
|
defaultCalendarValue.setTime(Date.now()); |
|
|
|
|
|
|
|
|
const AntDatepicker = React.createClass({ |
|
|
|
|
|
getInitialState() { |
|
|
function createPicker(Calendar){ |
|
|
var value; |
|
|
return React.createClass({ |
|
|
if (this.props.value) { |
|
|
getInitialState() { |
|
|
value = new GregorianCalendar(zhCn); |
|
|
var value; |
|
|
value.setTime(new Date(this.props.value).valueOf()); |
|
|
if (this.props.value) { |
|
|
} |
|
|
value = new GregorianCalendar(zhCn); |
|
|
return { |
|
|
value.setTime(new Date(this.props.value).valueOf()); |
|
|
value: value |
|
|
} |
|
|
}; |
|
|
return { |
|
|
}, |
|
|
|
|
|
componentWillReceiveProps(nextProps) { |
|
|
|
|
|
if (nextProps.value) { |
|
|
|
|
|
var value = new GregorianCalendar(zhCn); |
|
|
|
|
|
value.setTime(new Date(nextProps.value).valueOf()); |
|
|
|
|
|
this.setState({ |
|
|
|
|
|
value: value |
|
|
value: value |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
componentWillReceiveProps(nextProps) { |
|
|
|
|
|
if (nextProps.value) { |
|
|
|
|
|
var value = new GregorianCalendar(zhCn); |
|
|
|
|
|
value.setTime(new Date(nextProps.value).valueOf()); |
|
|
|
|
|
this.setState({ |
|
|
|
|
|
value: value |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
getDefaultProps() { |
|
|
|
|
|
return { |
|
|
|
|
|
format: 'yyyy-MM-dd', |
|
|
|
|
|
placeholder: '请选择日期', |
|
|
|
|
|
transitionName: 'slide-up', |
|
|
|
|
|
onSelect() { |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
handleChange(v) { |
|
|
|
|
|
this.setState({ |
|
|
|
|
|
value: v |
|
|
}); |
|
|
}); |
|
|
} |
|
|
this.props.onSelect(new Date(v.getTime())); |
|
|
}, |
|
|
}, |
|
|
getDefaultProps() { |
|
|
render() { |
|
|
return { |
|
|
var calendar = ( |
|
|
format: 'yyyy-MM-dd', |
|
|
<Calendar |
|
|
placeholder: '请选择日期', |
|
|
disabledDate={this.props.disabledDate} |
|
|
transitionName: 'slide-up', |
|
|
locale={CalendarLocale} |
|
|
onSelect() { |
|
|
orient={['top', 'left']} |
|
|
|
|
|
defaultValue={defaultCalendarValue} |
|
|
|
|
|
showTime={this.props.showTime} |
|
|
|
|
|
prefixCls="ant-calendar" |
|
|
|
|
|
showOk={this.props.showTime} |
|
|
|
|
|
showClear={false}/> |
|
|
|
|
|
); |
|
|
|
|
|
var sizeClass = ''; |
|
|
|
|
|
if (this.props.size === 'large') { |
|
|
|
|
|
sizeClass = ' ant-input-lg'; |
|
|
|
|
|
} else if (this.props.size === 'small') { |
|
|
|
|
|
sizeClass = ' ant-input-sm'; |
|
|
} |
|
|
} |
|
|
}; |
|
|
return ( |
|
|
}, |
|
|
<Datepicker |
|
|
handleChange(v) { |
|
|
transitionName={this.props.transitionName} |
|
|
this.setState({ |
|
|
disabled={this.props.disabled} |
|
|
value: v |
|
|
trigger={<span className="ant-calendar-picker-icon" />} |
|
|
}); |
|
|
calendar={calendar} |
|
|
this.props.onSelect(new Date(v.getTime())); |
|
|
adjustOrientOnCalendarOverflow={{x: true, y: false}} |
|
|
}, |
|
|
formatter={new DateTimeFormat(this.props.format)} |
|
|
render() { |
|
|
value={this.state.value} |
|
|
var calendar = ( |
|
|
defaultValue={this.props.defaultValue} |
|
|
<Calendar |
|
|
prefixCls="ant-calendar-picker" |
|
|
disabledDate={this.props.disabledDate} |
|
|
style={this.props.style} |
|
|
locale={CalendarLocale} |
|
|
onChange={this.handleChange}> |
|
|
orient={['top', 'left']} |
|
|
<input |
|
|
defaultValue={defaultCalendarValue} |
|
|
placeholder={this.props.placeholder} |
|
|
showTime={this.props.showTime} |
|
|
className={'ant-calendar-picker-input ant-input' + sizeClass}/> |
|
|
prefixCls="ant-calendar" |
|
|
</Datepicker> |
|
|
showOk={this.props.showTime} |
|
|
); |
|
|
showClear={false}/> |
|
|
|
|
|
); |
|
|
|
|
|
var sizeClass = ''; |
|
|
|
|
|
if (this.props.size === 'large') { |
|
|
|
|
|
sizeClass = ' ant-input-lg'; |
|
|
|
|
|
} else if (this.props.size === 'small') { |
|
|
|
|
|
sizeClass = ' ant-input-sm'; |
|
|
|
|
|
} |
|
|
} |
|
|
return ( |
|
|
}); |
|
|
<Datepicker |
|
|
} |
|
|
transitionName={this.props.transitionName} |
|
|
|
|
|
disabled={this.props.disabled} |
|
|
const AntDatePicker = createPicker(Calendar); |
|
|
trigger={<span className="ant-calendar-picker-icon" />} |
|
|
|
|
|
calendar={calendar} |
|
|
const AntMonthPicker = createPicker(MonthCalendar); |
|
|
adjustOrientOnCalendarOverflow={{ |
|
|
|
|
|
x: true, |
|
|
|
|
|
y: false |
|
|
|
|
|
}} |
|
|
|
|
|
formatter={new DateTimeFormat(this.props.format)} |
|
|
|
|
|
value={this.state.value} |
|
|
|
|
|
defaultValue={this.props.defaultValue} |
|
|
|
|
|
prefixCls="ant-calendar-picker" |
|
|
|
|
|
style={this.props.style} |
|
|
|
|
|
onChange={this.handleChange}> |
|
|
|
|
|
<input |
|
|
|
|
|
placeholder={this.props.placeholder} |
|
|
|
|
|
className={'ant-calendar-picker-input ant-input' + sizeClass}/> |
|
|
|
|
|
</Datepicker> |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const AntCalendar = React.createClass({ |
|
|
const AntCalendar = React.createClass({ |
|
|
getDefaultProps() { |
|
|
getDefaultProps() { |
|
@ -106,6 +108,7 @@ const AntCalendar = React.createClass({ |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
AntDatepicker.Calendar = AntCalendar; |
|
|
AntDatePicker.Calendar = AntCalendar; |
|
|
|
|
|
AntDatePicker.MonthPicker = AntMonthPicker; |
|
|
|
|
|
|
|
|
export default AntDatepicker; |
|
|
export default AntDatePicker; |
|
|