@@ -12,6 +12,9 @@ import dayjs from "dayjs";
1212import { useEffect , useRef , useState } from "react" ;
1313import styled from "styled-components" ;
1414import { TIME_FORMAT } from "util/dateTimeUtils" ;
15+ import { hasIcon } from "comps/utils" ;
16+ import { IconControl } from "comps/controls/iconControl" ;
17+
1518
1619const TimePickerStyled = styled ( TimePicker ) < { $open :boolean } > `
1720 width: 100%;
@@ -52,6 +55,8 @@ export function formatTime(time: string, format: string) {
5255
5356const childrenMap = {
5457text :StringControl ,
58+ prefixIcon :IconControl ,
59+ suffixIcon :IconControl ,
5560format :withDefault ( StringControl , TIME_FORMAT ) ,
5661inputFormat :withDefault ( StringControl , TIME_FORMAT ) ,
5762} ;
@@ -118,7 +123,18 @@ export const TimeComp = (function () {
118123( props , dispatch ) => {
119124inputFormat = props . inputFormat ;
120125const value = props . changeValue ?? getBaseValue ( props , dispatch ) ;
121- return formatTime ( value , props . format ) ;
126+ return (
127+ < >
128+ { hasIcon ( props . prefixIcon ) && (
129+ < span > { props . prefixIcon } </ span >
130+ ) }
131+ < span > { value } </ span >
132+ { hasIcon ( props . suffixIcon ) && (
133+ < span > { props . suffixIcon } </ span >
134+ ) }
135+ </ >
136+ ) ;
137+
122138} ,
123139( nodeValue ) => formatTime ( nodeValue . text . value , nodeValue . format . value ) ,
124140getBaseValue
@@ -137,6 +153,12 @@ export const TimeComp = (function () {
137153label :trans ( "table.columnValue" ) ,
138154tooltip :ColumnValueTooltip ,
139155} ) }
156+ { children . prefixIcon . propertyView ( {
157+ label :trans ( "button.prefixIcon" ) ,
158+ } ) }
159+ { children . suffixIcon . propertyView ( {
160+ label :trans ( "button.suffixIcon" ) ,
161+ } ) }
140162{ formatPropertyView ( { children, placeholder :TIME_FORMAT } ) }
141163</ >
142164) )