{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/timepicker","result":{"data":{"current":{"frontmatter":{"title":"TimePicker","order":50,"brief":"Users can easily select a compliant, formatted point of time using the time selector.","icon":"doc-timepicker"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#infinite-scroll","title":"Infinite Scroll"},{"url":"#controlled-component","title":"Controlled Component"},{"url":"#different-format","title":"Different Format"},{"url":"#set-panel-header-and-footer","title":"Set Panel Header and Footer"},{"url":"#disable-time-selection","title":"Disable Time Selection"},{"url":"#set-step-length","title":"Set Step Length"},{"url":"#12-hour-system","title":"12-hour System"},{"url":"#time-range","title":"Time Range"},{"url":"#custom-trigger","title":"Custom Trigger"}]},{"url":"#timezone-config","title":"TimeZone Config"},{"url":"#api-reference","title":"API Reference"},{"url":"#methods","title":"Methods"},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 50,\n \"category\": \"Input\",\n \"title\": \"TimePicker\",\n \"subTitle\": \"TimePicker\",\n \"icon\": \"doc-timepicker\",\n \"brief\": \"Users can easily select a compliant, formatted point of time using the time selector.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { TimePicker } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Click TimePicker, and then you can select or enter a time in the floating layer.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { TimePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Infinite Scroll\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Starting from version V2.22.0, we changed the default mode of ScrollItem in TimePicker from \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"wheel\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"normal\"), \". If you want to apply the effect of infinite scrolling back, please refer to the following example.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { TimePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Controlled Component\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"value\"), \" And not. \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultValue\"), \" When used as a controlled component.\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"value\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChange\"), \" It needs to be used in conjunction.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { TimePicker } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [value, setValue] = useState(null);\\n \\n const onChange = (time) => {\\n console.log(time);\\n setValue(time);\\n };\\n\\n return ;\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Different Format\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The columns in the TimePicker float will follow \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\"), \" Change, when omitted \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\"), \" At some point, the corresponding column in the floating layer will also disappear.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"NOTE: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\"), \" Follow the date-fns \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\"), \" Format. \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://date-fns.org/v2.0.0/docs/format\"\n }, \"https://date-fns.org/v2.0.0/docs/format\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { TimePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Set Panel Header and Footer\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { TimePicker, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const [open, setOpen] = useState(false);\\n const closePanel = () => setOpen(false);\\n const onOpenChange = open => {\\n setOpen(open);\\n console.log(open);\\n };\\n\\n return (\\n \\n close}\\n />\\n
\\n {console.log('start footer');}}>start footer, \\n \\n ]}\\n />\\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Disable Time Selection\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { TimePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Set Step Length\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Available \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Hour Step\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Minute Step\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Second Step\"), \" Show the optional minutes and seconds by step.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { TimePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"12-hour System\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"12-hour time selector, default \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\"), \" for \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"h:mm:ss a\"), \", an incoming \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\"), \" The format must be in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://date-fns.org/v2.0.0/docs/format\"\n }, \"dateFns date format\"), \"Within range.\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"For example, the default 12-hour format string is:\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"a h:mm:ss\"), \", if passed in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"A h:mm:ss\"), \" This will result in an inability to format correctly.\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { TimePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return (\\n \\n \\n
\\n
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Time Range\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Pass type = \\\"timeRange\\\" to enable time range selection.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { TimePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return (\\n \\n \\n
\\n
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Trigger\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"By default we use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Input\"), \" component as the trigger for the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"DatePicker\"), \" component. You can customize this trigger by passing the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"triggerRender\"), \" method.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true hideInDSM\",\n \"live\": \"true\",\n \"hideInDSM\": true\n }, \"import React, { useState, useMemo } from 'react';\\nimport * as dateFns from 'date-fns';\\nimport { TimePicker, Button } from '@douyinfe/semi-ui';\\nimport { IconChevronDown, IconClose } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n const formatToken = 'HH:mm:ss';\\n const [time, setTime] = useState(new Date());\\n\\n return (\\n setTime(time)}\\n triggerRender={({ placeholder }) => (\\n }\\n >\\n {time ? dateFns.format(time, formatToken) : placeholder}\\n \\n )}\\n />\\n );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"TimeZone Config\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Semi All configuration about time zone is converged in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/other/configprovider\"\n }, \"ConfigProvider\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true hideInDSM\",\n \"live\": \"true\",\n \"hideInDSM\": true\n }, \"import React, { useMemo, useState } from 'react';\\nimport { ConfigProvider, Select, TimePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo(props = {}) {\\n const [timeZone, setTimeZone] = useState('GMT+08:00');\\n const defaultTimestamp = 1581599305265;\\n const gmtList = useMemo(() => {\\n const list = [];\\n for (let hourOffset = -11; hourOffset <= 14; hourOffset++) {\\n const prefix = hourOffset >= 0 ? '+' : '-';\\n const hOffset = Math.abs(parseInt(hourOffset, 10));\\n list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`);\\n }\\n return list;\\n }, []);\\n\\n return (\\n \\n \\n
Select Time Zone:
\\n setTimeZone(value)}\\n >\\n {gmtList.map(gmt => (\\n \\n {gmt}\\n \\n ))}\\n \\n
\\n
\\n TimePicker:
\\n console.log('DatePicker changed: ', date, dateString)}\\n />\\n \\n \\n );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API Reference\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Parameters\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Version\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoAdjustOverflow\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether the floating layer automatically adjusts its direction when it is blocked\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoFocus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Automatic access to focus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"borderless\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"borderless mode >=2.33.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Outer style name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"clearIcon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Can be used to customize the clear button, valid when showClear is true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"2.25.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"clearText\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Clear button prompt copy\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Clear\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultOpen\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether the panel is open by default\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultValue\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default time\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Date\", \"|\", \"timeStamp\", \"|\", \"string (array when type = \\\"timeRange\\\")\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Disable all operations\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabledHours\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Prohibited selection of partial hour options\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => number []\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabledMinutes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Prohibited to select some minute options\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(selectedHour: number) => number[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabledSeconds\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Unable to select partial second option\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(selectedHour: number, selectedMinute: number) => number[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dropdownMargin\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Popup layer calculates the size of the safe area when the current direction overflows, used in scenes covered by fixed elements, more detail refer to \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://github.com/DouyinFE/semi-design/issues/549\"\n }, \"issue#549\"), \", same as Tooltip margin\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\", \"|\", \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"2.25.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"focusOnOpen\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to open the panel and focus the input box when mounting\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"format\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Time format of presentation\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"HH: mm: ss.\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"getPopupContainer\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Specifies the container and the floating layer will be rendered into the element, you need to set 'position: relative` This will change the DOM tree position, but not the view's rendering position.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => HTMLElement\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => document.body\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"hideDisabledOptions\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Hide the option of forbidden selection\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"hourStep\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Hour option interval\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"1\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"inputReadOnly\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set the input box to read-only (avoid opening a virtual keyboard on a mobile device)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"minuteStep\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Minute option interval\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"1\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"motion\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to display the pop-up layer animation\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"open\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Controlled property of whether the panel is open\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"panelFooter\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Addon at the bottom of the panel\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\", \"|\", \"ReactNode[]\", \"|\", \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"panelHeader\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Panel head addon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\", \"|\", \"ReactNode[]\", \"|\", \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"placeholder\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"What's displayed when it's not worth it.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"Select time\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"popupClassName\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Pop-up class name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"''\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"popupStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Pop-up layer style object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"position\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Floating position\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type=\\\"timeRange\\\" => \\\"bottom\\\"\", mdx(\"br\", null), \"type=\\\"time\\\" => \\\"bottomLeft\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"prefix\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Prefix content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\", \"|\", \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"preventScroll\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"rangeSeparator\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"time range delimiter\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"~\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"scrollItemProps\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The props passed through to ScrollItem. The optional values are the same as \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/scrolllist#ScrollItem\"\n }, \"ScrollList#API\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"secondStep\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Second option interval\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"1\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showClear\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to show the clear button\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"stopPropagation\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to prevent click events on the popup layer from bubbling\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"2.49.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"size\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Size of input box, one of 'default', 'small' and 'large'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'default'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"triggerRender\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom trigger rendering method\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"({ placeholder: string }) => ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"time\\\"\", \"|\", \"\\\"timeRange\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"time\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"use12Hours\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Using a 12-hour system, \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"format\"), \" default to \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"h: mm: ssa\"), \" when true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Current time\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Date\", \"|\", \"timeStamp\", \"|\", \"string (array when type = \\\"timeRange\\\")\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onBlur\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback when focus is lost\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: domEvent) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => {}\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"A callback in time.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(time: Date\", \"|\", \"Date[], timeString: string\", \"|\", \"string[]) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onChangeWithDateFirst\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set the order of parameter in \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"onChange\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"true\"), \": (Date, string); \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"false\"), \": (string, Date)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"2.4.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onFocus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback when focus is obtained\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: domEvent) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => {}\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onOpenChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"A callback when the panel is on / off\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(isOpen: boolean) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Methods\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Some internal methods provided by TimePicker can be accessed through ref:\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Name\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"blur()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Remove focus\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"focus()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Get the focus\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Content Guidelines\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The time selector includes at least hours and minutes, such as: 11:30, which can be adapted to 12-hour or 24-hour format during localization\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When 12-hour clock is selected, it needs to be used together with AM/PM\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/timepicker","next":{"fields":{"slug":"zh-CN/input/timepicker"},"id":"cd102988-8a3b-54f1-87f4-12f45d55ecf5","frontmatter":{"title":"TimePicker 时间选择器","localeCode":"zh-CN","icon":"doc-timepicker","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/taginput"},"id":"3f4ebfa9-3152-54dc-be74-b5cd7ce075ab","frontmatter":{"title":"TagInput 标签输入框","localeCode":"zh-CN","icon":"doc-tagInput","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}