@uiw/doc
Version:
UIW documentation website.
1 lines • 52.1 kB
JavaScript
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2668],{4934:e=>{function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=4934,e.exports=t},5301:(e,t,n)=>{"use strict";n.d(t,{Z:()=>y});var r=n(8573),o=n(6320),a=n(8563),i=n(7622),u=n(7937);const l={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var s=n(4760);function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:t}=e,n=/^http/.test(t||"")?t:"https://github.com/uiwjs/uiw/blob/master/".concat(t);return(0,s.jsxs)("div",{className:l.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,s.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,s.jsx)("br",{}),(0,s.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,s.jsx)(u.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,s.jsx)(u.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,s.jsx)(u.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,s.jsx)(u.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,s.jsx)(u.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const f=o.ZP.Preview,p=o.ZP.Code,d=o.ZP.Toolbar,m=e=>{var t,n;let{node:i,components:u,data:l,...c}=e;const m=(0,r.useRef)(null),{headings:y,headingsList:_,...b}=c;(0,r.useEffect)((()=>{if(m.current){const e=m.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(m.current,e)}}),[m]);const h=null===i||void 0===i||null===(t=i.position)||void 0===t?void 0:t.start.line,g=null===i||void 0===i||null===(n=i.data)||void 0===n?void 0:n.meta,v=(0,a.Mx)(g)||String(h),w=u["".concat(v)];if(v&&"function"===typeof w){const e=l[v].value||"",t=(0,a.aE)(g||"");return(0,s.jsxs)(o.ZP,{ref:m,children:[(0,s.jsx)(f,{style:{background:t.bg||"transparent"},children:(0,s.jsx)(w,{})}),(0,s.jsx)(d,{text:e,children:t.title||"Example"}),(0,s.jsx)(p,{children:(0,s.jsx)("pre",{...b})})]})}return(0,s.jsx)("code",{...b})};function y(e){return(0,s.jsxs)(r.Fragment,{children:[(0,s.jsx)(i.Z,{className:l.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,s.jsx)(m,{...e,...t})}}),(0,s.jsx)(c,{path:e.path})]})}},8177:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>i});const r={components:{20:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,u=[],l=!0,s=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){s=!0,o=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw o}}return u}}(e,t)||function(e,t){if(!e)return;if("string"===typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return a(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}return function(){var e=o(t.default.useState(["2022/02/25 15:06:24","2022/02/27 14:47:32"]),2),n=e[0];e[1];function a(e,t){console.log("selectedDate",e,t)}return t.default.createElement("div",null,t.default.createElement(r.Row,{style:{marginBottom:10}},t.default.createElement(r.Col,{style:{width:200},fixed:!0},t.default.createElement(r.DateInput,{value:new Date,datePickerProps:{todayButton:"\u4eca\u5929"},onChange:a})),t.default.createElement(r.Col,{style:{width:200,marginLeft:10},fixed:!0},t.default.createElement(r.DateInput,{value:new Date,disabled:!0,onChange:a})),t.default.createElement(r.Col,{style:{width:400,marginLeft:10},fixed:!0},t.default.createElement(r.DateInputRange,{bodyStyle:{width:400},format:"YYYY/MM/DD HH:mm:ss",value:n,datePickerProps:{todayButton:"\u4eca\u5929",showTime:!0},onChange:a}))))}}(),67:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){var e=t.default.useRef(null),n=function(){e.current.resetForm()},o=function(){e.current.setFields({dateRange:[new Date,new Date]})};return t.default.createElement(r.Form,{ref:e,onSubmit:function(e){e.initial;var t=e.current;t.date?r.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a".concat(t.date," range:").concat(t.dateRange)}):r.Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:"\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a".concat(t.date," range:").concat(t.dateRange,"\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01")})},fields:{date:{initialValue:"2019/02/17",labelClassName:"fieldLabel",labelFor:"date-inline",children:t.default.createElement(r.DateInput,{datePickerProps:{todayButton:"\u4eca\u5929"},id:"date-inline"})},dateRange:{initialValue:["2019/02/17","2019/02/20"],labelClassName:"fieldLabel",labelFor:"date-inline",children:t.default.createElement(r.DateInputRange,{datePickerProps:{todayButton:"\u4eca\u5929"},id:"date-inline"})}}},(function(e){var a=e.fields,i=e.state,u=e.canSubmit;return t.default.createElement("div",null,t.default.createElement(r.Row,null,t.default.createElement(r.Col,{style:{width:200},fixed:!0},a.date),t.default.createElement(r.Col,{fixed:!0},a.dateRange)),t.default.createElement(r.Row,null,t.default.createElement(r.Col,{style:{overflow:"auto",height:130}},t.default.createElement("pre",null,JSON.stringify(i,null,2)))),t.default.createElement(r.Row,{gutter:10},t.default.createElement(r.Col,null,t.default.createElement(r.Button,{disabled:!u(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"),t.default.createElement(r.Button,{onClick:n},"\u91cd\u7f6e"),t.default.createElement(r.Button,{onClick:o},"setValue"))))}))}}(),144:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);function a(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,u(r.key),r)}}function u(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function l(e,t){return l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},l(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var a=c(this).constructor;r=Reflect.construct(o,arguments,a)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}var f=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&l(e,t)}(f,e);var t,n,u,c=s(f);function f(){return a(this,f),c.apply(this,arguments)}return t=f,(n=[{key:"onChange",value:function(e){console.log("selectedDate:",e)}},{key:"render",value:function(){return r.default.createElement("div",{style:{width:200}},r.default.createElement(o.DateInput,{format:"YYYY # MM # DD",datePickerProps:{todayButton:"\u4eca\u5929"},onChange:this.onChange.bind(this)}))}}])&&i(t.prototype,n),u&&i(t,u),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component);return f}(),169:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);function a(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,u(r.key),r)}}function u(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function l(e,t){return l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},l(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var a=c(this).constructor;r=Reflect.construct(o,arguments,a)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}var f=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&l(e,t)}(f,e);var t,n,u,c=s(f);function f(){return a(this,f),c.apply(this,arguments)}return t=f,(n=[{key:"onChange",value:function(e){console.log("selectedDate:",e)}},{key:"render",value:function(){return r.default.createElement("div",{style:{width:200}},r.default.createElement(o.DateInput,{format:"YYYY/MM/DD HH:mm:ss",datePickerProps:{showTime:!0,todayButton:"\u4eca\u5929"},onChange:this.onChange.bind(this)}))}}])&&i(t.prototype,n),u&&i(t,u),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component);return f}(),195:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);function a(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,u(r.key),r)}}function u(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function l(e,t){return l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},l(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var a=c(this).constructor;r=Reflect.construct(o,arguments,a)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}var f=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&l(e,t)}(f,e);var t,n,u,c=s(f);function f(){return a(this,f),c.apply(this,arguments)}return t=f,(n=[{key:"onChange",value:function(e){console.log("selectedDate:",e)}},{key:"render",value:function(){return r.default.createElement("div",{style:{maxWidth:200}},r.default.createElement(o.DateInput,{autoClose:!0,format:"YYYY/MM/DD HH:mm:ss",datePickerProps:{showTime:!0,todayButton:"\u4eca\u5929"},onChange:this.onChange.bind(this)}))}}])&&i(t.prototype,n),u&&i(t,u),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component);return f}()},data:{20:{name:20,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nreturn function Demo() {\n var _React$useState = _react["default"].useState([\'2022/02/25 15:06:24\', \'2022/02/27 14:47:32\']),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n dataRange = _React$useState2[0],\n dataRangeSet = _React$useState2[1];\n function onChange(selectedDate, dataRange) {\n console.log(\'selectedDate\', selectedDate, dataRange);\n }\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n style: {\n marginBottom: 10\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n style: {\n width: 200\n },\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.DateInput, {\n value: new Date(),\n datePickerProps: {\n todayButton: \'\u4eca\u5929\'\n },\n onChange: onChange\n })), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n style: {\n width: 200,\n marginLeft: 10\n },\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.DateInput, {\n value: new Date(),\n disabled: true,\n onChange: onChange\n })), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n style: {\n width: 400,\n marginLeft: 10\n },\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.DateInputRange, {\n bodyStyle: {\n width: 400\n },\n format: "YYYY/MM/DD HH:mm:ss",\n value: dataRange,\n datePickerProps: {\n todayButton: \'\u4eca\u5929\',\n showTime: true\n },\n onChange: onChange\n }))));\n};',language:"jsx",value:"import React from 'react';\nimport { DateInput, DateInputRange, Row, Col } from 'uiw';\n\nexport default function Demo () {\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}"},67:{name:67,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n var form = _react["default"].useRef(null);\n var resetDateRange = function resetDateRange() {\n form.current.resetForm();\n };\n var setDateRange = function setDateRange() {\n form.current.setFields({\n dateRange: [new Date(), new Date()]\n });\n };\n return /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n ref: form,\n onSubmit: function onSubmit(_ref) {\n var initial = _ref.initial,\n current = _ref.current;\n if (current.date) {\n _uiw.Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: "\\u8868\\u5355\\u63D0\\u4EA4\\u65F6\\u95F4\\u6210\\u529F\\uFF0C\\u65F6\\u95F4\\u4E3A\\uFF1A".concat(current.date, " range:").concat(current.dateRange)\n });\n } else {\n _uiw.Notify.error({\n title: \'\u63d0\u4ea4\u5931\u8d25\uff01\',\n description: "\\u8868\\u5355\\u63D0\\u4EA4\\u65F6\\u95F4\\u6210\\u529F\\uFF0C\\u65F6\\u95F4\\u4E3A\\uFF1A".concat(current.date, " range:").concat(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: /*#__PURE__*/_react["default"].createElement(_uiw.DateInput, {\n datePickerProps: {\n todayButton: \'\u4eca\u5929\'\n },\n id: "date-inline"\n })\n },\n dateRange: {\n initialValue: [\'2019/02/17\', \'2019/02/20\'],\n labelClassName: \'fieldLabel\',\n labelFor: \'date-inline\',\n children: /*#__PURE__*/_react["default"].createElement(_uiw.DateInputRange, {\n datePickerProps: {\n todayButton: \'\u4eca\u5929\'\n },\n id: "date-inline"\n })\n }\n }\n }, function (_ref2) {\n var fields = _ref2.fields,\n state = _ref2.state,\n canSubmit = _ref2.canSubmit;\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n style: {\n width: 200\n },\n fixed: true\n }, fields.date), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, fields.dateRange)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n style: {\n overflow: \'auto\',\n height: 130\n }\n }, /*#__PURE__*/_react["default"].createElement("pre", null, JSON.stringify(state, null, 2)))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: !canSubmit(),\n type: "primary",\n htmlType: "submit"\n }, "\\u63D0\\u4EA4"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: resetDateRange\n }, "\\u91CD\\u7F6E"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: setDateRange\n }, "setValue"))));\n });\n};',language:"jsx",value:"import React from 'react';\nimport { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';\n\nexport default function 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 <Col fixed>{fields.dateRange}</Col>\n </Row>\n <Row>\n <Col style={{ overflow: 'auto', height: 130 }}>\n <pre>\n {JSON.stringify(state, null, 2)}\n </pre>\n </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}"},144:{name:144,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo() {\n _classCallCheck(this, Demo);\n return _super.apply(this, arguments);\n }\n _createClass(Demo, [{\n key: "onChange",\n value: function onChange(selectedDate) {\n console.log(\'selectedDate:\', selectedDate);\n }\n }, {\n key: "render",\n value: function render() {\n return /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n width: 200\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.DateInput, {\n format: "YYYY # MM # DD",\n datePickerProps: {\n todayButton: \'\u4eca\u5929\'\n },\n onChange: this.onChange.bind(this)\n }));\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\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}\nexport default Demo;"},169:{name:169,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo() {\n _classCallCheck(this, Demo);\n return _super.apply(this, arguments);\n }\n _createClass(Demo, [{\n key: "onChange",\n value: function onChange(selectedDate) {\n console.log(\'selectedDate:\', selectedDate);\n }\n }, {\n key: "render",\n value: function render() {\n return /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n width: 200\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.DateInput, {\n format: "YYYY/MM/DD HH:mm:ss",\n datePickerProps: {\n showTime: true,\n todayButton: \'\u4eca\u5929\'\n },\n onChange: this.onChange.bind(this)\n }));\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\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}\n\nexport default Demo;"},195:{name:195,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo() {\n _classCallCheck(this, Demo);\n return _super.apply(this, arguments);\n }\n _createClass(Demo, [{\n key: "onChange",\n value: function onChange(selectedDate) {\n console.log(\'selectedDate:\', selectedDate);\n }\n }, {\n key: "render",\n value: function render() {\n return /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n maxWidth: 200\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.DateInput, {\n autoClose: true,\n format: "YYYY/MM/DD HH:mm:ss",\n datePickerProps: {\n showTime: true,\n todayButton: \'\u4eca\u5929\'\n },\n onChange: this.onChange.bind(this)\n }));\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\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}\n\nexport default Demo;"}},source:"DateInput \u65e5\u671f\u8f93\u5165\u6846\n===\n\n[](https://jaywcjlove.github.io/#/sponsor)\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```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { DateInput, DateInputRange, Row, Col } from 'uiw';\n\nexport default function Demo () {\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}\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```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';\n\nexport default function 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 <Col fixed>{fields.dateRange}</Col>\n </Row>\n <Row>\n <Col style={{ overflow: 'auto', height: 130 }}>\n <pre>\n {JSON.stringify(state, null, 2)}\n </pre>\n </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```\n\n## \u65e5\u671f\u683c\u5f0f\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\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}\nexport default Demo;\n```\n\n## \u65e5\u671f\u65f6\u95f4\u8bbe\u7f6e\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\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}\n\nexport default Demo;\n```\n\n## \u81ea\u52a8\u9690\u85cf\u5f39\u5c42\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\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}\n\nexport default Demo;\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 | Objec