58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import { View } from '@tarojs/components'
|
||
import { memo, useRef, useState } from 'react'
|
||
import dayjs from 'dayjs'
|
||
import NormalButton from '../normalButton'
|
||
import styles from './index.module.scss'
|
||
import AtCalendar from '@/components/calendar/index'
|
||
import Popup from '@/components/popup'
|
||
|
||
type DateArg = string | number | Date
|
||
interface Props {
|
||
end?: DateArg
|
||
start?: DateArg
|
||
onSelectDate?: (any, isSameDay: boolean) => void
|
||
}
|
||
const TimePicker = (props: Props) => {
|
||
const { start = '', end = '', onSelectDate } = props
|
||
const [time, setTime] = useState<any>({})
|
||
const isSameDay = useRef(false)
|
||
const handTime = (e) => {
|
||
const { start, end } = e.value
|
||
isSameDay.current = start === end
|
||
// 如果选的是同一天的日期, end 自动加一天
|
||
if (!end) {
|
||
// 判断如果没选下一天的时候
|
||
e.value.end = `${dayjs(start).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`
|
||
isSameDay.current = true
|
||
}
|
||
else
|
||
if (start === end) {
|
||
e.value.end = `${dayjs(start).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`
|
||
}
|
||
else {
|
||
e.value.start = `${dayjs(start).format('YYYY-MM-DD')} 00:00:00`
|
||
e.value.end = `${dayjs(end).format('YYYY-MM-DD')} 23:59:59`
|
||
}
|
||
console.log('e===>', e)
|
||
setTime(e)
|
||
}
|
||
// 由于小程序的bug，部分ios和安卓显示时间的时候会有问题，原因是格式化时有`-`这个横杠 被dayjs解决了
|
||
return (
|
||
<>
|
||
<View className={styles['time-box']}>
|
||
<AtCalendar
|
||
isMultiSelect
|
||
format="YYYY-MM-DD 00:00:00"
|
||
currentDate={{
|
||
start,
|
||
end,
|
||
}}
|
||
onSelectDate={e => handTime(e)}
|
||
/>
|
||
</View>
|
||
<NormalButton type="primary" onClick={() => onSelectDate?.(time, isSameDay.current)} size="normal" round customClassName={styles['sure-box']}>确认</NormalButton>
|
||
</>
|
||
)
|
||
}
|
||
export default memo(TimePicker)
|