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 from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; function Demo() { return <TimePicker insetLabel="Time" />; }

import React from 'react'; import { TimePicker } from '@douyinfe/semi-ui'; class Demo extends React.Component { constructor() { super(); this.state = { value: null, }; this.onChange = this.onChange.bind(this); } onChange(time) { console.log(time); this.setState({ value: time }); } render() { return <TimePicker value={this.state.value} onChange={this.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={['AM 08:11', 'PM 11:21']} /> </div> ); }

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()); const triggerIcon = useMemo(() => { return time ? ( <IconClose onClick={e => { e && e.stopPropagation(); setTime(); }} /> ) : ( <IconChevronDown /> ); }, [time]); return ( <TimePicker value={time} format={formatToken} onChange={time => setTime(time)} triggerRender={({ placeholder }) => ( <Button theme={'light'} icon={triggerIcon} iconPosition={'right'}> {time ? dateFns.format(time, formatToken) : placeholder} </Button> )} /> ); }

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={'Please Choose TimeZone'} 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> ); }