import React, { useState } from 'react';
import {
DatePicker,Button,Space
} from 'antd';
import dayjs from 'dayjs';
import styles from './index.less';
import {formatTime} from '../../utils';
const { RangePicker } = DatePicker;
const DateRangePickerComp = ({ value, onChange, disabled, noEditable }) => {
const [open, setOpen] = useState(false);
const [selectCue, setSelectCue] = useState(false);
const filterEnd = (DateValue) => {
if (!DateValue?.end) {
return '';
}else {
return dayjs(DateValue.end);
}
}
const dateFormat = (value) => {
const formatVal = value.format('YYYY-MM-DD');
if (formatVal.includes('2099')) {
return '永久有效期';
} else {
return formatVal;
}
}
return noEditable ? (
value?.start ? (
formatTime('YMD', value.start)
) : (
''
)
) : (
<RangePicker
open={open}
onOpenChange={(state) => setOpen(state)}
disabled={disabled}
placeholder={disabled ? ['', ''] : ['签发日期', '有效期']}
value={[value?.start ? dayjs(value.start) : '', filterEnd(value)]}
onChange={(value) => {
console.log('改变时间', value);
setSelectCue(false);
onChange({
start: value && value[0] ? formatTime('UTC', value[0]) : '',
end: value && value[1] ? formatTime('UTC', value[1]) : '',
});
}}
className={styles.datePicker}
format={dateFormat}
renderExtraFooter={() => (
<Space style={{ width: 'calc(100% - 20px)', justifyContent: 'space-between' }}>
<span style={{ fontSize: '12px', color: 'red', paddingLeft: '20px' }}>{selectCue && '签发日期不能为空'}</span>
<Button
type="link"
style={{ color: '#8969c8' }}
size="small"
onClick={() => {
if (!value?.start) {
setSelectCue(true);
return;
}
onChange({
start: formatTime('UTC', value.start),
end: dayjs('2099-12-31'),
});
if (value.start) {
setOpen(false);
}
}}
>
永久有效期
</Button>
</Space>
)}
/>
);
};
export default DateRangePickerComp;
网友评论