🐞 fix(时间选择器): 修复ios下时间显示错误的问题

This commit is contained in:
w1359774872@163.com 2022-12-23 18:53:34 +08:00
parent 990f5a9ff2
commit 913cbc9d42
3 changed files with 14 additions and 12 deletions

View File

@ -107,14 +107,14 @@ const SelectTimePicker = (props: SelectSaleTypeProps, ref) => {
} }
// 选择自定义时间 // 选择自定义时间
const onSelectDate = (event) => { const onSelectDate = (event, isSameDay: boolean) => {
console.log(event?.value, 'event?.value?.start') console.log(event?.value, 'event?.value?.start')
setCurrentDate({ setCurrentDate({
start: event?.value?.start, start: event?.value?.start,
end: event?.value?.end, end: isSameDay ? event?.value?.start : event?.value?.end,
}) })
setShowTime(false) setShowTime(false)
customFilterButtonText.current = `${dayjs(event?.value?.start).format('YYYY年MM月DD日')}${dayjs(event?.value?.end).format('YYYY年MM月DD日')}` customFilterButtonText.current = `${dayjs(event?.value?.start).format('YYYY年MM月DD日')}${dayjs(isSameDay ? event?.value?.start : event?.value?.end).format('YYYY年MM月DD日')}`
change?.([event?.value?.start, event?.value?.end]) change?.([event?.value?.start, event?.value?.end])
} }

View File

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

View File

@ -9,7 +9,7 @@ interface Props {
closePopup?: () => void closePopup?: () => void
end?: DateArg end?: DateArg
start?: DateArg start?: DateArg
onSelectDate?: (any) => void onSelectDate?: (any, isSameDay: boolean) => void
} }
const TimePickerPopup = (props: Props) => { const TimePickerPopup = (props: Props) => {
const { showTime = false, closePopup, start = '', end = '', onSelectDate } = props const { showTime = false, closePopup, start = '', end = '', onSelectDate } = props