import React from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; function Demo() { return <TimePicker />; }

import React from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; function Demo() { return <TimePicker scrollItemProps={{ mode: "wheel", cycled: true }}/>; }

import React, { useState } from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; () => { const [value, setValue] = useState(null); const onChange = (time) => { console.log(time); setValue(time); }; return <TimePicker value={value} onChange={onChange} />; };

import React from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; function Demo() { return <TimePicker format={'HH:mm'} defaultValue={'10:24'}/>; }

import React, { useState } from 'react'; import { TimePicker, Button } from '@douyinfe/semi-ui'; function Demo() { const [open, setOpen] = useState(false); const closePanel = () => setOpen(false); const onOpenChange = (open) => { setOpen(open); console.log(open); }; return ( <div> <TimePicker open={open} onOpenChange={onOpenChange} panelHeader={'Time Select'} panelFooter={<Button onClick={closePanel}>close</Button>} /> <br/><br/> <TimePicker type='timeRange' panelHeader={['start header', 'end header']} panelFooter={[ <Button key="1" onClick={() => {console.log('start footer');}}>start footer</Button>, <Button key="2" onClick={() => {console.log('end footer');}}>end footer</Button> ]} /> </div> ); }

import React from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; function Demo() { return <TimePicker defaultValue={'12:08:23'} disabled />; }

import React from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; function Demo() { return <TimePicker minuteStep={15} secondStep={10} />; }

import React from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; function Demo() { return ( <div> <TimePicker use12Hours /><br/><br/> <TimePicker use12Hours format="a h:mm" /> </div> ); }

import React from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; function Demo() { return ( <div> <TimePicker type="timeRange" defaultValue={["10:23:15", "12:38:32"]} /><br/><br/> <TimePicker type="timeRange" use12Hours format="a h:mm" defaultValue={["上午 08:11", "下午 11:21"]} /> </div> ); }

import React from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; function Demo() { return ( <TimePicker type="timeRange" disabledTime={(value, panelType) => { const start = Array.isArray(value) ? value[0] : value; if (panelType === 'right' && start instanceof Date) { const h = start.getHours(); const m = start.getMinutes(); return { disabledHours: () => Array.from({ length: h }, (_, i) => i), disabledMinutes: hour => (hour === h ? Array.from({ length: m }, (_, i) => i) : []), }; } return {}; }} /> ); }

import React, { useState, useMemo } from 'react'; import * as dateFns from 'date-fns'; import { TimePicker, Button } from '@douyinfe/semi-ui'; import { IconChevronDown, IconClose } from '@douyinfe/semi-icons'; function Demo() { const formatToken = 'HH:mm:ss'; const [time, setTime] = useState(new Date()); return ( <TimePicker value={time} format={formatToken} onChange={time => setTime(time)} triggerRender={({ placeholder }) => ( <Tag color='cyan' size='large' shape='circle' style={{ padding: 12, paddingRight: 16, fontSize: 14 }} theme={'light'} prefixIcon={<IconTimePicker />} > {time ? dateFns.format(time, formatToken) : placeholder} </Tag> )} /> ); }

import React, { useMemo, useState } from 'react'; import { ConfigProvider, Select, TimePicker } from '@douyinfe/semi-ui'; function Demo(props = {}) { const [timeZone, setTimeZone] = useState('GMT+08:00'); const defaultTimestamp = 1581599305265; const gmtList = useMemo(() => { const list = []; for (let hourOffset = -11; hourOffset <= 14 ; hourOffset++) { const prefix = hourOffset >= 0 ? '+' : '-'; const hOffset = Math.abs(parseInt(hourOffset, 10)); list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`); } return list; }, []); return ( <ConfigProvider timeZone={timeZone}> <div style={{ width: 300 }}> <h5 style={{ margin: 10 }}>Select Time Zone:</h5> <Select placeholder={'请选择时区'} style={{ width: 300 }} value={timeZone} showClear={true} onSelect={value => setTimeZone(value)} > {gmtList.map(gmt => ( <Select.Option key={gmt} value={gmt}> {gmt} </Select.Option> ))} </Select> <br/> <br/> <h5 style={{ margin: 10 }}>TimePicker:</h5> <TimePicker defaultValue={defaultTimestamp} onChange={(date, dateString) => console.log('DatePicker changed: ', date, dateString)} /> </div> </ConfigProvider> ); }