jyapayne/dify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: refactor date-and-time-picker to use custom dayjs utility and add timezone support (#15101)

Browse source
This commit is contained in:
Wu Tianwei 2025-03-06 16:24:03 +08:00 • committed by GitHub
commit 5be8fbab56
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 102 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

29
web/app/components/base/date-and-time-picker/time-picker/index.tsx
View file

@ -1,7 +1,6 @@
import React, { useCallback, useEffect, useRef, useState } from 'react'
import dayjs from 'dayjs'
import type { Period, TimePickerProps } from '../types'
import { cloneTime, getHourIn12Hour } from '../utils'
import dayjs, { cloneTime, getDateWithTimezone, getHourIn12Hour } from '../utils/dayjs'
import {
PortalToFollowElem,
PortalToFollowElemContent,
@ -16,6 +15,7 @@ import cn from '@/utils/classnames'
const TimePicker = ({
value,
timezone,
placeholder,
onChange,
onClear,
@ -24,7 +24,8 @@ const TimePicker = ({
const { t } = useTranslation()
const [isOpen, setIsOpen] = useState(false)
const containerRef = useRef<HTMLDivElement>(null)
const [selectedTime, setSelectedTime] = useState(value)
const isInitial = useRef(true)
const [selectedTime, setSelectedTime] = useState(value ? getDateWithTimezone({ timezone, date: value }) : undefined)
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
@ -35,6 +36,22 @@ const TimePicker = ({
return () => document.removeEventListener('mousedown', handleClickOutside)
}, [])
useEffect(() => {
if (isInitial.current) {
isInitial.current = false
return
}
if (value) {
const newValue = getDateWithTimezone({ date: value, timezone })
setSelectedTime(newValue)
onChange(newValue)
}
else {
setSelectedTime(prev => prev ? getDateWithTimezone({ date: prev, timezone }) : undefined)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [timezone])
const handleClickTrigger = (e: React.MouseEvent) => {
e.stopPropagation()
if (isOpen) {
@ -42,6 +59,8 @@ const TimePicker = ({
return
}
setIsOpen(true)
if (value)
setSelectedTime(value)
}
const handleClear = (e: React.MouseEvent) => {
@ -74,11 +93,11 @@ const TimePicker = ({
}, [selectedTime])
const handleSelectCurrentTime = useCallback(() => {
const newDate = dayjs()
const newDate = getDateWithTimezone({ timezone })
setSelectedTime(newDate)
onChange(newDate)
setIsOpen(false)
}, [onChange])
}, [onChange, timezone])
const handleConfirm = useCallback(() => {
onChange(selectedTime)