/**
* @description: 日期筛选组件-完全不受控组件
* @param {Array} allOption 取timeUtils.js的值
* @param {String} defaultSelecType 默认选中的类型
* @param {String, String []} defaultSelectValue 日期组件默认值
* defaultSelecType为自定义时,可传;
* 格式: 'YYYY-MM-DD' || ['YYYY-MM-DD', 'YYYY-MM-DD']
* @param {Object} pickerType 日期组件类型
* 格式:{
* name: DatePicker组件类型 (String) ('RangePicker' 或 'DatePicker')
* picker: DatePicker组件类型(可选:date, week, month, quarter, year)(String)
* }
* @return {Object} {dateFrom, dateTo, selectDateType(选中日期类型)}
*/
import React, { Component } from 'react';
import styles from './index.less'
import * as TimeUtils from '@/utils/timeUtils'
import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
export default class TimeSelect extends Component {
constructor(props) {
super(props)
this.state = {
selectDateType: props.defaultSelecType ?? '', //选中类型
selectValue: props.defaultSelectValue ?? ''
}
}
handleToggleDate = (selectDateType) => {
this.setState({
selectDateType,
selectValue: ''
}, () => {
if (selectDateType !== '自定义') {
const { dateFrom, dateTo } = TimeUtils.getTimeRange(selectDateType)
this.handleCheck(dateFrom, dateTo)
}
})
}
rangePickerChange = (date, dateString) => {
if (!dateString[0] && !dateString[1]) return void 0
this.handleCheck(`${dateString[0]} 00:00:00`, `${dateString[1]} 23:59:59`)
}
datePickerChange = (date, dateString) => {
if (!dateString) return void 0
this.handleCheck(`${dateString} 00:00:00`, `${dateString} 23:59:59`)
}
handleCheck = (dateFrom, dateTo) => {
const { onCheck } = this.props
const { selectDateType } = this.state
onCheck
&& typeof onCheck == 'function'
&& onCheck({
dateFrom,
dateTo,
selectDateType
})
}
renderPicker = () => {
const { pickerType = {} } = this.props
const { selectValue } = this.state
let defaultValue = '',
target = null
if (selectValue) {
if (Array.isArray(selectValue)) {
defaultValue = selectValue.map(v => moment(v))
} else {
defaultValue = moment(selectValue)
}
}
switch (pickerType.name) {
case 'RangePicker':
target =
<RangePicker
dateRender={current => {
const style = {};
return (
<div className="ant-picker-cell-inner" style={style}>
{current.date()}
</div>
);
}}
defaultValue={defaultValue}
onChange={this.rangePickerChange}
/>
break;
case 'DatePicker':
target =
<DatePicker
onChange={this.datePickerChange}
picker={pickerType.picker}
defaultValue={defaultValue}
/>
break;
}
return target
}
render() {
const { selectDateType } = this.state
const { allOption = [] } = this.props
return (
<div className={styles.commonTimeSelect}>
<div className={styles.toggleDate}>
{
allOption.map(v => {
return (
<div
className={v == selectDateType ? styles.checked : ''}
key={v}
onClick={() => this.handleToggleDate(v)}
>{v}</div>
)
})
}
</div>
{selectDateType == '自定义'
&& (
<div className={styles.datePicker}>
{this.renderPicker()}
</div>
)
}
</div>
)
}
}
样式文件
.commonTimeSelect {
display: flex;
align-items: center;
.toggleDate {
display: flex;
align-items: center;
height: 31px;
// margin-left: 10px;
div {
min-width: 54px;
height: 32px;
padding: 0 8px;
line-height: 32px;
text-align: center;
border: 1px solid #d9d9d9;
cursor: pointer;
}
div:first-child {
border-radius: 2px 0 0 2px;
}
div:last-child {
border-radius: 0 2px 2px 0;
}
div:not(.checked):not(:first-child) {
border-left: none;
}
.checked {
color: #1685ff;
border: 1px solid #1685ff;
}
}
.datePicker {
// width: 245px;
// height: 32px;
margin-left: 10px;
}
}