{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/datepicker","result":{"data":{"current":{"frontmatter":{"title":"DatePicker","order":39,"brief":"The date selector is used to help the user select a compliant, formatted date (time) or date (time) range.","icon":"doc-datepicker"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-use","title":"Basic Use"},{"url":"#picker-density","title":"Picker Density"},{"url":"#multiple-date-selection","title":"Multiple Date Selection"},{"url":"#date-and-time-selection","title":"Date and Time Selection"},{"url":"#date-range-selection","title":"Date Range Selection"},{"url":"#date-time-range-selection","title":"Date Time Range Selection"},{"url":"#input-in-panel","title":"Input in Panel"},{"url":"#synchronously-switch-months","title":"Synchronously switch months"},{"url":"#panel-change-callback","title":"Panel Change Callback"},{"url":"#select-week","title":"Select Week"},{"url":"#selection","title":"Selection"},{"url":"#year-and-month-range-selection","title":"Year and Month Range Selection"},{"url":"#confirm-date-and-time-selection","title":"Confirm Date and Time Selection"},{"url":"#date-and-time-selection-with-shortcuts","title":"Date and Time Selection with Shortcuts"},{"url":"#render-topslotbottomslot","title":"Render TopSlot/BottomSlot"},{"url":"#disable-date-selection","title":"Disable Date Selection"},{"url":"#disable-partial-date-or-time","title":"Disable Partial Date or Time"},{"url":"#custom-display-format","title":"Custom Display Format"},{"url":"#custom-trigger","title":"Custom Trigger"},{"url":"#custom-render-date-content","title":"Custom Render Date Content"},{"url":"#custom-render-date-box","title":"Custom Render Date Box"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#methods","title":"Methods"},{"url":"#interface-define","title":"Interface Define"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#date-and-time-format","title":"Date and Time Format"},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#faq","title":"FAQ"}]},"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\": 39,\n \"category\": \"Input\",\n \"title\": \"DatePicker\",\n \"subTitle\": \"Date Selector\",\n \"icon\": \"doc-datepicker\",\n \"brief\": \"The date selector is used to help the user select a compliant, formatted date (time) or date (time) range.\"\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 Notice = makeShortcode(\"Notice\");\nvar ApiType = makeShortcode(\"ApiType\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar Image = makeShortcode(\"Image\");\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 { DatePicker } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Use\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return console.log(dateString)} style={{ width: 240 }} />;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Picker Density\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The density can be used to control the size of the picker panel. The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"compact\"), \" is the small size and the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"default\"), \" is the default size. Support after v1.17.0.\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return (\\n
\\n

\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Multiple Date Selection\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Multiple\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"true\"), \", can choose multiple dates.\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Date and Time Selection\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dateTime\"), \", can choose date and time.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Starting from version V2.22.0, we changed the default mode of ScrollItem in TimePicker from wheel to normal. If you want to apply the infinite scrolling effect again, you can enable it by passing in a specific configuration through timePickerOpts.\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return (\\n <>\\n

Default date and time selection

\\n \\n
\\n
\\n

Turn on cycled mode

\\n \\n \\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Date Range Selection\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dateRange\"), \", can choose the date range.\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return ;\\n}\\n\")), mdx(Notice, {\n type: \"primary\",\n title: \"Note\",\n mdxType: \"Notice\"\n }, mdx(\"div\", null, \"When you use range selection, if only one date is selected, onChange will not be triggered at this time. Only when both the start date and the end date are selected will onChange be triggered.\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Date Time Range Selection\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dateTimeRange\"), \", can choose the date range and choose time;\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Input in Panel\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"insetInput\"), \" to control whether the date panel is inset with the input box, the default is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"false\"), \". Supported since \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"v2.7.0\"), \". Inset input boxes are suitable for the following scenarios:\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Date and time selection, you can directly input the time through the embedded input box, no need to select the time through the scroll wheel\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"triggerRender\"), \"+ range selection, use the inset input box to modify the start and end dates independently\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"After \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"insetInput\"), \" is turned on, it includes the following functions:\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"After clicking the trigger, the panel will pop up in the original position by default. You can customize the popup position by \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"position\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Click the embedded date input box, the panel switches to date selection; click the embedded time input box, the panel switches to time selection\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Consistent with the external input box, if an illegal date is entered, the date will return to the previous legal date after the panel is closed\")), mdx(Notice, {\n type: \"primary\",\n title: \"Notes\",\n mdxType: \"Notice\"\n }, mdx(\"div\", null, \"Note that some adjustments and restrictions will be made to the components after opening insetInput:\"), mdx(\"div\", null, \"1. Trigger style: the trigger is read-only when the panel is not open, and the trigger is disabled when it is open\"), mdx(\"div\", null, \"2. Panel style: when type includes time, hide the toggle button at the bottom\"), mdx(\"div\", null, \"3. After insetInput is enabled, the `format` API only supports the `dateFormat[ timeFormat]` format. Using other formats will affect the display of the inset input box placeholder and trigger text\")), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n return (\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Synchronously switch months\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"version\\uFF1A>= 1.28.0\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"In the scenario of range selection, turning on \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"syncSwitchMonth\"), \" means to switch the two panels simultaneously. The default is false.\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Note: Clicking the year button will also switch the two panels synchronously. Switching the year and month from the scroll wheel will not switch the panels synchronously. This ensures the user's ability to select months at non-fixed intervals.\")), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return (\\n \\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Panel Change Callback\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"version\\uFF1A>=1.28.0\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onPanelChange\"), \" will be called when the month or year of the panel is changed.\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return (\\n console.log(date, dateString)}\\n />\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Select Week\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"daterange\"), \" is used with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"startDateOffset\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"endDateOffset\"), \" to select range with single click, such as weekly selection and biweekly selection. Support after v1.10.0.\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const handleChange = date => {\\n console.log('date changed', date);\\n };\\n\\n return (\\n
\\n

Choose a week

\\n dateFns.startOfWeek(date, { weekStartsOn: 1 })}\\n endDateOffset={date => dateFns.endOfWeek(date, { weekStartsOn: 1 })}\\n onChange={handleChange}\\n />\\n
\\n
\\n

