{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/input/datepicker","result":{"data":{"current":{"frontmatter":{"title":"DatePicker 日期选择器","order":39,"brief":"日期选择器用于帮助用户选择一个符合要求的、格式化的日期（时间）或日期（时间）范围","icon":"doc-datepicker"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本使用","title":"基本使用"},{"url":"#小尺寸","title":"小尺寸"},{"url":"#多个日期选择","title":"多个日期选择"},{"url":"#日期与时间选择","title":"日期与时间选择"},{"url":"#日期范围选择","title":"日期范围选择"},{"url":"#日期范围时间选择","title":"日期范围时间选择"},{"url":"#内嵌输入框","title":"内嵌输入框"},{"url":"#同步切换双面板月份","title":"同步切换双面板月份"},{"url":"#切换面板日期的回调","title":"切换面板日期的回调"},{"url":"#周选择","title":"周选择"},{"url":"#年月选择","title":"年月选择"},{"url":"#年月范围选择","title":"年月范围选择"},{"url":"#确认日期时间选择","title":"确认日期时间选择"},{"url":"#带有快捷方式的日期时间选择","title":"带有快捷方式的日期时间选择"},{"url":"#渲染顶部底部额外区域","title":"渲染顶部/底部额外区域"},{"url":"#禁用日期选择","title":"禁用日期选择"},{"url":"#禁用部分日期或时间","title":"禁用部分日期或时间"},{"url":"#自定义显示格式","title":"自定义显示格式"},{"url":"#自定义触发器","title":"自定义触发器"},{"url":"#自定义日期显示内容","title":"自定义日期显示内容"},{"url":"#自定义日期格子渲染","title":"自定义日期格子渲染"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#methods","title":"Methods"},{"url":"#类型定义","title":"类型定义"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"},{"url":"#日期时间格式","title":"日期时间格式"},{"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\": \"zh-CN\",\n  \"order\": 39,\n  \"category\": \"输入类\",\n  \"title\": \"DatePicker 日期选择器\",\n  \"icon\": \"doc-datepicker\",\n  \"brief\": \"日期选择器用于帮助用户选择一个符合要求的、格式化的日期（时间）或日期（时间）范围\"\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  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), 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  }, \"\\u57FA\\u672C\\u4F7F\\u7528\"), 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() => <DatePicker onChange={(date, dateString) => console.log(dateString)} />;\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C0F\\u5C3A\\u5BF8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 density \\u53EF\\u4EE5\\u63A7\\u5236\\u65E5\\u671F\\u9762\\u677F\\u7684\\u5C3A\\u5BF8\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"compact\"), \" \\u4E3A\\u5C0F\\u5C3A\\u5BF8\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"default\"), \" \\u4E3A\\u9ED8\\u8BA4\\u5C3A\\u5BF8\\u3002\"), 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        <div>\\n            <DatePicker type=\\\"dateTime\\\" density=\\\"compact\\\" />\\n            <br />\\n            <br />\\n            <DatePicker type=\\\"dateRange\\\" density=\\\"compact\\\" style={{ width: 260 }} />\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u591A\\u4E2A\\u65E5\\u671F\\u9009\\u62E9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"multiple\"), \" \\u8BBE\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \"\\uFF0C\\u53EF\\u4EE5\\u591A\\u9009\\u65E5\\u671F\"), 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() => <DatePicker multiple={true} style={{ width: 240 }} />;\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u65E5\\u671F\\u4E0E\\u65F6\\u95F4\\u9009\\u62E9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u8BBE\\u5B9A\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dateTime\"), \"\\uFF0C\\u53EF\\u4EE5\\u9009\\u62E9\\u65E5\\u671F\\u65F6\\u95F4\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u7248\\u672CV2.22.0\\u5F00\\u59CB\\uFF0C\\u6211\\u4EEC\\u5C06 TimePicker \\u5185\\u7684 ScrollItem \\u7684\\u9ED8\\u8BA4\\u6A21\\u5F0F\\u4ECE wheel \\u53D8\\u66F4\\u4E3A\\u4E86 normal, \\u82E5\\u60F3\\u5E94\\u7528\\u56DE\\u65E0\\u9650\\u6EDA\\u52A8\\u7684\\u6548\\u679C\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 timePickerOpts \\u4F20\\u5165\\u7279\\u5B9A\\u914D\\u7F6E\\u5F00\\u542F\\u3002\"), 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    <>\\n        <h4>\\u9ED8\\u8BA4\\u65E5\\u671F\\u4E0E\\u65F6\\u95F4\\u9009\\u62E9</h4>\\n        <DatePicker type=\\\"dateTime\\\" />\\n        <br />\\n        <br />\\n        <h4>\\u5F00\\u542F\\u65F6\\u95F4\\u5217\\u8868\\u65E0\\u9650\\u5FAA\\u73AF</h4>\\n        <DatePicker\\n            type=\\\"dateTime\\\"\\n            timePickerOpts={{\\n                scrollItemProps: { mode: \\\"wheel\\\", cycled: true }\\n            }}\\n        />\\n    </>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u65E5\\u671F\\u8303\\u56F4\\u9009\\u62E9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u8BBE\\u5B9A\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dateRange\"), \"\\uFF0C\\u53EF\\u4EE5\\u9009\\u62E9\\u65E5\\u671F\\u8303\\u56F4\"), 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() => <DatePicker type=\\\"dateRange\\\" style={{ width: 260 }} onChange={console.log} />;\\n\")), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"type=dateRange \\u6216 dateTimeRange \\u65F6\\uFF0C\\u53EA\\u6709\\u5F00\\u59CB\\u65E5\\u671F\\u548C\\u7ED3\\u675F\\u65E5\\u671F\\u90FD\\u88AB\\u9009\\u62E9\\u540E\\u624D\\u4F1A\\u89E6\\u53D1 onChange\\u3002\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u65E5\\u671F\\u8303\\u56F4\\u65F6\\u95F4\\u9009\\u62E9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u8BBE\\u5B9A\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dateTimeRange\"), \"\\uFF0C \\u53EF\\u4EE5\\u9009\\u62E9\\u65E5\\u671F\\u65F6\\u95F4\\u8303\\u56F4\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5F53\\u672A\\u4F20\\u5165 defaultValue \\u6216 value\\u65F6\\uFF0C\\u5E95\\u90E8\\u9762\\u677F\\u9ED8\\u8BA4\\u65F6\\u95F4\\u4E3A\\u5F53\\u524D\\u65F6\\u95F4\\u3002\\u5982\\u679C\\u4F60\\u6709\\u7279\\u6B8A\\u9700\\u6C42\\uFF08\\u5982\\u6307\\u5B9A\\u9ED8\\u8BA4\\u65F6\\u5206\\u79D2\\uFF09\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 defaultPickerValue \\u6307\\u5B9A\"), 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    <>\\n        <DatePicker type=\\\"dateTimeRange\\\" style={{ width: 400, marginBottom: 8 }} onChange={console.log} />\\n        <DatePicker\\n            type=\\\"dateTimeRange\\\"\\n            style={{ width: 400 }}\\n            defaultPickerValue={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}\\n            onChange={console.log}\\n        />\\n    </>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5185\\u5D4C\\u8F93\\u5165\\u6846\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 insetInput \\u53EF\\u4EE5\\u63A7\\u5236\\u65E5\\u671F\\u9762\\u677F\\u662F\\u5426\\u5C55\\u793A\\u5185\\u5D4C\\u8F93\\u5165\\u6846\\uFF0C\\u9ED8\\u8BA4\\u4E3A false\\u3002v2.7.0 \\u540E\\u652F\\u6301\\u3002\\u5185\\u5D4C\\u8F93\\u5165\\u6846\\u9002\\u7528\\u4E8E\\u4EE5\\u4E0B\\u573A\\u666F\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65E5\\u671F\\u65F6\\u95F4\\u9009\\u62E9\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u901A\\u8FC7\\u5185\\u5D4C\\u8F93\\u5165\\u6846\\u5355\\u72EC\\u4FEE\\u6539\\u65F6\\u95F4\\uFF0C\\u65E0\\u987B\\u901A\\u8FC7\\u6EDA\\u8F6E\\u9009\\u62E9\\u65F6\\u95F4\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u89E6\\u53D1\\u5668\\u65F6 + \\u8303\\u56F4\\u9009\\u62E9\\uFF0C\\u4F7F\\u7528\\u5185\\u5D4C\\u8F93\\u5165\\u6846\\u53EF\\u4EE5\\u5355\\u72EC\\u5BF9\\u5F00\\u59CB\\u548C\\u7ED3\\u675F\\u65E5\\u671F\\u8FDB\\u884C\\u4FEE\\u6539\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"insetInput \\u5F00\\u542F\\u540E\\u5305\\u62EC\\u4EE5\\u4E0B\\u529F\\u80FD\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u70B9\\u51FB\\u89E6\\u53D1\\u5668\\u540E\\uFF0C\\u9762\\u677F\\u9ED8\\u8BA4\\u5728\\u539F\\u6709\\u4F4D\\u7F6E\\u5F39\\u51FA\\u3002\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 position \\u81EA\\u5B9A\\u4E49\\u5F39\\u51FA\\u4F4D\\u7F6E\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u70B9\\u51FB\\u5185\\u5D4C\\u65E5\\u671F\\u8F93\\u5165\\u6846\\uFF0C\\u9762\\u677F\\u5207\\u6362\\u5230\\u65E5\\u671F\\u9009\\u62E9\\uFF1B\\u70B9\\u51FB\\u5185\\u5D4C\\u65F6\\u95F4\\u8F93\\u5165\\u6846\\uFF0C\\u9762\\u677F\\u5207\\u6362\\u5230\\u65F6\\u95F4\\u9009\\u62E9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u548C\\u5916\\u90E8\\u7684\\u8F93\\u5165\\u6846\\u4E00\\u81F4\\uFF0C\\u5982\\u679C\\u8F93\\u5165\\u4E86\\u975E\\u6CD5\\u65E5\\u671F\\uFF0C\\u9762\\u677F\\u5173\\u95ED\\u540E\\u65E5\\u671F\\u4F1A\\u56DE\\u5230\\u4E4B\\u524D\\u7684\\u5408\\u6CD5\\u65E5\\u671F\")), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"\\u6CE8\\u610F\\uFF0C\\u5F00\\u542F\\u540E\\u4F1A\\u5BF9\\u7EC4\\u4EF6\\u505A\\u4E00\\u4E9B\\u8C03\\u6574\\u548C\\u9650\\u5236\\uFF1A\"), mdx(\"div\", null, \"1. \\u89E6\\u53D1\\u5668\\u6837\\u5F0F\\uFF1A\\u672A\\u6253\\u5F00\\u9762\\u677F\\u65F6\\u89E6\\u53D1\\u5668\\u53EA\\u8BFB\\uFF0C\\u6253\\u5F00\\u65F6\\u89E6\\u53D1\\u5668\\u7981\\u7528\"), mdx(\"div\", null, \"2. \\u9762\\u677F\\u6837\\u5F0F\\uFF1Atype \\u5305\\u62EC time \\u65F6\\uFF0C\\u9690\\u85CF\\u5E95\\u90E8\\u7684\\u5207\\u6362\\u6309\\u94AE\"), mdx(\"div\", null, \"3. \\u5F00\\u542F insetInput \\u540E format \\u53EA\\u652F\\u6301 `dateFormat[ timeFormat]` \\u683C\\u5F0F\\uFF0C\\u4F7F\\u7528\\u5176\\u4ED6\\u683C\\u5F0F\\u4F1A\\u5F71\\u54CD\\u5185\\u5D4C\\u8F93\\u5165\\u6846 placeholder \\u548C\\u89E6\\u53D1\\u5668\\u6587\\u672C\\u7684\\u5C55\\u793A\")), 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        <div>\\n            <DatePicker type=\\\"date\\\" insetInput />\\n            <br />\\n            <br />\\n            <DatePicker type=\\\"dateTime\\\" insetInput />\\n            <br />\\n            <br />\\n            <DatePicker type=\\\"dateRange\\\" insetInput style={{ width: 260 }} />\\n            <br />\\n            <br />\\n            <DatePicker type=\\\"dateTimeRange\\\" insetInput style={{ width: 400 }} />\\n            <br />\\n            <br />\\n            <DatePicker type=\\\"month\\\" placeholder=\\\"\\u8BF7\\u9009\\u62E9\\u5E74\\u6708\\\" insetInput style={{ width: 140 }} />\\n            <br />\\n            <br />\\n            <DatePicker type=\\\"monthRange\\\" placeholder=\\\"\\u8BF7\\u9009\\u62E9\\u5E74\\u6708\\u8303\\u56F4\\\" insetInput style={{ width: 200 }} />\\n            <br />\\n            <br />\\n            <DatePicker type=\\\"date\\\" position=\\\"bottomLeft\\\" insetInput />\\n            <br />\\n            <br />\\n            <DatePicker type=\\\"dateTime\\\" format=\\\"yyyy-MM-dd HH:mm\\\" insetInput />\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u540C\\u6B65\\u5207\\u6362\\u53CC\\u9762\\u677F\\u6708\\u4EFD\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u8303\\u56F4\\u9009\\u62E9\\u7684\\u573A\\u666F\\u4E2D, \\u5F00\\u542F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"syncSwitchMonth\"), \" \\u5219\\u5141\\u8BB8\\u53CC\\u9762\\u677F\\u540C\\u6B65\\u5207\\u6362\\u3002\\u9ED8\\u8BA4\\u4E3A false\\u3002\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Note\\uFF1A\\u70B9\\u51FB\\u5E74\\u4EFD\\u6309\\u94AE\\u4E5F\\u4F1A\\u540C\\u6B65\\u5207\\u6362\\u4E24\\u4E2A\\u9762\\u677F\\uFF0C\\u4ECE\\u6EDA\\u8F6E\\u91CC\\u9762\\u5207\\u6362\\u5E74\\u6708\\u4E0D\\u4F1A\\u540C\\u6B65\\u5207\\u6362\\u9762\\u677F\\uFF0C\\u8FD9\\u4FDD\\u8BC1\\u4E86\\u7528\\u6237\\u9009\\u62E9\\u975E\\u56FA\\u5B9A\\u95F4\\u9694\\u6708\\u4EFD\\u7684\\u80FD\\u529B\\u3002\")), 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    <DatePicker\\n        // \\u53CC\\u9762\\u677F\\u540C\\u6B65\\u5207\\u6362\\n        syncSwitchMonth={true}\\n        type=\\\"dateTimeRange\\\"\\n        style={{ width: 400 }}\\n    />\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5207\\u6362\\u9762\\u677F\\u65E5\\u671F\\u7684\\u56DE\\u8C03\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onPanelChange\"), \" \\u56DE\\u8C03\\u51FD\\u6570\\u4F1A\\u5728\\u9762\\u677F\\u7684\\u6708\\u4EFD\\u6216\\u5E74\\u4EFD\\u5207\\u6362\\u6539\\u53D8\\u65F6\\u88AB\\u8C03\\u7528\\u3002\"), 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    <DatePicker\\n        syncSwitchMonth={true}\\n        type=\\\"dateTimeRange\\\"\\n        style={{ width: 400 }}\\n        onPanelChange={(date, dateString) => console.log(date, dateString)}\\n    />\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5468\\u9009\\u62E9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"dateRange \\u642D\\u914D startDateOffset \\u548C endDateOffset \\u53EF\\u4EE5\\u8FDB\\u884C\\u5355\\u51FB\\u8303\\u56F4\\u9009\\u62E9\\uFF0C\\u5982\\u5468\\u9009\\u62E9\\u3001\\u53CC\\u5468\\u9009\\u62E9\\u3002\"), 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        <div>\\n            <h4>\\u9009\\u62E9\\u81EA\\u7136\\u5468</h4>\\n            <DatePicker\\n                style={{ width: 260 }}\\n                type=\\\"dateRange\\\"\\n                weekStartsOn={1}\\n                startDateOffset={date => dateFns.startOfWeek(date, { weekStartsOn: 1 })}\\n                endDateOffset={date => dateFns.endOfWeek(date, { weekStartsOn: 1 })}\\n                onChange={handleChange}\\n            />\\n            <br />\\n            <br />\\n            <h4>\\u9009\\u62E9\\u53CC\\u5468</h4>\\n            <DatePicker\\n                style={{ width: 260 }}\\n                type=\\\"dateRange\\\"\\n                weekStartsOn={1}\\n                startDateOffset={date => dateFns.startOfWeek(date, { weekStartsOn: 1 })}\\n                endDateOffset={date => dateFns.add(dateFns.endOfWeek(date, { weekStartsOn: 1 }), { days: 7 })}\\n                onChange={handleChange}\\n            />\\n            <br />\\n            <br />\\n            <h4>\\u9009\\u62E9\\u5F53\\u524D\\u65E5\\u548C\\u540E6\\u65E5</h4>\\n            <DatePicker\\n                style={{ width: 260 }}\\n                type=\\\"dateRange\\\"\\n                weekStartsOn={1}\\n                endDateOffset={date => dateFns.add(date, { days: 6 })}\\n                onChange={handleChange}\\n            />\\n            <br />\\n            <br />\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E74\\u6708\\u9009\\u62E9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u8BBE\\u5B9A\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"month\"), \"\\uFF0C\\u53EF\\u4EE5\\u8FDB\\u884C\\u5E74\\u6708\\u9009\\u62E9\\u3002\"), 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() => <DatePicker defaultValue={new Date()} type=\\\"month\\\" style={{ width: 140 }} />;\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E74\\u6708\\u8303\\u56F4\\u9009\\u62E9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7248\\u672C\\uFF1A\"), \" >= 2.32.0\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u8BBE\\u5B9A\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"monthRange\"), \"\\uFF0C\\u53EF\\u4EE5\\u8FDB\\u884C\\u5E74\\u6708\\u8303\\u56F4\\u9009\\u62E9\\u3002\\u6682\\u4E0D\\u652F\\u6301\\u5C0F\\u5C3A\\u5BF8\\u4E0E\\u5FEB\\u6377\\u9762\\u677F\\u3002\"), 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() => <DatePicker type=\\\"monthRange\\\" style={{ width: 200 }} />;\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u786E\\u8BA4\\u65E5\\u671F\\u65F6\\u95F4\\u9009\\u62E9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u201C\\u65E5\\u671F\\u65F6\\u95F4\\u201D\\uFF08type=\\\"dateTime\\\"\\uFF09\\u6216\\u201C\\u65E5\\u671F\\u65F6\\u95F4\\u8303\\u56F4\\u201D\\uFF08type=\\\"dateTimeRange\\\"\\uFF09\\u7684\\u9009\\u62E9\\uFF0C\\u53EF\\u4EE5\\u8FDB\\u884C\\u786E\\u8BA4\\u540E\\u624D\\u5C06\\u503C\\u5199\\u5165\\u8F93\\u5165\\u6846\\u5185\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F20\\u9012 needConfirm=true \\u6765\\u5F00\\u542F\\u8FD9\\u79CD\\u884C\\u4E3A\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u540C\\u65F6\\u652F\\u6301 \\u201C\\u786E\\u8BA4\\u201D\\uFF08onConfirm\\uFF09 \\u548C \\u201C\\u53D6\\u6D88\\u201D\\uFF08onCancel\\uFF09 \\u4E24\\u4E2A\\u6309\\u94AE\\u7684\\u70B9\\u51FB\\u56DE\\u8C03\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E0B\\u9762\\u8FD9\\u4E2A\\u4F8B\\u5B50\\u7ED1\\u5B9A\\u4E86 onChange\\u3001onConfirm\\u3001onCancel \\u4E09\\u79CD\\u56DE\\u8C03\\uFF0C\\u4F60\\u53EF\\u4EE5\\u6253\\u5F00\\u63A7\\u5236\\u53F0\\u67E5\\u770B\\u6253\\u5370\\u4FE1\\u606F\\u7684\\u533A\\u522B\\u3002\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u6CE8\\u610F\\uFF1A\\u5F00\\u542F\\u786E\\u8BA4\\u9009\\u62E9\\u65F6\\uFF0C\\u9700\\u8981\\u70B9\\u51FB\\u53D6\\u6D88\\u6309\\u94AE\\u5173\\u95ED\\u9762\\u677F\\uFF0C\\u70B9\\u51FB\\u7A7A\\u767D\\u533A\\u57DF\\u4E0D\\u518D\\u5173\\u95ED\\u9762\\u677F\\uFF08v2.2.0\\uFF09\")), 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    <DatePicker\\n        type=\\\"dateTime\\\"\\n        needConfirm={true}\\n        onConfirm={(...args) => {\\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\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u6709\\u5FEB\\u6377\\u65B9\\u5F0F\\u7684\\u65E5\\u671F\\u65F6\\u95F4\\u9009\\u62E9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"presets\"), \" \\u8BBE\\u5B9A\\u5FEB\\u6377\\u65E5\\u671F\\u9009\\u62E9\"), 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    const presets = [\\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    return <DatePicker type=\\\"dateTime\\\" presets={presets} presetPosition=\\\"left\\\"/>;\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6E32\\u67D3\\u9876\\u90E8/\\u5E95\\u90E8\\u989D\\u5916\\u533A\\u57DF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topSlot\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottomSlot\"), \" \\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u9876\\u90E8\\u548C\\u5E95\\u90E8\\u989D\\u5916\\u533A\\u57DF\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftSlot\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rightSlot\"), \" \\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5DE6\\u4FA7\\u548C\\u53F3\\u4FA7\\u989D\\u5916\\u533A\\u57DF\\uFF08v2.65.0\\u540E\\u652F\\u6301\\uFF09\"), 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    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            <Tabs\\n                size=\\\"small\\\"\\n                onChange={handleTabChange}\\n                activeKey={activeTab}\\n                style={{ padding: '12px 20px 0', ...style }}\\n            >\\n                <TabPane tab=\\\"UED \\u6392\\u671F\\\" itemKey=\\\"1\\\" />\\n                <TabPane tab=\\\"\\u6D4B\\u8BD5\\u6392\\u671F\\\" itemKey=\\\"2\\\" />\\n            </Tabs>\\n        );\\n    };\\n\\n    const BottomSlot = function(props) {\\n        const { style } = props;\\n        return (\\n            <Space style={{ padding: '12px 20px', ...style }}>\\n                <IconBulb style={{ color: 'rgba(var(--semi-amber-5), 1)' }} />\\n                <Text strong style={{ color: 'var(--semi-color-text-2)' }}>\\n                    \\u5B9A\\u7248\\u524D\\u8BF7\\u9605\\u8BFB\\n                </Text>\\n                <Text link={{ href: 'https://semi.design/', target: '_blank' }}>\\u53D1\\u7248\\u987B\\u77E5</Text>\\n            </Space>\\n        );\\n    };\\n\\n    const MonthBottomSlot = function(props) {\\n        const { style } = props;\\n        return (\\n            <Space style={{ padding: '12px 20px', ...style }}>\\n                <IconBulb style={{ color: 'rgba(var(--semi-amber-5), 1)' }} />\\n                <Text strong style={{ color: 'var(--semi-color-text-2)' }}>\\n                    \\u8BF7\\u9605\\u8BFB\\n                </Text>\\n                <Text link={{ href: 'https://semi.design/', target: '_blank' }}>\\u987B\\u77E5</Text>\\n            </Space>\\n        );\\n    };\\n\\n    return (\\n        <div>\\n            <DatePicker\\n                topSlot={<TopSlot />}\\n                disabledDate={disabledDate}\\n                value={date}\\n                onChange={handleDateChange}\\n                dropdownClassName=\\\"components-datepicker-demo-slot\\\"\\n                placeholder=\\\"\\u8BF7\\u9009\\u62E9\\u6392\\u671F\\\"\\n            />\\n            <br />\\n            <br />\\n            <DatePicker bottomSlot={<BottomSlot />} placeholder=\\\"\\u8BF7\\u9009\\u62E9\\u53D1\\u7248\\u65F6\\u95F4\\\" />\\n            <br />\\n            <br />\\n            <DatePicker type=\\\"month\\\" bottomSlot={<MonthBottomSlot />} placeholder=\\\"\\u8BF7\\u9009\\u62E9\\u5E74\\u6708\\\" />\\n            <br />\\n            <br />\\n            <DatePicker\\n                topSlot={<TopSlot style={{ padding: '8px 12px 0' }} />}\\n                bottomSlot={<BottomSlot style={{ padding: '8px 12px' }} />}\\n                density=\\\"compact\\\"\\n                placeholder=\\\"\\u5C0F\\u5C3A\\u5BF8\\\"\\n                dropdownClassName=\\\"components-datepicker-demo-slot\\\"\\n            />\\n            <br />\\n            <br />\\n            <DatePicker type=\\\"dateTimeRange\\\" bottomSlot={<BottomSlot />} style={{ width: 400 }} />\\n            <br />\\n            <br />\\n        </div>\\n    );\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \".components-datepicker-demo-slot {\\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  }, \"\\u7981\\u7528\\u65E5\\u671F\\u9009\\u62E9\"), 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() => <DatePicker disabled type=\\\"dateTime\\\" defaultValue={new Date()} />;\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7981\\u7528\\u90E8\\u5206\\u65E5\\u671F\\u6216\\u65F6\\u95F4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabledDate\"), \" \\u53EF\\u4EE5\\u7981\\u7528\\u6307\\u5B9A\\u65E5\\u671F\\uFF0C\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabledTime\"), \" \\u53EF\\u4EE5\\u7981\\u7528\\u6307\\u5B9A\\u65F6\\u95F4\\uFF0C\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultPickerValue\"), \" \\u53EF\\u4EE5\\u6307\\u5B9A\\u9762\\u677F\\u6253\\u5F00\\u65F6\\u6240\\u5904\\u7684\\u5E74\\u6708\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabledDate\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabledTime\"), \"\\uFF0C\\u63A5\\u53D7\\u7684\\u5165\\u53C2\\u90FD\\u4E3A\\u5F53\\u524D\\u65E5\\u671F\\uFF0C\\u524D\\u8005\\u8FD4\\u56DE\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"boolean\"), \" \\u503C\\uFF0C\\u540E\\u8005\\u8FD4\\u56DE\\u4E00\\u4E2A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/timepicker#API_%E5%8F%82%E8%80%83\"\n  }, \"\\u5BF9\\u8C61\"), \"\\uFF0C\\u5C06\\u4F1A\\u900F\\u4F20\\u7ED9 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TimePicker\"), \" \\u7EC4\\u4EF6\\u3002\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"\\u5F53\\u4F60\\u4F7F\\u7528 timeZone \\u65F6\\uFF0C\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u4E3A\\u4F60\\u9009\\u62E9\\u7684\\u65F6\\u533A\\u4E0B\\u65F6\\u95F4\\uFF08\\u4E0EonChange\\u7684\\u7B2C\\u4E00\\u4E2A\\u8FD4\\u56DE\\u503C\\u7C7B\\u4F3C\\uFF09\")), 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        <div>\\n            <div>\\n                <h4>\\u7981\\u7528\\u65F6\\u95F4\\uFF1A\\u7981\\u7528\\u4ECA\\u5929\\u4E0B\\u53485-6\\u70B9</h4>\\n                <DatePicker type=\\\"dateTime\\\" hideDisabledOptions={false} disabledTime={disabledTime} />\\n            </div>\\n            <div>\\n                <h4>\\u7981\\u7528\\u65F6\\u95F4\\uFF1A\\u4E24\\u4E2A\\u9762\\u677F\\u7981\\u7528\\u4E0D\\u540C\\u65F6\\u95F4</h4>\\n                <DatePicker\\n                    type=\\\"dateTimeRange\\\"\\n                    hideDisabledOptions={false}\\n                    disabledTime={disabledTime2}\\n                    style={{ width: 400 }}\\n                />\\n            </div>\\n            <div>\\n                <h4>\\u7981\\u7528\\u65E5\\u671F\\uFF1A\\u7981\\u7528\\u4E0B\\u4E2A\\u670828\\u53F7\\u4E4B\\u524D\\u7684\\u6240\\u6709\\u65E5\\u671F</h4>\\n                <DatePicker\\n                    type=\\\"dateTimeRange\\\"\\n                    disabledDate={disabledDate}\\n                    defaultPickerValue={nextValidMonth()}\\n                    style={{ width: 400 }}\\n                />\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728 type \\u5305\\u542B range \\u65F6\\uFF0C\\u53EF\\u4EE5\\u6839\\u636E\\u5F53\\u524D\\u9009\\u62E9\\u52A8\\u6001\\u7981\\u6B62\\u65E5\\u671F\\u3002options \\u53C2\\u6570 1.9.0 \\u540E\\u652F\\u6301\\u3002\"), 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\\n() => (\\n    <div>\\n        <h4>\\u52A8\\u6001\\u7981\\u7528\\u65E5\\u671F\\uFF1A\\u7981\\u6B62\\u9009\\u62E9\\u4E4B\\u524D\\u7684\\u65E5\\u671F</h4>\\n        <DatePicker\\n            type={'dateRange'}\\n            disabledDate={(date, options) => {\\n                const { rangeStart } = options;\\n                const startDate = dateFns.parseISO(rangeStart);\\n                return dateFns.isBefore(date, startDate);\\n            }}\\n            style={{ width: 260 }}\\n        />\\n    </div>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8303\\u56F4\\u9009\\u62E9\\u65F6\\uFF0C\\u53EF\\u4EE5\\u6839\\u636E focus \\u72B6\\u6001\\u7981\\u7528\\u65E5\\u671F\\u3002focus \\u72B6\\u6001\\u901A\\u8FC7 options \\u4E2D\\u7684 rangeInputFocus \\u53C2\\u6570\\u4F20\\u9012\\u3002\"), 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        <div>\\n            <h4>{`\\u5F00\\u59CB\\u65E5\\u671F\\u7981\\u7528\\u4ECA\\u5929\\u524D2\\u65E5\\u548C\\u540E2\\u65E5\\uFF0C\\u7ED3\\u675F\\u65E5\\u671F\\u7981\\u7528\\u4ECA\\u5929\\u524D3\\u5929\\u548C\\u540E3\\u5929`}</h4>\\n            <DatePicker motion={false} type='dateRange' disabledDate={disabledDate} defaultPickerValue={today} />\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u663E\\u793A\\u683C\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"format\"), \" \\u81EA\\u5B9A\\u4E49\\u663E\\u793A\\u683C\\u5F0F\"), 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() => <DatePicker format=\\\"yyyy\\u5E74MM\\u6708dd\\u65E5 HH:mm\\\" type=\\\"dateTime\\\" defaultValue={new Date()} />;\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u89E6\\u53D1\\u5668\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\u6211\\u4EEC\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Input\"), \" \\u7EC4\\u4EF6\\u4F5C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"DatePicker\"), \" \\u7EC4\\u4EF6\\u7684\\u89E6\\u53D1\\u5668\\uFF0C\\u901A\\u8FC7\\u4F20\\u9012 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"triggerRender\"), \" \\u65B9\\u6CD5\\u4F60\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u8FD9\\u4E2A\\u89E6\\u53D1\\u5668\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u89E6\\u53D1\\u5668\\u662F\\u5BF9\\u89E6\\u53D1\\u5668\\u7684\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\uFF0C\\u9ED8\\u8BA4\\u7684\\u6E05\\u9664\\u6309\\u94AE\\u5C06\\u4E0D\\u751F\\u6548\\uFF0C\\u5982\\u679C\\u4F60\\u9700\\u8981\\u6E05\\u9664\\u529F\\u80FD\\uFF0C\\u8BF7\\u81EA\\u5B9A\\u4E49\\u4E00\\u4E2A\\u6E05\\u9664\\u6309\\u94AE\\u3002\"), 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 * as dateFns from 'date-fns';\\nimport { IconClose, IconChevronDown } from '@douyinfe/semi-icons';\\nimport { DatePicker, Button } from '@douyinfe/semi-ui';\\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 ? <IconClose onClick={onClear} /> : <IconChevronDown />;\\n    }, [date]);\\n\\n    return (\\n        <DatePicker\\n            onChange={onChange}\\n            value={date}\\n            format={formatToken}\\n            triggerRender={({ placeholder }) => (\\n                <Button theme={'light'} icon={closeIcon} iconPosition={'right'}>\\n                    {(date && dateFns.format(date, formatToken)) || placeholder}\\n                </Button>\\n            )}\\n        />\\n    );\\n}\\n\")), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"\\u8303\\u56F4\\u9009\\u62E9\\u65F6\\uFF0C\\u9762\\u677F\\u6253\\u5F00\\u540E\\u9ED8\\u8BA4\\u9009\\u62E9\\u7684\\u65E5\\u671F\\u4E3A\\u5F00\\u59CB\\u65E5\\u671F\\uFF0C\\u9009\\u62E9\\u540E\\u4F1A\\u5207\\u5230\\u7ED3\\u675F\\u65E5\\u671F\\u9009\\u62E9\\u3002\\u9762\\u677F\\u5173\\u95ED\\u540E\\u7126\\u70B9\\u4F1A\\u91CD\\u7F6E\\u3002\"), mdx(\"div\", null, \"\\u6211\\u4EEC\\u5EFA\\u8BAE\\u63D0\\u4F9B\\u4E00\\u4E2A\\u6E05\\u9664\\u6309\\u94AE\\uFF0C\\u5F53\\u4F60\\u7ED9 DatePicker \\u4F20\\u5165\\u7A7A\\u503C\\u65F6\\uFF0CDatePicker \\u5185\\u90E8\\u4E5F\\u4F1A\\u91CD\\u7F6E\\u7126\\u70B9\\u3002\\u8FD9\\u6837\\u7528\\u6237\\u53EF\\u4EE5\\u5728\\u6E05\\u9664\\u540E\\u91CD\\u65B0\\u9009\\u62E9\\u65E5\\u671F\\u8303\\u56F4\\u3002\\uFF08from v2.15\\uFF09\")), 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\\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 ? <IconClose onClick={onClear} /> : <IconChevronDown />;\\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 '\\u8BF7\\u9009\\u62E9\\u65E5\\u671F\\u65F6\\u95F4\\u8303\\u56F4';\\n        }\\n    };\\n\\n    return (\\n        <DatePicker\\n            type='dateTimeRange'\\n            onChange={onChange}\\n            value={date}\\n            triggerRender={({ placeholder }) => (\\n                <Button theme={'light'} icon={closeIcon} iconPosition={'right'}>\\n                    {triggerContent(placeholder)}\\n                </Button>\\n            )}\\n        />\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u65E5\\u671F\\u663E\\u793A\\u5185\\u5BB9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderDate: (dayNumber: number, fullDate: string) => ReactNode\"), \"\\uFF0C\\u81EA\\u5B9A\\u4E49\\u65E5\\u671F\\u5185\\u5BB9\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dayNumber\"), \"\\uFF1A\\u5F53\\u524D\\u65E5\\u3002\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"13\"), \"\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fullDate\"), \"\\uFF1A\\u5F53\\u524D\\u65E5\\u7684\\u5B8C\\u6574\\u65E5\\u671F\\u3002\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"2020-08-13\"), \"\\u3002\")), 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                <Tooltip content={'Always Day 1'}>\\n                    <div style={dateStyle}>{dayNumber}</div>\\n                </Tooltip>\\n            );\\n        }\\n        return dayNumber;\\n    };\\n    return <DatePicker renderDate={renderDate} />;\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u65E5\\u671F\\u683C\\u5B50\\u6E32\\u67D3\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderFullDate: (dayNumber: number, fullDate: string, dayStatus: object) => ReactNode\"), \"\\uFF0C \\u81EA\\u5B9A\\u4E49\\u65E5\\u671F\\u683C\\u5B50\\u7684\\u6E32\\u67D3\\u5185\\u5BB9\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dayStatus\"), \" \\u8868\\u793A\\u5F53\\u524D\\u683C\\u5B50\\u7684\\u72B6\\u6001\\uFF0C\\u5305\\u62EC\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"key\"), \" \\u6709\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-md\"\n  }, \"type DayStatusType = {\\n    isToday?: boolean; // \\u5F53\\u524D\\u65E5\\n    isSelected?: boolean; // \\u88AB\\u9009\\u4E2D\\n    isDisabled?: boolean; // \\u88AB\\u7981\\u7528\\n    isSelectedStart?: boolean; // \\u9009\\u4E2D\\u5F00\\u59CB\\n    isSelectedEnd?: boolean; // \\u9009\\u4E2D\\u7ED3\\u675F\\n    isInRange?: boolean; // \\u8303\\u56F4\\u9009\\u4E2D\\u65E5\\u671F\\u5185\\n    isHover?: boolean; // \\u65E5\\u671F\\u5728\\u9009\\u62E9\\u9879\\u548Chover\\u65E5\\u671F\\u4E4B\\u95F4\\n    isOffsetRangeStart?: boolean; // \\u5468\\u9009\\u62E9\\u5F00\\u59CB\\n    isOffsetRangeEnd?: boolean; // \\u5468\\u9009\\u62E9\\u7ED3\\u675F\\n    isHoverInOffsetRange?: boolean; // hover\\u5728\\u5468\\u9009\\u62E9\\u5185\\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        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        const dayStyle = {\\n            display: 'flex',\\n            alignItems: 'center',\\n            justifyContent: 'center',\\n            width: '80%',\\n            height: '80%',\\n            borderRadius: 'var(--semi-border-radius-circle)',\\n        };\\n\\n        return (\\n            <div style={dayStyle} className={dateCls}>\\n                {dayNumber}\\n            </div>\\n        );\\n    };\\n\\n    return <DatePicker style={{ width: 260 }} type={'dateRange'} renderFullDate={renderFullDate} />;\\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 \\u53C2\\u8003\"), 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  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), 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  }, \"\\u6D6E\\u5C42\\u88AB\\u906E\\u6321\\u65F6\\u662F\\u5426\\u81EA\\u52A8\\u8C03\\u6574\\u65B9\\u5411\"), 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  }, \"\\u81EA\\u52A8\\u83B7\\u53D6\\u7126\\u70B9\"), 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  }, \"autoSwitchDate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u901A\\u8FC7\\u9762\\u677F\\u4E0A\\u65B9\\u5DE6\\u53F3\\u6309\\u94AE\\u3001\\u4E0B\\u62C9\\u83DC\\u5355\\u66F4\\u6539\\u5E74\\u6708\\u65F6\\uFF0C\\u81EA\\u52A8\\u5207\\u6362\\u65E5\\u671F\\u3002\\u4EC5\\u5BF9 date type \\u751F\\u6548\\u3002\"), 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  }, \"borderless\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\\u8FB9\\u6846\\u6A21\\u5F0F\"), 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  }, \"2.33.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  }, \"\\u6E32\\u67D3\\u5E95\\u90E8\\u989D\\u5916\\u533A\\u57DF\"), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), 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  }, \"\\u53EF\\u7528\\u4E8E\\u81EA\\u5B9A\\u4E49\\u6E05\\u9664\\u6309\\u94AE, showClear\\u4E3Atrue\\u65F6\\u6709\\u6548\"), 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  }, \"\\u9762\\u677F\\u9ED8\\u8BA4\\u663E\\u793A\\u6216\\u9690\\u85CF\"), 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  }, \"\\u9ED8\\u8BA4\\u9762\\u677F\\u65E5\\u671F\"), 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  }, \"\\u9ED8\\u8BA4\\u503C\"), 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  }, \"\\u9762\\u677F\\u7684\\u5C3A\\u5BF8\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u7981\\u7528\"), 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  }, \"\\u65E5\\u671F\\u7981\\u6B62\\u5224\\u65AD\\u65B9\\u6CD5\\uFF0C\\u8FD4\\u56DE\\u4E3A true \\u65F6\\u7981\\u6B62\\u8BE5\\u65E5\\u671F\\uFF0Coptions \\u53C2\\u6570 1.9.0 \\u540E\\u652F\\u6301\\uFF0C\\u5176\\u4E2D rangeEnd 1.29 \\u540E\\u652F\\u6301\\uFF0CrangeInputFocus 2.22 \\u540E\\u652F\\u6301\"), 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  }, \"\\u65F6\\u95F4\\u7981\\u6B62\\u914D\\u7F6E\\uFF0C\\u8FD4\\u56DE\\u503C\\u5C06\\u4F1A\\u4F5C\\u4E3A\\u53C2\\u6570\\u900F\\u4F20\\u7ED9 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/timepicker#API_%E5%8F%82%E8%80%83\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"TimePicker\"))), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabledTimePicker\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u7981\\u6B62\\u65F6\\u95F4\\u9009\\u62E9\"), 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  }, \"dropdownClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u62C9\\u5217\\u8868\\u7684 CSS \\u7C7B\\u540D\"), 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  }, \"dropdownStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u62C9\\u5217\\u8868\\u7684\\u5185\\u8054\\u6837\\u5F0F\"), 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  }, \"dropdownMargin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u62C9\\u5217\\u8868\\u7B97\\u6EA2\\u51FA\\u65F6\\u7684\\u589E\\u52A0\\u7684\\u5197\\u4F59\\u503C\\uFF0C\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/issues/549\"\n  }, \"issue#549\"), \"\\uFF0C\\u4F5C\\u7528\\u540C 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  }, \"endDateOffset\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type \\u4E3A dateRange \\u65F6\\uFF0C\\u8BBE\\u7F6E\\u5355\\u51FB\\u9009\\u62E9\\u8303\\u56F4\\u7684\\u7ED3\\u675F\\u65E5\\u671F\"), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"format\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5728\\u8F93\\u5165\\u6846\\u5185\\u5C55\\u73B0\\u7684\\u65E5\\u671F\\u4E32\\u683C\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0E type \\u5BF9\\u5E94\\uFF1A\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#%E6%97%A5%E6%9C%9F%E6%97%B6%E9%97%B4%E6%A0%BC%E5%BC%8F\"\n  }, \"\\u65E5\\u671F\\u65F6\\u95F4\\u683C\\u5F0F\")), 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  }, \"\\u6307\\u5B9A\\u7236\\u7EA7 DOM\\uFF0C\\u5F39\\u5C42\\u5C06\\u4F1A\\u6E32\\u67D3\\u81F3\\u8BE5 DOM \\u4E2D\\uFF0C\\u81EA\\u5B9A\\u4E49\\u9700\\u8981\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"position: relative\"), \" \\u8FD9\\u4F1A\\u6539\\u53D8\\u6D6E\\u5C42 DOM \\u6811\\u4F4D\\u7F6E\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u6539\\u53D8\\u89C6\\u56FE\\u6E32\\u67D3\\u4F4D\\u7F6E\\u3002\"), 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  }, \"hideDisabledOptions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9690\\u85CF\\u7981\\u6B62\\u9009\\u62E9\\u7684\\u65F6\\u95F4\"), 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  }, \"\\u9762\\u677F\\u4E2D\\u662F\\u5426\\u5D4C\\u5165\\u8F93\\u5165\\u6846\\uFF0CInsetInputProps \\u7C7B\\u578B v2.29 \\u652F\\u6301\"), 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  }, \"inputReadOnly\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6587\\u672C\\u6846\\u662F\\u5426 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  }, \"inputStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u6837\\u5F0F\"), 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  }, \"leftSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6E32\\u67D3\\u5DE6\\u4FA7\\u989D\\u5916\\u533A\\u57DF\"), 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.65.0\"))), 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  }, \"multiple \\u4E3A true \\u65F6\\uFF0C\\u591A\\u9009\\u7684\\u6570\\u76EE,\\u4E0D\\u4F20\\u6216\\u8005\\u503C\\u4E3A null\", \"|\", \"undefined \\u7684\\u8BDD\\u65E0\\u9650\\u5236\"), 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  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u9762\\u677F\\u5C55\\u5F00\\u7684\\u52A8\\u753B\"), 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  }, \"multiple\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u53EF\\u4EE5\\u9009\\u62E9\\u591A\\u4E2A\\uFF0C\\u4EC5\\u652F\\u6301 type=\\\"date\\\"\"), 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  }, \"\\u662F\\u5426\\u9700\\u8981\\u201C\\u786E\\u8BA4\\u9009\\u62E9\\u201D\\uFF0C\\u4EC5 type=\\\"dateTime\\\"\", \"|\", \"\\\"dateTimeRange\\\" \\u65F6\\u6709\\u6548\"), 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  }, \"open\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9762\\u677F\\u663E\\u793A\\u6216\\u9690\\u85CF\\u7684\\u53D7\\u63A7\\u5C5E\\u6027\"), 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  }, \"\\u8F93\\u5165\\u6846\\u63D0\\u793A\\u6587\\u5B57\"), 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  }, \"\\u6D6E\\u5C42\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\\u503C\\u540C\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/popover#API%E5%8F%82%E8%80%83\"\n  }, \"Popover#API \\u53C2\\u8003\\xB7position \\u53C2\\u6570\")), 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  }, \"\\u524D\\u7F00\\u5185\\u5BB9\"), 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  }, \"\\u65E5\\u671F\\u65F6\\u95F4\\u5FEB\\u6377\\u65B9\\u5F0F, start \\u548C end \\u5728 v2.52 \\u7248\\u672C\\u652F\\u6301\\u51FD\\u6570\\u7C7B\\u578B\"), 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 \\\\| (() => 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  }, \"\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u662F\\u5426\\u5E94\\u6EDA\\u52A8\\u6587\\u6863\\u4EE5\\u663E\\u793A\\u65B0\\u805A\\u7126\\u7684\\u5143\\u7D20\\uFF0C\\u4F5C\\u7528\\u4E8E\\u7EC4\\u4EF6\\u5185\\u7684 focus \\u65B9\\u6CD5\"), 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  }, \"\\u65E5\\u671F\\u65F6\\u95F4\\u5FEB\\u6377\\u65B9\\u5F0F\\u9762\\u677F\\u4F4D\\u7F6E, \\u53EF\\u9009\\u503C'left', 'right', 'top', 'bottom'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rangeSeparator\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u8303\\u56F4\\u7C7B\\u578B\\u8F93\\u5165\\u6846\\u7684\\u65E5\\u671F\\u5206\\u9694\\u7B26\"), 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  }, \"renderDate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u65E5\\u671F\\u663E\\u793A\\u5185\\u5BB9\"), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderFullDate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u663E\\u793A\\u65E5\\u671F\\u683C\\u5B50\\u5185\\u5BB9\"), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rightSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6E32\\u67D3\\u53F3\\u4FA7\\u989D\\u5916\\u533A\\u57DF\"), 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.65.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  }, \"\\u662F\\u5426\\u663E\\u793A\\u6E05\\u9664\\u6309\\u94AE\"), 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  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C3A\\u5BF8\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\\\"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  }, \"\\u6D6E\\u5C42\\u4E0E trigger \\u7684\\u8DDD\\u79BB\"), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"startDateOffset\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type \\u4E3A dateRange \\u65F6\\uFF0C\\u8BBE\\u7F6E\\u5355\\u51FB\\u9009\\u62E9\\u8303\\u56F4\\u7684\\u5F00\\u59CB\\u65E5\\u671F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(selectedDate?: Date) => Date \",\n    mdxType: \"ApiType\"\n  }, \"(selectedDate) => Date \")), 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  }, \"startYear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6EDA\\u8F6E\\u7684\\u5F00\\u59CB\\u5E74\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u5E74\\u524D 100 \\u5E74\"), 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  }, \"\\u6EDA\\u8F6E\\u7684\\u7ED3\\u675F\\u5E74\\uFF0C\\u7ED3\\u675F\\u5E74\\u9700\\u8981\\u5927\\u4E8E\\u5F00\\u59CB\\u5E74\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u5E74\\u540E 100 \\u5E74\"), 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  }, \"\\u662F\\u5426\\u963B\\u6B62\\u5F39\\u51FA\\u5C42\\u4E0A\\u7684\\u70B9\\u51FB\\u4E8B\\u4EF6\\u5192\\u6CE1\"), 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), 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  }, \"syncSwitchMonth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5728\\u8303\\u56F4\\u9009\\u62E9\\u7684\\u573A\\u666F\\u4E2D\\uFF0C\\u652F\\u6301\\u540C\\u6B65\\u5207\\u6362\\u53CC\\u9762\\u677F\\u7684\\u6708\\u4EFD\"), 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  }, \"timePickerOpts\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5176\\u4ED6\\u53EF\\u4EE5\\u900F\\u4F20\\u7ED9\\u65F6\\u95F4\\u9009\\u62E9\\u5668\\u7684\\u53C2\\u6570\\uFF0C\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/timepicker#API_%E5%8F%82%E8%80%83\"\n  }, \"TimePicker\\xB7API \\u53C2\\u8003\")), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"topSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6E32\\u67D3\\u9876\\u90E8\\u989D\\u5916\\u533A\\u57DF\"), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"triggerRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u89E6\\u53D1\\u5668\\u6E32\\u67D3\\u65B9\\u6CD5\\uFF0C\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u662F\\u4E2A Object\\uFF0C\\u8BE6\\u60C5\\u770B\\u4E0B\\u65B9\\u7C7B\\u578B\\u5B9A\\u4E49\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props) => 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  }, \"\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\\\"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  }, \"validateStatus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6821\\u9A8C\\u72B6\\u6001\\uFF0C\\u53EF\\u9009\\u503C default\\u3001error\\u3001warning\\uFF0C\\u9ED8\\u8BA4 default\\u3002\\u4EC5\\u5F71\\u54CD\\u5C55\\u793A\\u6837\\u5F0F\"), 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  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D7\\u63A7\\u7684\\u503C\"), 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  }, \"\\u4EE5\\u5468\\u51E0\\u4F5C\\u4E3A\\u6BCF\\u5468\\u7B2C\\u4E00\\u5929\\uFF0C0 \\u4EE3\\u8868\\u5468\\u65E5\\uFF0C1 \\u4EE3\\u8868\\u5468\\u4E00\\uFF0C\\u4EE5\\u6B64\\u7C7B\\u63A8\"), 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  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u9762\\u677F\\u7684 zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1030\"), 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  }, \"\\u5931\\u53BB\\u7126\\u70B9\\u65F6\\u7684\\u56DE\\u8C03\\uFF0C\\u8303\\u56F4\\u9009\\u62E9\\u65F6\\u4E0D\\u63A8\\u8350\\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: event) => 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  }, \"onCancel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D6\\u6D88\\u9009\\u62E9\\u65F6\\u7684\\u56DE\\u8C03\\uFF0C\\u5165\\u53C2\\u4E3A\\u4E0A\\u6B21\\u786E\\u8BA4\\u9009\\u62E9\\u7684\\u503C\\uFF0C\\u4EC5 type=\\\"dateTime\\\"\", \"|\", \"\\\"dateTimeRange\\\" \\u4E14 needConfirm=true \\u65F6\\u6709\\u6548\\u3002\", mdx(\"br\", null), \"0.x\\u7248\\u672C\\u5165\\u53C2\\u987A\\u5E8F\\u4E0E\\u65B0\\u7248\\u6709\\u6240\\u4E0D\\u540C\"), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u503C\\u53D8\\u5316\\u65F6\\u7684\\u56DE\\u8C03\\u3002\", mdx(\"br\", null), \"0.x\\u7248\\u672C\\u5165\\u53C2\\u987A\\u5E8F\\u4E0E\\u65B0\\u7248\\u6709\\u6240\\u4E0D\\u540C\"), 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  }, \"onChangeWithDateFirst\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.x \\u4E2D onChange(string, Date), 1.0 \\u540E(Date, string)\\u3002\\u6B64\\u5F00\\u5173\\u8BBE\\u4E3A false \\u65F6\\uFF0C\\u5165\\u53C2\\u987A\\u5E8F\\u5C06\\u4E0E 0.x \\u7248\\u672C\\u4FDD\\u6301\\u4E00\\u81F4\"), 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  }, \"onClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB clear \\u6309\\u94AE\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: event) => 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  }, \"onClickOutSide\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u5F39\\u51FA\\u5C42\\u5904\\u4E8E\\u5C55\\u793A\\u72B6\\u6001\\uFF0C\\u70B9\\u51FB\\u975E\\u5F39\\u51FA\\u5C42\\u3001\\u89E6\\u53D1\\u5668\\u7684\\u56DE\\u8C03, event \\u53C2\\u6570\\u81EA 2.68.0 \\u652F\\u6301\"), 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  }, \"\\u786E\\u8BA4\\u9009\\u62E9\\u65F6\\u7684\\u56DE\\u8C03\\uFF0C\\u5165\\u53C2\\u4E3A\\u5F53\\u524D\\u9009\\u62E9\\u7684\\u503C\\uFF0C\\u4EC5 type=\\\"dateTime\\\"\", \"|\", \"\\\"dateTimeRange\\\" \\u4E14 needConfirm=true \\u65F6\\u6709\\u6548\\u3002\", mdx(\"br\", null), \"0.x\\u7248\\u672C\\u5165\\u53C2\\u987A\\u5E8F\\u4E0E\\u65B0\\u7248\\u6709\\u6240\\u4E0D\\u540C\"), 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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u5F97\\u7126\\u70B9\\u65F6\\u7684\\u56DE\\u8C03\\uFF0C\\u8303\\u56F4\\u9009\\u62E9\\u65F6\\u4E0D\\u63A8\\u8350\\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: event) => 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  }, \"\\u9762\\u677F\\u663E\\u793A\\u6216\\u9690\\u85CF\\u72B6\\u6001\\u5207\\u6362\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(isOpen: boolean) => void\",\n    mdxType: \"ApiType\"\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  }, \"\\u5207\\u6362\\u9762\\u677F\\u7684\\u5E74\\u4EFD\\u6216\\u8005\\u65E5\\u671F\\u65F6\\u7684\\u56DE\\u8C03\"), 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  }, \"function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), 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  }, \"\\u70B9\\u51FB\\u5FEB\\u6377\\u9009\\u62E9\\u6309\\u94AE\\u7684\\u56DE\\u8C03\"), 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(\"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  }, \"\\u5176\\u4ED6\\u53EF\\u4EE5\\u900F\\u4F20\\u7ED9\\u5E74\\u6708\\u9009\\u62E9\\u5668\\u7684\\u53C2\\u6570\\uFF0C\\u8BE6\\u89C1 \", 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.20.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  }, \"\\u65B9\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), 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  }, \"\\u8C03\\u7528\\u65F6\\u53EF\\u4EE5\\u624B\\u52A8\\u5C55\\u5F00\\u4E0B\\u62C9\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), 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  }, \"\\u8C03\\u7528\\u65F6\\u53EF\\u4EE5\\u624B\\u52A8\\u5173\\u95ED\\u4E0B\\u62C9\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), 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  }, \"\\u8C03\\u7528\\u65F6\\u53EF\\u4EE5\\u624B\\u52A8\\u805A\\u7126\\u8F93\\u5165\\u6846\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(focusType?: 'rangeStart' \", \"|\", \" 'rangeEnd') => void\"), 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  }, \"\\u8C03\\u7528\\u65F6\\u53EF\\u4EE5\\u624B\\u52A8\\u5931\\u7126\\u8F93\\u5165\\u6846\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), 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 \\u5199\\u6CD5\\n    // const ref = useRef<BaseDatePicker>();\\n    // \\u4E3A\\u4EC0\\u4E48\\u4E0D\\u5F15\\u7528\\u5165\\u53E3\\u5BFC\\u51FA\\u7684 DatePicker\\uFF1F-> \\u5165\\u53E3\\u7EC4\\u4EF6\\u662F\\u4E2A forwardRef \\u7EC4\\u4EF6\\uFF0Cref \\u900F\\u4F20\\u5230\\u4E86\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u4E0A\\n\\n\\n    const handleClickOutside = () => {\\n        console.log('click outside');\\n    };\\n\\n    return (\\n        <Space vertical align={'start'}>\\n            <Space>\\n                <Button onClick={() => ref.current.open()}>open</Button>\\n                <Button onClick={() => ref.current.close()}>close</Button>\\n                <Button onClick={() => ref.current.focus()}>focus</Button>\\n                <Button onClick={() => ref.current.blur()}>blur</Button>\\n            </Space>\\n            <div>\\n                <DatePicker type=\\\"dateTime\\\" ref={ref} onClickOutSide={handleClickOutside} />\\n            </div>\\n        </Space>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u7C7B\\u578B\\u5B9A\\u4E49\"), 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  }, \"\\u672A\\u9009\\u4E2D\\u65E5\\u671F\\u65F6\\uFF0C\\u89E6\\u53D1\\u5668\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Choose date\"), \"\\uFF0C\\u9009\\u4E2D\\u65E5\\u671F\\u65F6\\uFF0C\\u89E6\\u53D1\\u5668\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Change date\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65E5\\u671F\\u9762\\u677F\\u4E2D\\u6708\\u7684 role \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"grid\"), \"\\uFF0C\\u5468\\u7684 role \\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"row\"), \"\\uFF0C\\u65E5\\u671F\\u683C\\u5B50\\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"gridcell\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u7981\\u7528\\u65F6\\u5BF9\\u5E94\\u9009\\u9879\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-disabled\"), \" \\u4E3A true\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u591A\\u9009\\u65F6\\uFF0C\\u6708\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-multiselectable\"), \" \\u4E3A true\\uFF0C\\u9009\\u4E2D\\u65F6\\u65E5\\u671F\\u683C\\u5B50\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-selected\"), \" \\u4E3A true\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9762\\u677F\\u4E2D\\u4E00\\u4E9B\\u88C5\\u9970\\u4F5C\\u7528\\u7684 icon\\uFF0C\\u5B83\\u4EEC\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-hidden\"), \" \\u4E3A true\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65E5\\u671F\\u9009\\u62E9\\u5668\\u5EFA\\u8BAE\\u642D\\u914D\\u6807\\u7B7E\\u4F7F\\u7528\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u7B80\\u6D01\\u7684\\u6807\\u7B7E\\u6765\\u8868\\u660E\\u65E5\\u671F\\u9009\\u62E9\\u6240\\u6307\\u7684\\u5185\\u5BB9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65E5\\u671F\\u9009\\u62E9\\u5668\\u4E2D\\u65E5\\u671F\\u683C\\u5F0F\\u8BF7\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/start/content-guidelines#8.%20%E6%97%A5%E6%9C%9F%E4%B8%8E%E6%97%B6%E9%97%B4\"\n  }, \"\\u65E5\\u671F\\u4E0E\\u65F6\\u95F4\"), \"\\u7684\\u89C4\\u8303\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u65E5\\u671F\\u65F6\\u95F4\\u683C\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"semi-ui \\u7EC4\\u4EF6\\u5E93\\u4E2D\\u91C7\\u7528 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://date-fns.org/v2.9.0/docs/Getting-Started\"\n  }, \"date-fns(v2.9.0)\"), \" \\u4F5C\\u4E3A\\u65E5\\u671F\\u65F6\\u95F4\\u5F15\\u64CE\\uFF0C\\u683C\\u5F0F\\u5316 token \\u542B\\u4E49\\u5982\\u4E0B\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\\"y\\\"\"), \" \\uFF1A\\u5E74\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\\"M\\\"\"), \" \\uFF1A\\u6708\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\\"d\\\"\"), \" \\uFF1A\\u65E5\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\\"H\\\"\"), \" \\uFF1A\\u5C0F\\u65F6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\\"m\\\"\"), \" \\uFF1A\\u5206\\u949F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\\"s\\\"\"), \" \\uFF1A\\u79D2\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E0B\\u9762\\u4EE5 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"new Date('2023-12-09 08:08:00')\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[new Date('2023-12-09 08:08:00'), new Date('2023-12-10 10:08:00')]\"), \" \\u4E3A\\u4F8B\\u8BF4\\u660E\\u4E0D\\u540C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"format\"), \" \\u503C\\u5BF9\\u5C55\\u793A\\u503C\\u7684\\u5F71\\u54CD\\uFF1A\"), 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  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"format\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u793A\\u503C\"))), 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 \\uFF5E 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 \\uFF5E 2023-12-10 10:08\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u591A\\u4E2A\\u65E5\\u671F\\u6216\\u65F6\\u95F4\\u9ED8\\u8BA4\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\\",\\\"\"), \" \\uFF08\\u82F1\\u6587\\u9017\\u53F7\\uFF09\\u5206\\u9694\\u3002\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u66F4\\u591A token \\u53EF\\u4EE5\\u67E5\\u9605 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://date-fns.org/v2.9.0/docs/Unicode-Tokens\"\n  }, \"date-fns \\u5B98\\u7F51\")))), 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  }, \"\\u65E5\\u671F\\u65F6\\u95F4\\u9009\\u62E9\\u5668\\uFF0C\\u65F6\\u5206\\u79D2\\u9009\\u62E9\\u65F6\\u60F3\\u8981\\u65E0\\u9650\\u6EDA\\u52A8\\u6548\\u679C\\u5982\\u4F55\\u5B9E\\u73B0\\uFF1F\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u7248\\u672CV2.22.0\\u5F00\\u59CB\\uFF0C\\u6211\\u4EEC\\u5C06 TimePicker \\u5185\\u7684 ScrollItem \\u7684\\u9ED8\\u8BA4\\u6A21\\u5F0F\\u4ECE wheel \\u53D8\\u66F4\\u4E3A\\u4E86 normal, \\u82E5\\u60F3\\u5E94\\u7528\\u56DE\\u65E0\\u9650\\u6EDA\\u52A8\\u7684\\u6548\\u679C\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 timePickerOpts \\u4E2D\\u7684\\u7279\\u5B9A\\u5F00\\u5173\\u63A7\\u5236\\u8BE5\\u884C\\u4E3A\\uFF0C\\u5373 timePickerOpts={{ scrollItemProps: { mode: \\\"wheel\\\", cycled: true } }}\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5982\\u4F55\\u8BBE\\u7F6E\\u9762\\u677F\\u6253\\u5F00\\u65F6\\u9ED8\\u8BA4\\u663E\\u793A\\u7684\\u65F6\\u95F4\\uFF1F\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u53EF\\u901A\\u8FC7 defaultPickerValue \\u5C5E\\u6027\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u65E5\\u671F\\u65F6\\u95F4\\u9009\\u62E9\\u3001\\u8303\\u56F4\\u65E5\\u671F\\u9009\\u62E9\\uFF0C\\u8F93\\u5165\\u90E8\\u5206\\u65E5\\u671F\\u540E\\uFF0C\\u9762\\u677F\\u6CA1\\u6709\\u56DE\\u663E\\u65E5\\u671F\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"  \\u8F93\\u5165\\u6846\\u9700\\u8981\\u8F93\\u5165\\u5B8C\\u6574\\u540E\\u624D\\u4F1A\\u56DE\\u663E\\u5230\\u9762\\u677F\\u4E0A\\u3002\\u6BD4\\u5982\\uFF0C\\u65E5\\u671F\\u65F6\\u95F4\\u9009\\u62E9\\uFF0C\\u5B8C\\u6574\\u8981\\u6C42\\u65E5\\u671F\\u548C\\u65F6\\u95F4\\u90FD\\u5DF2\\u8F93\\u5165\\u3002\\u8303\\u56F4\\u65E5\\u671F\\u9009\\u62E9\\uFF0C\\u5B8C\\u6574\\u8981\\u6C42\\u5F00\\u59CB\\u65E5\\u671F\\u548C\\u7ED3\\u675F\\u65E5\\u671F\\u90FD\\u5DF2\\u8F93\\u5165\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u65E5\\u671F\\u65F6\\u95F4\\u9009\\u62E9\\u9762\\u677F\\u5E95\\u90E8\\u7684\\u5C55\\u793A\\u7684\\u65F6\\u95F4\\u662F\\u4EC0\\u4E48\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"  \\u672A\\u9009\\u62E9\\u65F6\\u95F4\\u65F6\\uFF0C\\u5B83\\u4E3A defaultPickerValue \\u4E2D\\u65F6\\u95F4\\u7684\\u503C\\uFF0C\\u5982\\u679C\\u6CA1\\u6709\\u8BBE\\u7F6E\\u5219\\u662F\\u9762\\u677F\\u6253\\u5F00\\u65F6\\u7684\\u65F6\\u95F4\\u3002\\u9009\\u62E9\\u65F6\\u95F4\\u540E\\uFF0C\\u5B83\\u4E3A\\u5DF2\\u9009\\u62E9\\u7684\\u65F6\\u95F4\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"  \\u7531\\u4E8E\\u8BBE\\u8BA1\\u4E0A\\u5B83\\u6709\\u9690\\u542B\\u4E24\\u5C42\\u542B\\u4E49\\uFF0C\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u6B67\\u4E49\\uFF0C\\u5EFA\\u8BAE\\u4F7F\\u7528\\u5185\\u5D4C\\u6837\\u5F0F\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"insetInput\"), \" \\u6253\\u5F00\\u3002\\u4F7F\\u7528\\u524D\\u63A8\\u8350\\u9605\\u8BFB\\u76F8\\u5173 \", mdx(\"a\", {\n    href: \"#\\u5185\\u5D4C\\u8F93\\u5165\\u6846\"\n  }, \"\\u6587\\u6863\"), \"\\u3002\"), mdx(Image, {\n    src: \"https://lf6-static.semi.design/obj/semi-tos/images/9c9e8500-bccf-11ed-a8cf-bfecde588f0d.png\",\n    width: 600,\n    mdxType: \"Image\"\n  })))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/input/datepicker","next":{"fields":{"slug":"en-US/input/form"},"id":"3f01603d-3934-54ae-8fb7-765c477236a6","frontmatter":{"title":"Form","localeCode":"en-US","icon":"doc-form","showNew":null}},"previous":{"fields":{"slug":"en-US/input/datepicker"},"id":"564cb14c-e452-5405-98d4-f58f86f18b3e","frontmatter":{"title":"DatePicker","localeCode":"en-US","icon":"doc-datepicker","showNew":null}}}},"staticQueryHashes":["1348983216308087","1477422646308087","3245198693308087","417590761308087","63159454308087"]}