@uiw/doc/web/static/js/3492.6a34d6ab.chunk.js

UIW documentation website.

(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3492],{4934:e=>{function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=()=>[],n.resolve=n,n.id=4934,e.exports=n},5301:(e,n,t)=>{"use strict";t.d(n,{Z:()=>p});var r=t(8573),i=t(6320),o=t(8563),a=t(7622),u=t(7937);const l={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var d=t(4760);function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:n}=e,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,d.jsxs)("div",{className:l.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,d.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,d.jsx)("br",{}),(0,d.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,d.jsx)(u.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,d.jsx)(u.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,d.jsx)(u.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,d.jsx)(u.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,d.jsx)(u.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const s=i.ZP.Preview,m=i.ZP.Code,f=i.ZP.Toolbar,_=e=>{var n,t;let{node:a,components:u,data:l,...c}=e;const _=(0,r.useRef)(null),{headings:p,headingsList:w,...h}=c;(0,r.useEffect)((()=>{if(_.current){const e=_.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(_.current,e)}}),[_]);const b=null===a||void 0===a||null===(n=a.position)||void 0===n?void 0:n.start.line,x=null===a||void 0===a||null===(t=a.data)||void 0===t?void 0:t.meta,v=(0,o.Mx)(x)||String(b),E=u["".concat(v)];if(v&&"function"===typeof E){const e=l[v].value||"",n=(0,o.aE)(x||"");return(0,d.jsxs)(i.ZP,{ref:_,children:[(0,d.jsx)(s,{style:{background:n.bg||"transparent"},children:(0,d.jsx)(E,{})}),(0,d.jsx)(f,{text:e,children:n.title||"Example"}),(0,d.jsx)(m,{children:(0,d.jsx)("pre",{...h})})]})}return(0,d.jsx)("code",{...h})};function p(e){return(0,d.jsxs)(r.Fragment,{children:[(0,d.jsx)(a.Z,{className:l.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:n=>(0,d.jsx)(_,{...e,...n})}}),(0,d.jsx)(c,{path:e.path})]})}},5778:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>a});const r={components:{19:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{onChange:function(e,n){console.log("---\x3e",e,n)}})),n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{format:"HH:mm",precision:"minute"})),n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{format:"HH",precision:"hour"})))}}(),45:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){var e=new Date(2018,1,24,4,5,35);return n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{value:e})),n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{value:e,format:"HH:mm",precision:"minute"})),n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{value:e,format:"HH",precision:"hour"})))}}(),70:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){var e=new Date(2018,1,24,4,5,35);return n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{size:"small",value:e})),n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{value:e,format:"HH",precision:"hour"})),n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{size:"large",value:e,format:"HH:mm",precision:"minute"})))}}(),97:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement("div",null,n.default.createElement(r.Form,{onSubmit:function(e){var t=e.initial,i=e.current;console.log("--\x3e>",t,i),i.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(formatter("HH:mm:ss",i.date))}):r.Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:n.default.createElement("span",null,"\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a",n.default.createElement("b",null,"\u7a7a"),"\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01")})},fields:{date:{labelClassName:"fieldLabel",labelFor:"date-inline",children:n.default.createElement(r.TimePicker,null)}}},(function(e){var t=e.fields,i=(e.state,e.canSubmit);return n.default.createElement(r.Row,{gutter:10},n.default.createElement(r.Col,{style:{width:200},fixed:!0},t.date),n.default.createElement(r.Col,null,n.default.createElement(r.Button,{disabled:!i(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4")))})))}}(),146:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement(r.Row,{gutter:10,style:{maxWidth:360}},n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{disabledMinutes:function(e,n){if(e%15!==0)return!0},disabledHours:function(e,n,t){if(e<3)return!0}})),n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{disabled:!0,value:new Date(2018,1,24,4,5,35)})))}}(),179:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement(r.Row,{gutter:10,style:{maxWidth:360}},n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{hideDisabled:!0,disabledMinutes:function(e,n){if(e%15!==0)return!0},disabledHours:function(e,n,t){if(e<3)return!0}})))}}(),210:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement(r.Row,{gutter:10,style:{maxWidth:360}},n.default.createElement(r.Col,{style:{width:200},fixed:!0},n.default.createElement(r.TimePicker,{hideDisabled:!0,disabledMinutes:function(e,n){if(e%15!==0)return!0},disabledSeconds:function(e,n){if(e%15!==0)return!0}})))}}()},data:{19:{name:19,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 }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n    gutter: 10\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    onChange: function onChange(formatDate, date) {\n      console.log(\'---\x3e\', formatDate, date);\n    }\n  })), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    format: "HH:mm",\n    precision: "minute"\n  })), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    format: "HH",\n    precision: "hour"\n  })));\n};\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { TimePicker, Row, Col } from \'uiw\';\n\nconst Demo = () => (\n  <Row gutter={10}>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker\n        onChange={(formatDate, date) => {\n          console.log(\'---\x3e\', formatDate, date);\n        }}\n      />\n    </Col>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker format="HH:mm" precision="minute" />\n    </Col>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker format="HH" precision="hour" />\n    </Col>\n  </Row>\n)\nexport default Demo;'},45:{name:45,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 }; }\nvar Demo = function Demo() {\n  var value = new Date(2018, 1, 24, 4, 5, 35);\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n    gutter: 10\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    value: value\n  })), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    value: value,\n    format: "HH:mm",\n    precision: "minute"\n  })), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    value: value,\n    format: "HH",\n    precision: "hour"\n  })));\n};\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { TimePicker, Row, Col } from \'uiw\';\n\nconst Demo = () => {\n  const value = new Date(2018, 1, 24, 4,5,35);\n  return (\n    <Row gutter={10}>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker value={value} />\n      </Col>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker value={value} format="HH:mm" precision="minute" />\n      </Col>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker value={value} format="HH" precision="hour" />\n      </Col>\n    </Row>\n  )\n}\nexport default Demo;'},70:{name:70,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 }; }\nvar Demo = function Demo() {\n  var value = new Date(2018, 1, 24, 4, 5, 35);\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n    gutter: 10\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    size: "small",\n    value: value\n  })), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    value: value,\n    format: "HH",\n    precision: "hour"\n  })), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    size: "large",\n    value: value,\n    format: "HH:mm",\n    precision: "minute"\n  })));\n};\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { TimePicker, Row, Col } from \'uiw\';\n\nconst Demo = () => {\n  const value = new Date(2018, 1, 24, 4,5,35);\n  return (\n    <Row gutter={10}>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker size="small" value={value} />\n      </Col>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker value={value} format="HH" precision="hour" />\n      </Col>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker size="large" value={value} format="HH:mm" precision="minute" />\n      </Col>\n    </Row>\n  )\n}\nexport default Demo;'},97:{name:97,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 }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n    onSubmit: function onSubmit(_ref) {\n      var initial = _ref.initial,\n        current = _ref.current;\n      console.log(\'--\x3e>\', initial, 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(formatter(\'HH:mm:ss\', current.date))\n        });\n      } else {\n        _uiw.Notify.error({\n          title: \'\u63d0\u4ea4\u5931\u8d25\uff01\',\n          description: /*#__PURE__*/_react["default"].createElement("span", null, "\\u8868\\u5355\\u63D0\\u4EA4\\u65F6\\u95F4\\u6210\\u529F\\uFF0C\\u65F6\\u95F4\\u4E3A\\uFF1A", /*#__PURE__*/_react["default"].createElement("b", null, "\\u7A7A"), "\\uFF0C\\u5C06\\u81EA\\u52A8\\u586B\\u5145\\u521D\\u59CB\\u5316\\u503C\\uFF01")\n        });\n      }\n    },\n    fields: {\n      date: {\n        labelClassName: \'fieldLabel\',\n        labelFor: \'date-inline\',\n        children: /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, null)\n      }\n    }\n  }, function (_ref2) {\n    var fields = _ref2.fields,\n      state = _ref2.state,\n      canSubmit = _ref2.canSubmit;\n    return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n      gutter: 10\n    }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n      style: {\n        width: 200\n      },\n      fixed: true\n    }, fields.date), /*#__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")));\n  }));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { TimePicker, Notify, Row, Col, Form, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        console.log('--\x3e>', 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${formatter('HH:mm:ss', current.date)}`,\n          });\n        } else {\n          Notify.error({\n            title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n            description: <span>\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a<b>\u7a7a</b>\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01</span>,\n          });\n        }\n      }}\n      fields={{\n        date: {\n          labelClassName: 'fieldLabel',\n          labelFor: 'date-inline',\n          children: <TimePicker />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        return (\n          <Row gutter={10}>\n            <Col style={{ width: 200 }} fixed>{fields.date}</Col>\n            <Col>\n              <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n            </Col>\n          </Row>\n        )\n      }}\n    </Form>\n  </div>\n)\nexport default Demo;"},146:{name:146,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 }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n    gutter: 10,\n    style: {\n      maxWidth: 360\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    disabledMinutes: function disabledMinutes(minute, type) {\n      if (minute % 15 !== 0) {\n        return true;\n      }\n    },\n    disabledHours: function disabledHours(hour, type, date) {\n      // console.log(\'~~:\', hour, type, date);\n      if (hour < 3) {\n        return true;\n      }\n    }\n  })), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    disabled: true,\n    value: new Date(2018, 1, 24, 4, 5, 35)\n  })));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { TimePicker, Row, Col } from 'uiw';\n\nconst Demo = () => (\n  <Row gutter={10} style={{ maxWidth: 360 }}>\n      <Col style={{ width: 200 }} fixed>\n      <TimePicker\n        disabledMinutes={(minute, type) => {\n          if (minute % 15 !== 0) {\n            return true;\n          }\n        }}\n        disabledHours={(hour, type, date) => {\n          // console.log('~~:', hour, type, date);\n          if (hour < 3) {\n            return true;\n          }\n        }}\n      />\n    </Col>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker disabled value={new Date(2018, 1, 24, 4,5,35)} />\n    </Col>\n  </Row>\n)\nexport default Demo;"},179:{name:179,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 }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n    gutter: 10,\n    style: {\n      maxWidth: 360\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    hideDisabled: true,\n    disabledMinutes: function disabledMinutes(minute, type) {\n      if (minute % 15 !== 0) {\n        return true;\n      }\n    },\n    disabledHours: function disabledHours(hour, type, date) {\n      // console.log(\'~~:\', hour, type, date);\n      if (hour < 3) {\n        return true;\n      }\n    }\n  })));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { TimePicker, Row, Col } from 'uiw';\n\nconst Demo = () => (\n  <Row gutter={10} style={{ maxWidth: 360 }}>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker\n        hideDisabled\n        disabledMinutes={(minute, type) => {\n          if (minute % 15 !== 0) {\n            return true;\n          }\n        }}\n        disabledHours={(hour, type, date) => {\n          // console.log('~~:', hour, type, date);\n          if (hour < 3) {\n            return true;\n          }\n        }}\n      />\n    </Col>\n  </Row>\n)\nexport default Demo;"},210:{name:210,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 }; }\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n    gutter: 10,\n    style: {\n      maxWidth: 360\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n    style: {\n      width: 200\n    },\n    fixed: true\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.TimePicker, {\n    hideDisabled: true,\n    disabledMinutes: function disabledMinutes(minute, date) {\n      if (minute % 15 !== 0) {\n        return true;\n      }\n    },\n    disabledSeconds: function disabledSeconds(second, date) {\n      if (second % 15 !== 0) {\n        return true;\n      }\n    }\n  })));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { TimePicker, Row, Col } from 'uiw';\n\nconst Demo = () => (\n  <Row gutter={10} style={{ maxWidth: 360 }}>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker\n        hideDisabled\n        disabledMinutes={(minute, date) => {\n          if (minute % 15 !== 0) {\n            return true;\n          }\n        }}\n        disabledSeconds={(second, date) => {\n          if (second % 15 !== 0) {\n            return true;\n          }\n        }}\n      />\n    </Col>\n  </Row>\n)\nexport default Demo;"}},source:"TimePicker \u65f6\u95f4\u9009\u62e9\u5668\n===\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-time-picker/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-time-picker.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-time-picker)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-time-picker.svg?label=@uiw/react-time-picker)](https://npmjs.com/@uiw/react-time-picker)\n\n\u5f53\u7528\u6237\u9700\u8981\u8f93\u5165\u4e00\u4e2a\u65f6\u95f4\uff0c\u53ef\u4ee5\u70b9\u51fb\u6807\u51c6\u8f93\u5165\u6846\uff0c\u5f39\u51fa\u65f6\u95f4\u9762\u677f\u8fdb\u884c\u9009\u62e9\u3002\n\n```jsx\nimport { TimePicker } from 'uiw';\n// or\nimport TimePicker from '@uiw/react-time-picker';\n```\n\n## \u57fa\u7840\u7528\u6cd5\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { TimePicker, Row, Col } from 'uiw';\n\nconst Demo = () => (\n  <Row gutter={10}>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker\n        onChange={(formatDate, date) => {\n          console.log('---\x3e', formatDate, date);\n        }}\n      />\n    </Col>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker format=\"HH:mm\" precision=\"minute\" />\n    </Col>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker format=\"HH\" precision=\"hour\" />\n    </Col>\n  </Row>\n)\nexport default Demo;\n```\n\n## \u8bbe\u7f6e\u521d\u59cb\u503c\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { TimePicker, Row, Col } from 'uiw';\n\nconst Demo = () => {\n  const value = new Date(2018, 1, 24, 4,5,35);\n  return (\n    <Row gutter={10}>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker value={value} />\n      </Col>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker value={value} format=\"HH:mm\" precision=\"minute\" />\n      </Col>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker value={value} format=\"HH\" precision=\"hour\" />\n      </Col>\n    </Row>\n  )\n}\nexport default Demo;\n```\n\n## \u8bbe\u7f6e\u6309\u94ae\u5927\u5c0f\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { TimePicker, Row, Col } from 'uiw';\n\nconst Demo = () => {\n  const value = new Date(2018, 1, 24, 4,5,35);\n  return (\n    <Row gutter={10}>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker size=\"small\" value={value} />\n      </Col>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker value={value} format=\"HH\" precision=\"hour\" />\n      </Col>\n      <Col style={{ width: 200 }} fixed>\n        <TimePicker size=\"large\" value={value} format=\"HH:mm\" precision=\"minute\" />\n      </Col>\n    </Row>\n  )\n}\nexport default Demo;\n```\n\n## \u8868\u5355\u4e2d\u5e94\u7528\n\n\u5728\u8868\u5355\u8fd4\u56de\u7684\u6570\u636e\uff0c\u5e76\u6ca1\u6709\u5c06 `format` \u683c\u5f0f\u5316\u540e\u7684\u6570\u636e\u8fd4\u56de\u7ed9\u4f60\uff0c\u800c\u662f\u8fd4\u56de\u7684\u4e00\u4e2a `Date`\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7 [`formatter`](#/components/formatter) \u91cd\u65b0\u683c\u5f0f\u5316\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { TimePicker, Notify, Row, Col, Form, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        console.log('--\x3e>', 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${formatter('HH:mm:ss', current.date)}`,\n          });\n        } else {\n          Notify.error({\n            title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n            description: <span>\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a<b>\u7a7a</b>\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01</span>,\n          });\n        }\n      }}\n      fields={{\n        date: {\n          labelClassName: 'fieldLabel',\n          labelFor: 'date-inline',\n          children: <TimePicker />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        return (\n          <Row gutter={10}>\n            <Col style={{ width: 200 }} fixed>{fields.date}</Col>\n            <Col>\n              <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n            </Col>\n          </Row>\n        )\n      }}\n    </Form>\n  </div>\n)\nexport default Demo;\n```\n\n## \u7981\u7528\n\n\u53ef\u4ee5\u4f7f\u7528 `disabledHours` `disabledMinutes` `disabledSeconds` \u7981\u7528\u90e8\u5206\u65f6\u95f4\u9009\u62e9\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { TimePicker, Row, Col } from 'uiw';\n\nconst Demo = () => (\n  <Row gutter={10} style={{ maxWidth: 360 }}>\n      <Col style={{ width: 200 }} fixed>\n      <TimePicker\n        disabledMinutes={(minute, type) => {\n          if (minute % 15 !== 0) {\n            return true;\n          }\n        }}\n        disabledHours={(hour, type, date) => {\n          // console.log('~~:', hour, type, date);\n          if (hour < 3) {\n            return true;\n          }\n        }}\n      />\n    </Col>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker disabled value={new Date(2018, 1, 24, 4,5,35)} />\n    </Col>\n  </Row>\n)\nexport default Demo;\n```\n\n## \u4e0d\u663e\u793a\u7981\u7528\n\n\u53ef\u4ee5\u4f7f\u7528 `hideDisabled` \u5c06\u7981\u7528\u7684\u90e8\u5206\u65f6\u95f4\u9690\u85cf\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { TimePicker, Row, Col } from 'uiw';\n\nconst Demo = () => (\n  <Row gutter={10} style={{ maxWidth: 360 }}>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker\n        hideDisabled\n        disabledMinutes={(minute, type) => {\n          if (minute % 15 !== 0) {\n            return true;\n          }\n        }}\n        disabledHours={(hour, type, date) => {\n          // console.log('~~:', hour, type, date);\n          if (hour < 3) {\n            return true;\n          }\n        }}\n      />\n    </Col>\n  </Row>\n)\nexport default Demo;\n```\n\n## \u95f4\u9694\u65f6\u95f4\n\n\u53ef\u4ee5\u4f7f\u7528 `hideDisabled` \u5c06\u7981\u7528\u7684\u90e8\u5206\u65f6\u95f4\u9690\u85cf\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { TimePicker, Row, Col } from 'uiw';\n\nconst Demo = () => (\n  <Row gutter={10} style={{ maxWidth: 360 }}>\n    <Col style={{ width: 200 }} fixed>\n      <TimePicker\n        hideDisabled\n        disabledMinutes={(minute, date) => {\n          if (minute % 15 !== 0) {\n            return true;\n          }\n        }}\n        disabledSeconds={(second, date) => {\n          if (second % 15 !== 0) {\n            return true;\n          }\n        }}\n      />\n    </Col>\n  </Row>\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| format | \u683c\u5f0f\u5316\u65f6\u95f4\uff0c\u89c4\u5219\u67e5\u770b [`formatter`](#/components/formatter) \u6587\u6863 | Function | `HH:mm:ss` |\n| precision | \u9009\u62e9\u65f6\u95f4\u7cbe\u786e\u5ea6 | Enum{`hour`, `minute`, `second`} | `false` |\n| disabled | \u7981\u7528\u5168\u90e8\u64cd\u4f5c | Boolean | `false` |\n| disabledHours | \u7981\u6b62\u9009\u62e9\u90e8\u5206\u5c0f\u65f6\u9009\u9879 | Function(hour, <br/>type{`Hours`, `Minutes`, `Seconds`}, <br/>selectedDate) | - |\n| disabledMinutes | \u7981\u6b62\u9009\u62e9\u90e8\u5206\u5206\u949f\u9009\u9879 | Function(minute, <br/>type{`Hours`, `Minutes`, `Seconds`}, <br/>selectedDate) | - |\n| disabledSeconds | \u7981\u6b62\u9009\u62e9\u90e8\u5206\u79d2\u9009\u9879 | Function(second, <br/>type{`Hours`, `Minutes`, `Seconds`}, <br/>selectedDate) | - |\n| hideDisabled | \u4e0d\u53ef\u9009\u62e9\u7684\u9879\u9690\u85cf | Boolean | `false` |\n| onChange | \u65f6\u95f4\u9009\u62e9\u7684\u56de\u8c03\u51fd\u6570 | Function(formatDate, Date, <br/>type{`Hours`, `Minutes`, `Seconds`}, <br/>, num, disableds) | - |\n\n`uiw@3.3.0+` \u7ec4\u4ef6\u96c6\u6210\u90e8\u5206 Input\uff0c\u4e0d\u518d\u901a\u8fc7 inputProps \u5c5e\u6027\u4f20\u503c\uff0c\u66f4\u591a\u5c5e\u6027\u8bf7\u53c2\u8003 [Input](#/components/input)\n\n## ~~Props.inputProps~~\n\n`uiw@3.3.0+` \u5c06\u4e0d\u652f\u6301\u6b64\u5c5e\u6027\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| ~~inputProps~~ | ~~\u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Input>`](#/components/input) \u7ec4\u4ef6~~ | `Object` | - |\n\n## Props.popoverProps\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| popoverProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Popover>`](#/components/popover) \u7ec4\u4ef6 | `Object` | - |\n",headings:[],headingsList:[]};var i=t(5301),o=t(4760);function a(){return(0,o.jsx)(i.Z,{...r,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-time-picker/README.md"})}}}]);
//# sourceMappingURL=3492.6a34d6ab.chunk.js.map