Choose two weeks

\\n dateFns.startOfWeek(date, { weekStartsOn: 1 })}\\n endDateOffset={date => dateFns.add(dateFns.endOfWeek(date, { weekStartsOn: 1 }), { days: 7 })}\\n onChange={handleChange}\\n />\\n
\\n
\\n

Select the current day and the next 6 days

\\n dateFns.add(date, { days: 6 })}\\n onChange={handleChange}\\n />\\n
\\n
\\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Selection\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Version:\"), \" > = 0.21.0\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"month\"), \", can make year-to-month 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Year and Month Range Selection\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"version\\uFF1A\"), \" >= 2.32.0\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monthRange\"), \" to select the year and month range, small size and quick panel are not supported yet.\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\n() => ;\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Confirm Date and Time Selection\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Version: > = 0.18.0\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"For the selection of \\\"datetime\\\" (type = \\\"dateTime\\\") or \\\"datetime range\\\" (type = \\\"dateTimeRange\\\"), you can confirm it before writing the value into the input box. You can pass \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"NeedConfirm\"), \" = true to enable this behavior.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"At the same time, the click callbacks of the \\\"onConfirm\\\" and \\\"onCancel\\\" buttons are supported.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The following example binds three callbacks: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChange\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onConfirm\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onCancel\"), \", and you can open the console to see the difference in print information.\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Note: When opening \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"needConfirm\"), \", you need to click the cancel button to close the panel, and clicking the blank area will no longer close the panel (v2.2.0)\")), 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return (\\n {\\n console.log('Confirmed: ', ...args);\\n }}\\n onCancel={(...args) => {\\n console.log('Canceled: ', ...args);\\n }}\\n onChange={(...args) => {\\n console.log('Changed: ', ...args);\\n }}\\n />\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Date and Time Selection with Shortcuts\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Pass parameter \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Presets\"), \" to set shortcuts for date 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, { useMemo } from 'react';\\nimport { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n const presets = useMemo(() => ([\\n {\\n text: 'Today',\\n start: new Date(),\\n end: new Date(),\\n },\\n () => ({\\n text: 'Tomorrow',\\n start: new Date(new Date().valueOf() + 1000 * 3600 * 24),\\n end: new Date(new Date().valueOf() + 1000 * 3600 * 24),\\n }),\\n ]), []);\\n\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Render TopSlot/BottomSlot\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"With \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"topSlot\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bottomSlot\"), \", you can customize the rendering of the top and bottom extra areas.\"), 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, useMemo } from 'react';\\nimport { DatePicker, Typography, Tabs, TabPane, Space } from '@douyinfe/semi-ui';\\nimport { IconBulb } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n const { Text } = Typography;\\n\\n const [activeTab, setActiveTab] = useState('1');\\n const [date, setDate] = useState();\\n const uedDisabledDate = currentDate => currentDate && currentDate.getDate() > 10 && currentDate.getDate() < 15;\\n const testDisabledDate = currentDate => currentDate && currentDate.getDate() > 15 && currentDate.getDate() < 25;\\n\\n const handleTabChange = tab => {\\n setActiveTab(tab);\\n setDate();\\n };\\n\\n const handleDateChange = value => {\\n setDate(value);\\n };\\n\\n const disabledDate = useMemo(() => (activeTab === '1' ? uedDisabledDate : testDisabledDate), [activeTab]);\\n\\n const TopSlot = function (props) {\\n const { style } = props;\\n return (\\n \\n \\n \\n \\n );\\n };\\n\\n const BottomSlot = function (props) {\\n const { style } = props;\\n return (\\n \\n \\n \\n Please read before finalizing\\n \\n Release notice\\n \\n );\\n };\\n\\n const MonthBottomSlot = function (props) {\\n const { style } = props;\\n return (\\n \\n \\n \\n please read\\n \\n Notice\\n \\n );\\n };\\n\\n return (\\n
\\n }\\n disabledDate={disabledDate}\\n value={date}\\n onChange={handleDateChange}\\n dropdownClassName=\\\"components-datepicker-demo-slot\\\"\\n placeholder=\\\"Please select a schedule\\\"\\n />\\n

