@uiw/doc 4.21.6 → 4.21.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/web/asset-manifest.json +5 -5
- package/web/index.html +1 -1
- package/web/static/js/6869.e45c3777.chunk.js +2 -0
- package/web/static/js/6869.e45c3777.chunk.js.map +1 -0
- package/web/static/js/main.31c1ce0a.js +2 -0
- package/web/static/js/main.31c1ce0a.js.map +1 -0
- package/web/static/js/6869.37ce78aa.chunk.js +0 -2
- package/web/static/js/6869.37ce78aa.chunk.js.map +0 -1
- package/web/static/js/main.299272e2.js +0 -2
- package/web/static/js/main.299272e2.js.map +0 -1
- package/web/uiw.css +0 -5193
- package/web/uiw.js +0 -11901
- package/web/uiw.min.css +0 -1
- package/web/uiw.min.js +0 -2
package/package.json
CHANGED
package/web/asset-manifest.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"files": {
|
|
3
3
|
"main.css": "/static/css/main.aa1a1a3c.css",
|
|
4
|
-
"main.js": "/static/js/main.
|
|
4
|
+
"main.js": "/static/js/main.31c1ce0a.js",
|
|
5
5
|
"static/css/9200.14abaeb3.chunk.css": "/static/css/9200.14abaeb3.chunk.css",
|
|
6
6
|
"static/js/9200.0a1f7353.chunk.js": "/static/js/9200.0a1f7353.chunk.js",
|
|
7
7
|
"static/css/6730.296853db.chunk.css": "/static/css/6730.296853db.chunk.css",
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
"static/js/8849.d5dd1a61.chunk.js": "/static/js/8849.d5dd1a61.chunk.js",
|
|
176
176
|
"static/js/9147.d6a507a2.chunk.js": "/static/js/9147.d6a507a2.chunk.js",
|
|
177
177
|
"static/js/3769.535a1903.chunk.js": "/static/js/3769.535a1903.chunk.js",
|
|
178
|
-
"static/js/6869.
|
|
178
|
+
"static/js/6869.e45c3777.chunk.js": "/static/js/6869.e45c3777.chunk.js",
|
|
179
179
|
"static/js/8709.44b46cf7.chunk.js": "/static/js/8709.44b46cf7.chunk.js",
|
|
180
180
|
"static/js/8312.58a5729e.chunk.js": "/static/js/8312.58a5729e.chunk.js",
|
|
181
181
|
"static/js/9188.b7ce0cf2.chunk.js": "/static/js/9188.b7ce0cf2.chunk.js",
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
"static/js/5183.ac2ca737.js": "/static/js/5183.ac2ca737.js",
|
|
227
227
|
"index.html": "/index.html",
|
|
228
228
|
"main.aa1a1a3c.css.map": "/static/css/main.aa1a1a3c.css.map",
|
|
229
|
-
"main.
|
|
229
|
+
"main.31c1ce0a.js.map": "/static/js/main.31c1ce0a.js.map",
|
|
230
230
|
"9200.14abaeb3.chunk.css.map": "/static/css/9200.14abaeb3.chunk.css.map",
|
|
231
231
|
"9200.0a1f7353.chunk.js.map": "/static/js/9200.0a1f7353.chunk.js.map",
|
|
232
232
|
"6730.296853db.chunk.css.map": "/static/css/6730.296853db.chunk.css.map",
|
|
@@ -400,7 +400,7 @@
|
|
|
400
400
|
"8849.d5dd1a61.chunk.js.map": "/static/js/8849.d5dd1a61.chunk.js.map",
|
|
401
401
|
"9147.d6a507a2.chunk.js.map": "/static/js/9147.d6a507a2.chunk.js.map",
|
|
402
402
|
"3769.535a1903.chunk.js.map": "/static/js/3769.535a1903.chunk.js.map",
|
|
403
|
-
"6869.
|
|
403
|
+
"6869.e45c3777.chunk.js.map": "/static/js/6869.e45c3777.chunk.js.map",
|
|
404
404
|
"8709.44b46cf7.chunk.js.map": "/static/js/8709.44b46cf7.chunk.js.map",
|
|
405
405
|
"8312.58a5729e.chunk.js.map": "/static/js/8312.58a5729e.chunk.js.map",
|
|
406
406
|
"9188.b7ce0cf2.chunk.js.map": "/static/js/9188.b7ce0cf2.chunk.js.map",
|
|
@@ -454,6 +454,6 @@
|
|
|
454
454
|
"static/js/vendors-react.a09f50fb.js",
|
|
455
455
|
"static/js/5183.ac2ca737.js",
|
|
456
456
|
"static/css/main.aa1a1a3c.css",
|
|
457
|
-
"static/js/main.
|
|
457
|
+
"static/js/main.31c1ce0a.js"
|
|
458
458
|
]
|
|
459
459
|
}
|
package/web/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.
|
|
1
|
+
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.31c1ce0a.js"></script><link href="./static/css/main.aa1a1a3c.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6869],{76869:function(n,e,t){t.r(e),e.default="DateInput \u65e5\u671f\u8f93\u5165\u6846\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-date-input/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-date-input)\n[](https://npmjs.com/@uiw/react-date-input)\n\n\u663e\u793a\u4e00\u4e2a\u6708\u7684\u65e5\u5386\uff0c\u5e76\u5141\u8bb8\u7528\u6237\u9009\u62e9\u5355\u4e2a\u65e5\u671f\u3002\n\n```jsx\nimport { DateInput, DateInputRange } from 'uiw';\n// or\nimport DateInput,{ DateInputRange } from '@uiw/react-date-input';\n// \u5728 `v4.13.0` \u7248\u672c\u4e2d\u589e\u52a0 DateInputRange \u7ec4\u4ef6\n```\n\n## \u57fa\u672c\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput, DateInputRange, Row, Col } from 'uiw';\n\nfunction Demo () {\n\n const [dataRange,dataRangeSet] =React.useState(['2022-02-25 15:06:24','2022-02-27 14:47:32'])\n\n function onChange(selectedDate,dataRange) {\n console.log('selectedDate',selectedDate,dataRange)\n }\n\n return (\n <div>\n <Row style={{ marginBottom:10 }}>\n <Col style={{ width: 200 }} fixed>\n <DateInput\n value={new Date()}\n datePickerProps={{ todayButton: '\u4eca\u5929' }}\n onChange={onChange}\n />\n </Col>\n <Col style={{ width: 200, marginLeft: 10 }} fixed>\n <DateInput\n value={new Date()}\n disabled\n onChange={onChange}\n />\n </Col>\n <Col style={{ width: 400, marginLeft: 10 }} fixed>\n <DateInputRange\n bodyStyle={{ width: 400 }}\n format=\"YYYY/MM/DD HH:mm:ss\"\n value={dataRange}\n datePickerProps={{ todayButton: '\u4eca\u5929',showTime:true }}\n onChange={onChange}\n />\n </Col>\n </Row>\n </div>\n )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 [`<DateInput />`](#/components/date-input) \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';\n\nfunction Demo(){\n const form = React.useRef(null)\n\n const resetDateRange = () => {\n form.current.resetForm()\n }\n\n const setDateRange = () => {\n form.current.setFields({dateRange:[new Date(),new Date()]})\n }\n\n return (\n <Form\n ref={form}\n onSubmit={({ initial, current }) => {\n if (current.date) {\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a${current.date} range:${current.dateRange}`,\n });\n } else {\n Notify.error({\n title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a${current.date} range:${current.dateRange}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }\n }}\n fields={{\n date: {\n initialValue: '2019/02/17',\n labelClassName: 'fieldLabel',\n labelFor: 'date-inline',\n children: <DateInput datePickerProps={{ todayButton: '\u4eca\u5929' }} id=\"date-inline\" />\n },\n dateRange: {\n initialValue: ['2019/02/17', '2019/02/20'],\n labelClassName: 'fieldLabel',\n labelFor: 'date-inline',\n children: <DateInputRange datePickerProps={{ todayButton: '\u4eca\u5929' }} id=\"date-inline\" />\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col style={{ width: 200 }} fixed>{fields.date}</Col>\n </Row>\n <Row style={{ width: 200 }} >\n <Col fixed>{fields.dateRange}</Col>\n <Col fixed>{JSON.stringify(state)}</Col>\n </Row>\n <Row gutter={10}>\n <Col>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button onClick={resetDateRange} >\u91cd\u7f6e</Button>\n <Button onClick={setDateRange}>setValue</Button>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u65e5\u671f\u683c\u5f0f\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n onChange(selectedDate) {\n console.log('selectedDate:', selectedDate);\n }\n render() {\n return (\n <div style={{ width: 200 }}>\n <DateInput\n format=\"YYYY # MM # DD\"\n datePickerProps={{ todayButton: '\u4eca\u5929' }}\n onChange={this.onChange.bind(this)}\n />\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u65e5\u671f\u65f6\u95f4\u8bbe\u7f6e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n onChange(selectedDate) {\n console.log('selectedDate:', selectedDate);\n }\n render() {\n return (\n <div style={{ width: 200 }}>\n <DateInput\n format=\"YYYY/MM/DD HH:mm:ss\"\n datePickerProps={{ showTime: true, todayButton: '\u4eca\u5929' }}\n onChange={this.onChange.bind(this)}\n />\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u52a8\u9690\u85cf\u5f39\u5c42\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n onChange(selectedDate) {\n console.log('selectedDate:', selectedDate);\n }\n render() {\n return (\n <div style={{ maxWidth: 200 }}>\n <DateInput\n autoClose={true}\n format=\"YYYY/MM/DD HH:mm:ss\"\n datePickerProps={{ showTime: true, todayButton: '\u4eca\u5929' }}\n onChange={this.onChange.bind(this)}\n />\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n| ---- | ---- | ---- | ---- |\n| value | \u521d\u59cb\u65f6\u95f4\u503c | Date | - |\n| placeholder | \u8f93\u5165\u6846\u63d0\u793a\u6587\u5b57 | String | - |\n| allowClear | \u662f\u5426\u663e\u793a\u6e05\u9664\u6309\u94ae | Boolean | true |\n| format | \u683c\u5f0f\u5316\u65f6\u95f4\uff0c\u89c4\u5219\u67e5\u770b [`<formatter>`](#/components/formatter) \u6587\u6863 | String | `YYYY/MM/DD` |\n| onChange | \u9009\u62e9\u4e00\u5929\u65f6\u8c03\u7528\u3002 | Function(selectedDate:Date) | - |\n| popoverProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Popover>`](#/components/popover) \u7ec4\u4ef6 | Object | - |\n| datePickerProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<DatePicker>`](#/components/date-picker) \u7ec4\u4ef6 | Object | - |\n| disabled | \u7ec4\u4ef6 [`<Input>`](#/components/input) \u7684\u5c5e\u6027\uff0c\u7981\u7528\u65e5\u5386 | Boolean | - |\n| autoClose | \u662f\u5426\u81ea\u52a8\u5173\u95ed\u5f39\u5c42 | Boolean | false |\n\n\u7ec4\u4ef6 `DateInput` \u7ee7\u627f `<Input>` \u7ec4\u4ef6\uff0c\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [`<Input>`](#/components/input)\u3002\n\n## DateInputRange\n\n\u5728 `v4.13.0` \u7248\u672c\u4e2d\u589e\u52a0 `DateInputRange` \u7ec4\u4ef6\u3002\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n| ---- | ---- | ---- | ---- |\n| value | \u521d\u59cb\u65f6\u95f4\u503c | Array<Date, string> | - |\n| placeholder | \u8f93\u5165\u6846\u63d0\u793a\u6587\u5b57 | String | - |\n| allowClear | \u662f\u5426\u663e\u793a\u6e05\u9664\u6309\u94ae | Boolean | true |\n| format | \u683c\u5f0f\u5316\u65f6\u95f4\uff0c\u89c4\u5219\u67e5\u770b [`<formatter>`](#/components/formatter) \u6587\u6863 | String | `YYYY/MM/DD` |\n| onChange | \u9009\u62e9\u4e00\u5929\u65f6\u8c03\u7528\u3002 | Function(selectedDate:Date, dateRange: Array\\<Date>) | - |\n| popoverProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Popover>`](#/components/popover) \u7ec4\u4ef6 | Object | - |\n| datePickerProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<DatePicker>`](#/components/date-picker) \u7ec4\u4ef6 | Object | - |\n| disabled | \u7ec4\u4ef6 [`<Input>`](#/components/input) \u7684\u5c5e\u6027\uff0c\u7981\u7528\u65e5\u5386 | Boolean | - |\n| bodyStyle | \u9009\u62e9\u6846\u6837\u5f0f | Object | { width: 300 } | - |\n\n\u7ec4\u4ef6 `DateInputRange` \u7ee7\u627f `<Input>` \u7ec4\u4ef6\uff0c\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [`<Input>`](#/components/input)\u3002\n\n"}}]);
|
|
2
|
+
//# sourceMappingURL=6869.e45c3777.chunk.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"static/js/6869.e45c3777.chunk.js","mappings":"gHAAA","sources":["../../packages/react-date-input/README.md"],"sourcesContent":["export default \"DateInput 日期输入框\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-date-input/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-date-input)\\n[](https://npmjs.com/@uiw/react-date-input)\\n\\n显示一个月的日历，并允许用户选择单个日期。\\n\\n```jsx\\nimport { DateInput, DateInputRange } from 'uiw';\\n// or\\nimport DateInput,{ DateInputRange } from '@uiw/react-date-input';\\n// 在 `v4.13.0` 版本中增加 DateInputRange 组件\\n```\\n\\n## 基本使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput, DateInputRange, Row, Col } from 'uiw';\\n\\nfunction Demo () {\\n\\n const [dataRange,dataRangeSet] =React.useState(['2022-02-25 15:06:24','2022-02-27 14:47:32'])\\n\\n function onChange(selectedDate,dataRange) {\\n console.log('selectedDate',selectedDate,dataRange)\\n }\\n\\n return (\\n <div>\\n <Row style={{ marginBottom:10 }}>\\n <Col style={{ width: 200 }} fixed>\\n <DateInput\\n value={new Date()}\\n datePickerProps={{ todayButton: '今天' }}\\n onChange={onChange}\\n />\\n </Col>\\n <Col style={{ width: 200, marginLeft: 10 }} fixed>\\n <DateInput\\n value={new Date()}\\n disabled\\n onChange={onChange}\\n />\\n </Col>\\n <Col style={{ width: 400, marginLeft: 10 }} fixed>\\n <DateInputRange\\n bodyStyle={{ width: 400 }}\\n format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n value={dataRange}\\n datePickerProps={{ todayButton: '今天',showTime:true }}\\n onChange={onChange}\\n />\\n </Col>\\n </Row>\\n </div>\\n )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 [`<DateInput />`](#/components/date-input) 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';\\n\\nfunction Demo(){\\n const form = React.useRef(null)\\n\\n const resetDateRange = () => {\\n form.current.resetForm()\\n }\\n\\n const setDateRange = () => {\\n form.current.setFields({dateRange:[new Date(),new Date()]})\\n }\\n\\n return (\\n <Form\\n ref={form}\\n onSubmit={({ initial, current }) => {\\n if (current.date) {\\n Notify.success({\\n title: '提交成功！',\\n description: `表单提交时间成功，时间为：${current.date} range:${current.dateRange}`,\\n });\\n } else {\\n Notify.error({\\n title: '提交失败！',\\n description: `表单提交时间成功，时间为：${current.date} range:${current.dateRange}，将自动填充初始化值！`,\\n });\\n }\\n }}\\n fields={{\\n date: {\\n initialValue: '2019/02/17',\\n labelClassName: 'fieldLabel',\\n labelFor: 'date-inline',\\n children: <DateInput datePickerProps={{ todayButton: '今天' }} id=\\\"date-inline\\\" />\\n },\\n dateRange: {\\n initialValue: ['2019/02/17', '2019/02/20'],\\n labelClassName: 'fieldLabel',\\n labelFor: 'date-inline',\\n children: <DateInputRange datePickerProps={{ todayButton: '今天' }} id=\\\"date-inline\\\" />\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div>\\n <Row>\\n <Col style={{ width: 200 }} fixed>{fields.date}</Col>\\n </Row>\\n <Row style={{ width: 200 }} >\\n <Col fixed>{fields.dateRange}</Col>\\n <Col fixed>{JSON.stringify(state)}</Col>\\n </Row>\\n <Row gutter={10}>\\n <Col>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n <Button onClick={resetDateRange} >重置</Button>\\n <Button onClick={setDateRange}>setValue</Button>\\n </Col>\\n </Row>\\n </div>\\n )\\n }}\\n </Form>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 日期格式\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n onChange(selectedDate) {\\n console.log('selectedDate:', selectedDate);\\n }\\n render() {\\n return (\\n <div style={{ width: 200 }}>\\n <DateInput\\n format=\\\"YYYY # MM # DD\\\"\\n datePickerProps={{ todayButton: '今天' }}\\n onChange={this.onChange.bind(this)}\\n />\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 日期时间设置\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n onChange(selectedDate) {\\n console.log('selectedDate:', selectedDate);\\n }\\n render() {\\n return (\\n <div style={{ width: 200 }}>\\n <DateInput\\n format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n datePickerProps={{ showTime: true, todayButton: '今天' }}\\n onChange={this.onChange.bind(this)}\\n />\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自动隐藏弹层\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n onChange(selectedDate) {\\n console.log('selectedDate:', selectedDate);\\n }\\n render() {\\n return (\\n <div style={{ maxWidth: 200 }}>\\n <DateInput\\n autoClose={true}\\n format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n datePickerProps={{ showTime: true, todayButton: '今天' }}\\n onChange={this.onChange.bind(this)}\\n />\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n| ---- | ---- | ---- | ---- |\\n| value | 初始时间值 | Date | - |\\n| placeholder | 输入框提示文字 | String | - |\\n| allowClear | 是否显示清除按钮 | Boolean | true |\\n| format | 格式化时间，规则查看 [`<formatter>`](#/components/formatter) 文档 | String | `YYYY/MM/DD` |\\n| onChange | 选择一天时调用。 | Function(selectedDate:Date) | - |\\n| popoverProps | 将参数传递给 [`<Popover>`](#/components/popover) 组件 | Object | - |\\n| datePickerProps | 将参数传递给 [`<DatePicker>`](#/components/date-picker) 组件 | Object | - |\\n| disabled | 组件 [`<Input>`](#/components/input) 的属性，禁用日历 | Boolean | - |\\n| autoClose | 是否自动关闭弹层 | Boolean | false |\\n\\n组件 `DateInput` 继承 `<Input>` 组件，更多属性文档请参考 [`<Input>`](#/components/input)。\\n\\n## DateInputRange\\n\\n在 `v4.13.0` 版本中增加 `DateInputRange` 组件。\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n| ---- | ---- | ---- | ---- |\\n| value | 初始时间值 | Array<Date, string> | - |\\n| placeholder | 输入框提示文字 | String | - |\\n| allowClear | 是否显示清除按钮 | Boolean | true |\\n| format | 格式化时间，规则查看 [`<formatter>`](#/components/formatter) 文档 | String | `YYYY/MM/DD` |\\n| onChange | 选择一天时调用。 | Function(selectedDate:Date, dateRange: Array\\\\<Date>) | - |\\n| popoverProps | 将参数传递给 [`<Popover>`](#/components/popover) 组件 | Object | - |\\n| datePickerProps | 将参数传递给 [`<DatePicker>`](#/components/date-picker) 组件 | Object | - |\\n| disabled | 组件 [`<Input>`](#/components/input) 的属性，禁用日历 | Boolean | - |\\n| bodyStyle | 选择框样式 | Object | { width: 300 } | - |\\n\\n组件 `DateInputRange` 继承 `<Input>` 组件，更多属性文档请参考 [`<Input>`](#/components/input)。\\n\\n\";"],"names":[],"sourceRoot":""}
|