Enhance TimeEdit Component with Context Integration and Dynamic Date Format

- Added useContext to integrate ApiServerContext for accessing user settings.
- Implemented dynamic dateTimeFormat in the TimeEdit component, improving flexibility based on user preferences.
- Refactored date picker to utilize the new format, enhancing user experience and consistency.

src/components/Dashboard/common/TimeEdit.jsx

@@ -1,8 +1,10 @@
-import { useState, useRef } from 'react'
+import { useState, useRef, useContext } from 'react'
 import PropTypes from 'prop-types'
 import { DatePicker, Input } from 'antd'
 import dayjs from 'dayjs'
 import FunctionIcon from '../../Icons/FunctionIcon'
+import { ApiServerContext } from '../context/ApiServerContext'
+import { DEFAULT_DATE_TIME_FORMAT } from '../../../database/Settings'
 
 const OPERATOR_KEYS = ['+', '-']
 
@@ -70,21 +72,17 @@ function applyTimeExpr(fallbackBase, expr) {
   return result
 }
 
-const TimeEdit = ({
+const TimeEdit = ({ value, onChange, onBlur, disabled, ...rest }) => {
-  value,
-  onChange,
-  onBlur,
-  disabled,
-  ...rest
-}) => {
   const [isExprMode, setIsExprMode] = useState(false)
   const [exprValue, setExprValue] = useState('')
   const inputRef = useRef(null)
+  const { userSettings } = useContext(ApiServerContext) || {}
+  const dateTimeFormat =
+    userSettings?.appearance?.dateTimeFormat || DEFAULT_DATE_TIME_FORMAT
 
   const dayjsValue =
     value == null ? null : dayjs.isDayjs(value) ? value : dayjs(value)
-  const pickerValue =
+  const pickerValue = dayjsValue && dayjsValue.isValid() ? dayjsValue : null
-    dayjsValue && dayjsValue.isValid() ? dayjsValue : null
 
   const switchToExprMode = (initialValue) => {
     setIsExprMode(true)
@@ -162,6 +160,7 @@ const TimeEdit = ({
       showTime
       style={{ width: '100%' }}
       value={pickerValue}
+      format={dateTimeFormat}
       onChange={onChange}
       onKeyDown={handleDatePickerKeyDown}
       disabled={disabled}