\\n }\\n placeholder=\\\"Please select release time\\\"\\n />\\n

\\n }\\n placeholder=\\\"Please select month\\\"\\n />\\n

\\n } \\n bottomSlot={} \\n density=\\\"compact\\\"\\n dropdownClassName=\\\"components-datepicker-demo-slot\\\"\\n />\\n

\\n }\\n style={{ width: 400 }}\\n placeholder=\\\"Please select a time range\\\"\\n />\\n
\\n );\\n}\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \".components-datepicker-demo-slot {\\n \\n .semi-tabs-content {\\n padding: 0;\\n }\\n \\n .semi-tabs-bar-line.semi-tabs-bar-top {\\n border-bottom: none;\\n }\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Disable Date 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Disable Partial Date or Time\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Pass in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"disabledDate\"), \" to disable the specified date, pass in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"disabledTime\"), \" to disable the specified time, and with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultPickerValue\"), \" you can specify the year and month when the panel is opened.\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"disabledDate\"), \" and\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"disabledTime\"), \", the accepted input parameters are the current date, the former returns a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"boolean\"), \" value, the latter returns an \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/input/timepicker#API_Reference\"\n }, \"object\"), \" It will be directly passed to the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"TimePicker\"), \" component.\"), mdx(Notice, {\n type: \"primary\",\n title: \"Note\",\n mdxType: \"Notice\"\n }, mdx(\"div\", null, \"When you use timeZone, the Date of the first parameter is the time under the time zone you choose (similar to the first return value of onChange)\")), 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, { useCallback } from 'react';\\nimport { DatePicker } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\nimport { range } from 'lodash-es';\\n\\nfunction App() {\\n const today = useCallback(() => new Date(), []);\\n\\n const nextValidMonth = useCallback(() => {\\n const nextValidDate = today();\\n nextValidDate.setMonth((nextValidDate.getMonth() + 1) % 12);\\n return nextValidDate;\\n }, [today]);\\n\\n const disabledTime = useCallback((date) => (\\n dateFns.isToday(date)\\n ? {\\n disabledHours: () => [17, 18],\\n disabledMinutes: hour => (19 === hour ? range(0, 10, 1) : []),\\n disabledSeconds: (hour, minute) => (hour === 20 && minute === 20 ? range(0, 20, 1) : []),\\n }\\n : null\\n ), []);\\n\\n const disabledTime2 = useCallback((date, panelType) => {\\n if (panelType === 'left') {\\n return { disabledHours: () => [17, 18] };\\n }\\n return { disabledHours: () => [12, 13, 14, 15, 16, 17, 18] };\\n }, []);\\n\\n const disabledDate = useCallback((date) => {\\n const deadDate = today();\\n const month = deadDate.getMonth();\\n deadDate.setDate(28);\\n deadDate.setMonth((month + 1) % 12);\\n return date.getTime() < deadDate.getTime();\\n }, [today]);\\n\\n return (\\n
\\n
\\n

