knk
Version:
react components based on react
81 lines (80 loc) • 2.59 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
* MonthRangePicker 月份范围选择组件
*/
import React from 'react';
import { DatePicker, Row, Col } from 'antd';
import moment from 'moment';
import { ConfigProvider } from 'antd';
import PropTypes from 'prop-types';
var MonthPicker = DatePicker.MonthPicker;
var MonthRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
var monthRangePickerRef = React.useRef();
monthRangePickerRef = ref;
/**
* 生成 disabledMonth 函数的函数
* @param {Number} isEnd 0,生成 disabledStartMonth; 1，生成 disabledEndMonth
*/
var genDisabledMonth = function genDisabledMonth(isEnd) {
return function (date) {
var value = props.value;
var _value = _slicedToArray(value, 2),
startMonth = _value[0],
endMonth = _value[1];
if (isEnd) {
return date && startMonth && startMonth.startOf('month').valueOf() > moment(date).startOf('month').valueOf();
}
return date && endMonth && endMonth.startOf('month').valueOf() < moment(date).startOf('month').valueOf();
};
};
var value = props.value,
_onChange = props.onChange,
locale = props.locale,
disabled = props.disabled,
allowClear = props.allowClear;
var _value2 = _slicedToArray(value, 2),
startMonth = _value2[0],
endMonth = _value2[1];
return /*#__PURE__*/React.createElement(Row, {
ref: monthRangePickerRef,
gutter: 8
}, /*#__PURE__*/React.createElement(ConfigProvider, {
locale: locale
}, /*#__PURE__*/React.createElement(Col, {
span: 12
}, /*#__PURE__*/React.createElement(MonthPicker, {
allowClear: allowClear,
disabled: disabled,
disabledDate: genDisabledMonth(0),
onChange: function onChange(data) {
return _onChange([data, endMonth]);
},
placeholder: "\u8BF7\u9009\u62E9\u5F00\u59CB\u65F6\u95F4",
style: {
width: '100%'
},
value: startMonth
})), /*#__PURE__*/React.createElement(Col, {
span: 12
}, /*#__PURE__*/React.createElement(MonthPicker, {
allowClear: allowClear,
disabled: disabled,
disabledDate: genDisabledMonth(1),
onChange: function onChange(data) {
return _onChange([startMonth, data]);
},
placeholder: "\u8BF7\u9009\u62E9\u622A\u6B62\u65F6\u95F4",
style: {
width: '100%'
},
value: endMonth
}))));
});
MonthRangePicker.propTypes = {
value: PropTypes.any,
onChange: PropTypes.func,
disabled: PropTypes.bool,
allowClear: PropTypes.bool,
locale: PropTypes.any
};
export default MonthRangePicker;