Disabled 17:00:00-18:00:00 today

\\n \\n
\\n
\\n

Two panels disable different times

\\n \\n
\\n
\\n

Disable time before the 28th of next month

\\n \\n
\\n
\\n );\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"When \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" contains \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"range\"), \", the date can be disabled dynamically according to the rangeStart. The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options\"), \" parameter is supported after 1.9.0\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nfunction App() {\\n return (\\n
\\n

Prohibit selection of previous dates

\\n {\\n const { rangeStart } = options;\\n const startDate = dateFns.parseISO(rangeStart);\\n return dateFns.isBefore(date, startDate);\\n }}\\n style={{ width: 260 }}\\n />\\n
\\n );\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"When \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" contains \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"range\"), \", dates can be disabled based on the focus state. The focus state is passed through the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rangeInputFocus\"), \" parameter in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options\"), \".\"), 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 { DatePicker } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nfunction App() {\\n const today = new Date();\\n const disabledDate = (date, options) => {\\n const { rangeInputFocus } = options;\\n const baseDate = dateFns.set(today, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 });\\n if (rangeInputFocus === 'rangeStart') {\\n const disabledStart = dateFns.subDays(baseDate, 2);\\n const disabledEnd = dateFns.addDays(baseDate, 2);\\n return disabledStart <= date && date <= disabledEnd;\\n } else if (rangeInputFocus === 'rangeEnd') {\\n const disabledStart = dateFns.subDays(baseDate, 3);\\n const disabledEnd = dateFns.addDays(baseDate, 3);\\n return disabledStart <= date && date <= disabledEnd;\\n } else {\\n return false;\\n }\\n };\\n\\n return (\\n
\\n

{`Start date disables 2 days before and 2 days after today, end date disables 3 days before and 3 days after today`}

\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Display Format\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Pass parameter \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\"), \" to custom display 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 { DatePicker } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Trigger\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Version:\"), \" >=0.34.0\"), 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(\"p\", {\n parentName: \"section\"\n }, \"The custom trigger is a complete customization of the trigger, the default clear button will not take effect, if you need clear function, please customize a clear button.\"), 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, useCallback, useMemo } from 'react';\\nimport * as dateFns from 'date-fns';\\nimport { DatePicker, Button } from '@douyinfe/semi-ui';\\nimport { IconClose, IconChevronDown } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n const [date, setDate] = useState(new Date());\\n const formatToken = 'yyyy-MM-dd';\\n const onChange = useCallback(date => {\\n setDate(date);\\n }, []);\\n const onClear = useCallback(e => {\\n e && e.stopPropagation();\\n setDate(null);\\n }, []);\\n\\n const closeIcon = useMemo(() => {\\n return date ? : ;\\n }, [date]);\\n\\n return (\\n (\\n \\n )}\\n />\\n );\\n}\\n\")), mdx(Notice, {\n type: \"primary\",\n title: \"Note\",\n mdxType: \"Notice\"\n }, mdx(\"div\", null, \"When DatePicker is range type, the default date selected after the panel is opened is the start date, and it will switch to the end date selection after selection. The focus is reset when the panel is closed.\"), mdx(\"div\", null, \"We recommend providing a clear button, when you pass null value to DatePicker, DatePicker will also reset focus internally. This allows the user to reselect the date range after clearing. (from v2.15)\")), 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, useCallback, useMemo } from 'react';\\nimport { DatePicker, Button, Icon } from '@douyinfe/semi-ui';\\nimport { IconClose, IconChevronDown } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n const [date, setDate] = useState();\\n const formatToken = 'yyyy-MM-dd HH:mm:ss';\\n const onChange = useCallback(date => {\\n setDate(date);\\n console.log(date);\\n }, []);\\n const onClear = useCallback(e => {\\n e && e.stopPropagation();\\n setDate();\\n }, []);\\n\\n const closeIcon = useMemo(() => {\\n return date ? : ;\\n }, [date]);\\n\\n const triggerContent = (placeholder) => {\\n if (Array.isArray(date) && date.length) {\\n return `${dateFns.format(date[0], formatToken)} ~ ${dateFns.format(date[1], formatToken)}`;\\n } else {\\n return 'Please select a date range';\\n }\\n };\\n\\n return (\\n (\\n \\n )}\\n />\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Render Date Content\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Version\\uFF1A\"), \">=1.4.0\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderDate: (dayNumber: number, fullDate: string) => ReactNode\")), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"dayNumber\"), \": such as \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"13\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fullDate\"), \": such as \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"2020-08-13\"), \".\")), 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 { DatePicker, Tooltip } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const dateStyle = {\\n width: '100%',\\n height: '100%',\\n border: '1px solid var(--semi-color-primary)',\\n display: 'flex',\\n justifyContent: 'center',\\n alignItems: 'center',\\n };\\n const renderDate = (dayNumber, fullDate) => {\\n if (dayNumber === 1) {\\n return (\\n \\n
\\n {dayNumber}\\n
\\n \\n );\\n }\\n return dayNumber;\\n };\\n return ;\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Render Date Box\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Version\\uFF1A\"), \">=1.4.0\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderFullDate: (dayNumber: number, fullDate: string, dayStatus: object) => ReactNode\")), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dayStatus\"), \" is this status of current date box. The included keys are as follows.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-md\"\n }, \"type DayStatusType = {\\n isToday?: boolean,\\n isSelected?: boolean,\\n isDisabled?: boolean,\\n isSelectedStart?: boolean,\\n isSelectedEnd?: boolean,\\n isInRange?: boolean,\\n isHover?: boolean,\\n isOffsetRangeStart?: boolean,\\n isOffsetRangeEnd?: boolean,\\n isHoverInOffsetRange?: boolean,\\n}\\n\")), 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 { DatePicker } from '@douyinfe/semi-ui';\\nimport classNames from 'classnames';\\n\\nfunction Demo() {\\n const renderFullDate = (dayNumber, fullDate, dayStatus) => {\\n const { isInRange, isHover, isSelected, isSelectedStart, isSelectedEnd } = dayStatus;\\n const prefix = 'components-datepicker-demo';\\n\\n const dateCls = classNames({\\n [`${prefix}-day-inrange`]: isInRange,\\n [`${prefix}-day-hover`]: isHover,\\n [`${prefix}-day-selected`]: isSelected,\\n [`${prefix}-day-selected-start`]: isSelectedStart,\\n [`${prefix}-day-selected-end`]: isSelectedEnd,\\n });\\n\\n const dayStyle = {\\n display: 'flex',\\n alignItems: 'center',\\n justifyContent: 'center',\\n width: '80%',\\n height: '80%',\\n borderRadius: '50%',\\n };\\n\\n return (\\n
\\n {dayNumber}\\n
\\n );\\n };\\n\\n return ;\\n}\\n\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \".components-datepicker-demo-day-inrange,\\n.components-datepicker-demo-day-hover {\\n background: var(--semi-color-primary-light-hover);\\n}\\n\\n.components-datepicker-demo-day-selected,\\n.components-datepicker-demo-day-selected-start,\\n.components-datepicker-demo-day-selected-end {\\n color: var(--semi-color-bg-2);\\n background: var(--semi-color-primary);\\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 }, \"Properties\"), 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(\"strong\", {\n parentName: \"td\"\n }, \"0.34.0\"))), 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(\"strong\", {\n parentName: \"td\"\n }, \"1.10.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoSwitchDate\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When the year and month are changed through the left and right buttons and the drop-down menu at the top of the panel, the date is automatically switched. Only valid for \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"date\"), \" type.\"), 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 }, \"1.13.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bottomSlot\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Render the bottom extra area\"), 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 }, \"1.22.0\"))), 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 }, \"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 }, \"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 }, \"defaultOpen\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Panel displays or hides by default\"), 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 }, \"defaultPickerValue\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default panel date\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ValueType\"), 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 value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ValueType\"), 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 }, \"density\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Density of picker panel, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"compact\")), 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(\"strong\", {\n parentName: \"td\"\n }, \"1.17.0\"))), 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 }, \"Is it disabled?\"), 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 }, \"disabledDate\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The date is prohibited from the judgment method, and the date is prohibited when returned to true. Options parameter supported after 1.9.0, rangeEnd supported after 1.29 and rangeInputFocus is supported since 2.22\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(ApiType, {\n detail: \"(date: Date, options: { rangeStart: string, rangeEnd: string, rangeInputFocus: \\\"rangeStart\\\" \\\\| \\\"rangeEnd\\\" \\\\| false }) => boolean\",\n mdxType: \"ApiType\"\n }, \"(date, options) => 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 }, \"disabledTime\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Time prohibition configuration, the return value will be transparently passed to \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/input/timepicker#API_Reference\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"TimePicker\")), \" as a parameter\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(ApiType, {\n detail: \"(date: Date \\\\| Date[], panelType?: string) => ({ disabledHours:() => number[], disabledMinutes: (hour: number) => number[], disabledSeconds: (hour: number, minute: number) => number[] })\",\n mdxType: \"ApiType\"\n }, \"(date, panelType) => object\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"0.36.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabledTimePicker\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Disable time selection or not.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"0.32.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dropdownClassName\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSS classname for drop-down menu\"), 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(\"strong\", {\n parentName: \"td\"\n }, \"1.13.0\"))), 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 }, \"dropdownStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Inline style of drop-down menu\"), 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(\"strong\", {\n parentName: \"td\"\n }, \"1.13.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"endDateOffset\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When type is dateRange, set the end date of the selected range\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(selectedDate?: Date) => Date;\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"1.10.0\"))), 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 }, \"Date string format displayed in the input box\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Corresponding to type: For details, see \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"#Date%20and%20Time%20Format\"\n }, \"Date and Time Format\")), 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 parent DOM, and the bullet layer will be rendered to the DOM, 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 }, \"function():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 }, \"inputReadOnly\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Is the text box readonly\"), 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 }, \"insetInput\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether the input box is embedded in the panel. InsetInputProps type supported after v2.29\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean \", \"|\", \" \", mdx(ApiType, {\n detail: \"{ placeholder?: { dateStart?: string; dateEnd?: string; timeStart?: string; timeEnd?: string } }\",\n mdxType: \"ApiType\"\n }, \"InsetInputProps\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"2.7.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"inputStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Input box style\"), 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 }, \"max\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When multiple is set to true, the number of selected, non-pass or value is null\", \"|\", \"undefined, unlimited.\"), 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 }, \"multiple\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether you can choose multiple, only type = \\\"date\\\" is supported\"), 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 }, \"needConfirm\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Do you need to \\\"confirm selection\\\", only \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"type= \\\"dateTime\\\"\\\\| \\\"dateTimeRange\\\"\"), \" works.\"), 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(\"strong\", {\n parentName: \"td\"\n }, \"0.18.0\"))), 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 properties displayed or hidden by panels\"), 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 }, \"placeholder\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Input box prompts text\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\", \"|\", \"string[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'Select date'\"), 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 layer position, optional value with \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/show/popover#API%20Reference\"\n }, \"Popover #API Reference \\xB7 position\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'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 }, \"presets\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Date Time Shortcut, start and end support function type after v2.52\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(ApiType, {\n detail: \"type PresetType = { start?: BaseValueType \\\\| (() => BaseValueType); end?: BaseValueType \\\\| (() => BaseValueType); text?: string }; type PresetsType = Array PresetType)>;\",\n mdxType: \"ApiType\"\n }, \"Array\")), 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 }, \"presetPosition\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Date time shortcut panel position, optional 'left', 'right', 'top', 'bottom'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'bottom'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"2.18.0\")), 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 }, \"Custom range type picker separator of input trigger\"), 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(\"strong\", {\n parentName: \"td\"\n }, \"1.31.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderDate\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom date display content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(dayNumber, fullDate) => 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 }, \"1.4.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderFullDate\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom display date box\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(dayNumber, fullDate, dayStatus) => 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 }, \"1.4.0\"))), 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 }, \"Do you 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(\"strong\", {\n parentName: \"td\"\n }, \"0.35.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, optional: \\\"small,\\\" \\\"default,\\\" \\\"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 }, \"spacing\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The distance between the pop-up layer and the children element\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"1.9.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"startDateOffset\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When type is dateRange, set the start date of the selected range\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(selectedDate?: Date) => Date;\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"1.10.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"startYear\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"start year of the year scroll panel\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"100 years before current year\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"2.36.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"endYear\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"end year of the year scroll panel\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"100 years after current year\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"2.36.0\"))), 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(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"syncSwitchMonth\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"In the scene of range, it supports synchronous switching of the month of the dual panel\"), 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(\"strong\", {\n parentName: \"td\"\n }, \"1.28.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"timePickerOpts\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"For other parameters that can be transparently passed to the time selector, see \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/input/timepicker#API%20Reference\"\n }, \"TimePicker\\xB7API Reference\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"1.1.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"topSlot\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Render the top extra area\"), 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 }, \"1.22.0\"))), 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 }, \"(TriggerRenderProps) => 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 }, \"0.34.0\"))), 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, optional value: \\\"date\\\", \\\"dateRange\\\", \\\"dateTime\\\", \\\"dateTimeRange\\\", \\\"month\\\", \\\"monthRange\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'date'\"), 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 }, \"Controlled value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ValueType\"), 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 }, \"weekStartsOn\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Take the day of the week as the first day of the week, 0 for Sunday, 1 for Monday, and so on.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"0\"), 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. It is not recommended to use this API in range selection\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => {}\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"1.0.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onCancel\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Cancel the callback when selected, enter the reference as the value of the last confirmed selection, only \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"type\"), \" equals \\\"dateTime\\\"or \\\"dateTimeRange\\\" and \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"needConfirm\"), \" equals true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(ApiType, {\n detail: \"(date: DateType, dateStr: StringType) => void\",\n mdxType: \"ApiType\"\n }, \"(date, dateString) => void\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"0.18.0\"))), 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 when the value changes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(ApiType, {\n detail: \"(date: DateType, dateString: StringType) => void\",\n mdxType: \"ApiType\"\n }, \"(date, dateString) => 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 }, \"onClear\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"A callback when click the clear button\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => {}\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"1.16.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onClickOutSide\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When the pop-up layer is in a display state, click the non-popup layer and trigger callback, event parameter is supported since 2.68.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(event: React.mouseEvent) => void\"), 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.31.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onConfirm\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Confirm the callback at the time of selection, enter the reference as the value of the current selection, only \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"type\"), \" equals \\\"dateTime\\\" or \\\"dateTimeRange\\\" and \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"needConfirm\"), \" equals true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(ApiType, {\n detail: \"(date: DateType, dateStr: StringType) => void\",\n mdxType: \"ApiType\"\n }, \"(date, dateString) => void\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"0.18.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. It is not recommended to use this API in range selection\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(event) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => {}\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"1.0.0\"))), 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 }, \"Callback when popup open or close\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(isOpen) => 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 }, \"onPanelChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback when the year or date of the panel is switched\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(ApiType, {\n detail: \"(date: DateType \\\\| DateType[], dateStr: StringType \\\\| StringType[])=>void\",\n mdxType: \"ApiType\"\n }, \"(date, dateStr) => void\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"1.28.0\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onPresetClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback when click preset button\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(ApiType, {\n detail: \"(item: Object, e: Event) => void\",\n mdxType: \"ApiType\"\n }, \"(item, e) => void\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"1.24.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"yearAndMonthOpts\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Other parameters that can be transparently passed to the year-month selector, see details in \", 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 }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"strong\", {\n parentName: \"td\"\n }, \"2.22.0\")))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Methods\"), 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 }, \"Methods\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"), 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 }, \"open\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The dropdown can be manually opened when calling\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.31.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"close\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The dropdown can be manually closed when calling\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.31.0\")), 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 }, \"The input box can be manually focused when called\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.31.0\")), 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 }, \"The input box can be manually blurred when called\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.31.0\")))), 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, { useRef } from 'react';\\nimport { DatePicker, Space, Button } from '@douyinfe/semi-ui';\\nimport { BaseDatePicker } from '@douyinfe/semi-ui/lib/es/datePicker';\\n\\nfunction Demo() {\\n const ref = useRef();\\n // Typescript\\n // const ref = useRef();\\n // Why not import the DatePicker exported by the entry? \\n // The entry component is a forwardRef component, and the ref is transparently passed to this component\\n\\n const handleClickOutside = () => {\\n console.log('click outside');\\n };\\n\\n return (\\n \\n \\n \\n \\n \\n \\n \\n
\\n \\n
\\n \\n );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Interface Define\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type BaseValueType = string | number | Date;\\ntype ValueType = BaseValueType | BaseValueType[];\\ntype DateType = Date | Date[];\\ntype StringType = string | string[];\\ntype TriggerRenderProps = {\\n value?: ValueType;\\n inputValue?: string;\\n placeholder?: string | string[];\\n autoFocus?: boolean;\\n size?: InputSize;\\n disabled?: boolean;\\n inputReadOnly?: boolean;\\n componentProps?: DatePickerProps;\\n [x: string]: any;\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Accessibility\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"ARIA\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"When a date is not selected, the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\"), \" of the trigger is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Choose date\"), \", and when a date is selected, the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\"), \" of the trigger is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Change date\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The role of the month in the date panel is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"grid\"), \", the role of the week is set to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"row\"), \", and the date cell is set to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"gridcell\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-disabled\"), \" is true for the corresponding option when date and time are disabled\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When multi-selected, \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-multiselectable\"), \" of month is true, and \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-selected\"), \" of date grid is true when selected\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Some decorative icons in the panel, their \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-hidden\"), \" is true\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Date and Time Format\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Adopted in the semi-ui component library \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://date-fns.org/v2.9.0/docs/Getting-Started\"\n }, \"date-fns(v2.9.0)\"), \" As a date and time engine, formatting token means the following:\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"y\\\"\"), \": Year\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"M\\\"\"), \": month\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"d\\\"\"), \": day\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"H\\\"\"), \": hours\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"h\\\"\"), \": hours (12h)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"m\\\"\"), \": minutes\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"s\\\"\"), \": seconds\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"The following uses \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"new Date('2023-12-09 08:08:00')\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"[new Date('2023-12-09 08:08:00'), new Date('2023-12-10 10 :08:00')]\"), \" as \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"value\"), \" to explain the impact of different types and different \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\"), \" values on the displayed value:\"), 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 }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"format\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"display value\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"date\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"yyyy-MM-dd\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2023-12-09\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dateTime\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"yyyy-MM-dd HH:mm:ss\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2023-12-09 08:08:00\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"month\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"yyyy-MM\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2023-12\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dateRange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"yyyy-MM-dd\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2023-12-09 ~ 2023-12-10\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dateTimeRange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"yyyy-MM-dd HH:mm:ss\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2023-12-09 08:08 ~ 2023-12-10 10:08\")))), mdx(\"p\", {\n parentName: \"section\"\n }, \"Multiple dates or times are used by default \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\\",\\\"\"), \" (English comma) separated.\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"More token available \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://date-fns.org/v2.9.0/docs/Unicode-Tokens\"\n }, \"Date-fns official website\")))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Content Guidelines\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Date picker is recommended to be used with tags\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use concise labels to indicate what the date selection refers to\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Please refer to \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/start/content-guidelines#8.%20%E6%97%A5%E6%9C%9F%E4%B8%8E%E6%97%B6%E9%97%B4\"\n }, \"Date and Time\")))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"FAQ\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Date time picker, when you choose time, minute and second, you don't want to scroll infinitely. How to achieve the effect?\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Starting from version V2.22.0, we changed the default mode of ScrollItem in TimePicker from wheel to normal. If you want to apply the infinite scrolling effect again, you can control this behavior through a specific switch in timePickerOpts, that is, timePickerOpts={{ scrollItemProps: { mode: \\\"wheel\\\", cycled: true } }}.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"How to set the default display time when the panel is opened?\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"You can use the defaultPickerValue property.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Date time selection, range date selection, after inputting some dates, the panel does not echo the date?\")), mdx(\"p\", {\n parentName: \"li\"\n }, \" The input box needs to be entered completely before it is showed to the panel. For example, for \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dateTime\"), \" type, the full requested date and time have been entered. For \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dateRange\"), \" type, full requires start and end dates to be entered.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"What is the displayed time at the bottom of the date time selection panel?\")), mdx(\"p\", {\n parentName: \"li\"\n }, \" When no time is selected, it is the value of the time in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultPickerValue\"), \", if not set it is the time when the panel was opened. After selecting a time, it is the selected time.\"), mdx(\"p\", {\n parentName: \"li\"\n }, \" Since it has two hidden meanings in design, which may lead to ambiguity, it is recommended to use inline styles and open them through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"insetInput\"), \". It is recommended to read the relevant \", mdx(\"a\", {\n href: \"#input-in-panel\"\n }, \"Documentation\"), \" before use.\"), mdx(Image, {\n src: \"https://lf9-static.semi.design/obj/semi-tos/images/a0d68960-bccf-11ed-84ab-fbdf4dc2eb57.png\",\n width: 600,\n mdxType: \"Image\"\n })))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/datepicker","next":{"fields":{"slug":"zh-CN/input/datepicker"},"id":"a1449d1d-6316-518e-a920-e733360043a4","frontmatter":{"title":"DatePicker 日期选择器","localeCode":"zh-CN","icon":"doc-datepicker","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/colorpicker"},"id":"7d76d0ad-72b1-51c9-819b-d621fd036305","frontmatter":{"title":"ColorPicker 颜色选择器","localeCode":"zh-CN","icon":"doc-colorPlatteNew","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}