uxcore.js - React UI Component Set

组件演示

[{"title":"基本","id":"components-calendar-demo-basic","tags":[],"filepath":"site/components/calendar/demo/basic.md","directory":"components/calendar/demo","filename":"basic","meta":{"title":"基本","description":"\n最简单的用法。\n","order":"0","filepath":"site/components/calendar/demo/basic.md","filename":"basic","directory":"components/calendar/demo","id":"components-calendar-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: '2016-01-02'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.Calendar, { locale: 'en-us', value: this.state.value, onSelect: this.onSelect.bind(this) });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '2016-01-02',\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n render() {\n return <Calendar locale=\"en-us\" value={this.state.value} onSelect={this.onSelect.bind(this)} />;\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"尺寸","id":"components-calendar-demo-size","tags":[],"filepath":"site/components/calendar/demo/size.md","directory":"components/calendar/demo","filename":"size","meta":{"title":"尺寸","description":"\n提供 large、middle、small 三种尺寸\n","order":"1","filepath":"site/components/calendar/demo/size.md","filename":"size","directory":"components/calendar/demo","id":"components-calendar-demo-size","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: '2016-01-02'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var calendar = React.createElement(_uxcore.Calendar, { value: this.state.value, onSelect: this.onSelect.bind(this) });\n return React.createElement(\n 'div',\n null,\n ['large', 'middle', 'small'].map(function (size) {\n return React.createElement(\n 'div',\n { style: { marginBottom: '4px' } },\n React.cloneElement(calendar, { size: size })\n );\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-size'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '2016-01-02',\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n render() {\n const calendar = (\n <Calendar value={this.state.value} onSelect={this.onSelect.bind(this)} />\n );\n return (\n <div>\n {['large', 'middle', 'small'].map(size => (\n <div style={{ marginBottom: '4px' }}>\n {React.cloneElement(calendar, { size })}\n </div>\n ))}\n </div>\n );\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-size'));</code></pre></div>"},"status":"public","toc":""},{"title":"日期格式","id":"components-calendar-demo-formatter","tags":[],"filepath":"site/components/calendar/demo/formatter.md","directory":"components/calendar/demo","filename":"formatter","meta":{"title":"日期格式","description":"\n使用 <code>format</code> 属性，可以自定义你需要的日期显示格式，如 <code>yyyy/MM/dd</code>。\n","order":"1","filepath":"site/components/calendar/demo/formatter.md","filename":"formatter","directory":"components/calendar/demo","id":"components-calendar-demo-formatter","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: '2016-01-02'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.Calendar, { value: this.state.value, format: 'yyyy/MM/dd', onSelect: this.onSelect.bind(this) });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-formatter'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '2016-01-02',\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n render() {\n return <Calendar value={this.state.value} format=\"yyyy/MM/dd\" onSelect={this.onSelect.bind(this)} />;\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-formatter'));</code></pre></div>"},"status":"public","toc":""},{"title":"不可选区间","id":"components-calendar-demo-range","tags":[],"filepath":"site/components/calendar/demo/range.md","directory":"components/calendar/demo","filename":"range","meta":{"title":"不可选区间","description":"\n设置 <code>disabledDate</code> 方法，来确定不可选时段。\n如上例：不可选择今天之后的日期。\n","order":"3","filepath":"site/components/calendar/demo/range.md","filename":"range","directory":"components/calendar/demo","id":"components-calendar-demo-range","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nfunction disabledDate(current, value) {\n return current.getTime() > Date.now();\n}\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: new Date().getTime()\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.Calendar, { disabledDate: disabledDate, value: this.state.value, onSelect: this.onSelect.bind(this) });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-range'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\nfunction disabledDate(current, value) {\n return current.getTime() > Date.now();\n}\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: new Date().getTime(),\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n render() {\n return <Calendar disabledDate={disabledDate} value={this.state.value} onSelect={this.onSelect.bind(this)} />;\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-range'));</code></pre></div>"},"status":"public","toc":""},{"title":"快速区间选择","id":"components-calendar-demo-quickrange","tags":[],"filepath":"site/components/calendar/demo/quickrange.md","directory":"components/calendar/demo","filename":"quickrange","meta":{"title":"快速区间选择","description":"\n","order":"4","filepath":"site/components/calendar/demo/quickrange.md","filename":"quickrange","directory":"components/calendar/demo","id":"components-calendar-demo-quickrange","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar RangeCalendar = _uxcore.Calendar.RangeCalendar;\n\n\nfunction disabledDate(current, value) {\n return current.getTime() > Date.now();\n}\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n rangeValue: null\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onRangeSelect',\n value: function onRangeSelect(value) {\n this.setState({\n rangeValue: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n null,\n React.createElement(RangeCalendar, {\n value: this.state.rangeValue,\n quickSelectRanges: [{\n text: '19年1、2月份',\n value: {\n start: '2019-01',\n end: '2019-02'\n }\n }, {\n text: '18年S2',\n value: {\n start: '2018-09',\n end: '2019-03'\n }\n }],\n onSelect: function onSelect(v, formatted) {\n _this2.onRangeSelect(v, formatted);\n }\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-quickrange'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\nconst { RangeCalendar } = Calendar;\n\nfunction disabledDate(current, value) {\n return current.getTime() > Date.now();\n}\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rangeValue: null,\n };\n }\n onRangeSelect(value) {\n this.setState({\n rangeValue: value,\n });\n }\n render() {\n return (\n <div>\n <RangeCalendar\n value={this.state.rangeValue}\n quickSelectRanges={[\n {\n text: '19年1、2月份',\n value: {\n start: '2019-01',\n end: '2019-02'\n }\n },\n {\n text: '18年S2',\n value: {\n start: '2018-09',\n end: '2019-03'\n }\n }\n ]}\n onSelect={(v, formatted) => {\n this.onRangeSelect(v, formatted);\n }}\n />\n </div>\n )\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-quickrange'));</code></pre></div>"},"status":"public","toc":""},{"title":"时间选择","id":"components-calendar-demo-time","tags":[],"filepath":"site/components/calendar/demo/time.md","directory":"components/calendar/demo","filename":"time","meta":{"title":"时间选择","description":"\n准确到秒的时间选择面板。\n","order":"4","filepath":"site/components/calendar/demo/time.md","filename":"time","directory":"components/calendar/demo","id":"components-calendar-demo-time","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: '2016-01-02'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.Calendar, { hasTrigger: true, showTime: true, format: 'yyyy-MM-dd HH:mm:ss', value: this.state.value, onSelect: this.onSelect.bind(this) });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-time'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '2016-01-02',\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n render() {\n return <Calendar hasTrigger showTime format=\"yyyy-MM-dd HH:mm:ss\" value={this.state.value} onSelect={this.onSelect.bind(this)} />;\n }\n\n}\n\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-time'));</code></pre></div>"},"status":"public","toc":""},{"title":"月份面板","id":"components-calendar-demo-month","tags":[],"filepath":"site/components/calendar/demo/month.md","directory":"components/calendar/demo","filename":"month","meta":{"title":"月份面板","description":"\n直接显示月份面板。\n","order":"6","filepath":"site/components/calendar/demo/month.md","filename":"month","directory":"components/calendar/demo","id":"components-calendar-demo-month","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar MonthCalendar = _uxcore.Calendar.MonthCalendar;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: '2016-01-02'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(MonthCalendar, { value: this.state.value, onSelect: this.onSelect.bind(this) });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-month'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\nconst MonthCalendar = Calendar.MonthCalendar;\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '2016-01-02',\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n render() {\n return <MonthCalendar value={this.state.value} onSelect={this.onSelect.bind(this)} />;\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-month'));</code></pre></div>"},"status":"public","toc":""},{"title":"年份面板","id":"components-calendar-demo-year","tags":[],"filepath":"site/components/calendar/demo/year.md","directory":"components/calendar/demo","filename":"year","meta":{"title":"年份面板","description":"\n直接显示年份面板。\n","order":"7","filepath":"site/components/calendar/demo/year.md","filename":"year","directory":"components/calendar/demo","id":"components-calendar-demo-year","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar YearCalendar = _uxcore.Calendar.YearCalendar;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: '2016-01-02'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(YearCalendar, { value: this.state.value, onSelect: this.onSelect.bind(this) });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-year'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\nconst YearCalendar = Calendar.YearCalendar;\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '2016-01-02',\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n render() {\n return <YearCalendar value={this.state.value} onSelect={this.onSelect.bind(this)} />;\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-year'));</code></pre></div>"},"status":"public","toc":""},{"title":"显示日期和日程","id":"components-calendar-demo-schedule","tags":[],"filepath":"site/components/calendar/demo/schedule.md","directory":"components/calendar/demo","filename":"schedule","meta":{"title":"显示日期和日程","description":"\nCalendar 通过开放 contentRender 参数来完成日期渲染上的定制，并提供了一个默认的渲染函数 Calendar.util.generateContentRender(code) 来完成通用定制。\n","order":"8","filepath":"site/components/calendar/demo/schedule.md","filename":"schedule","directory":"components/calendar/demo","id":"components-calendar-demo-schedule","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: '2016-01-02'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.Calendar, { value: this.state.value,\n onSelect: this.onSelect.bind(this), contentRender: _uxcore.Calendar.util.generateContentRender({\n '2016-01-07': 'leave',\n '2016-01-09': 'work',\n '2016-01-08': 'schedule'\n }, 'en')\n });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-schedule'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '2016-01-02',\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n render() {\n return (<Calendar value={this.state.value}\n onSelect={this.onSelect.bind(this)} contentRender={Calendar.util.generateContentRender({\n '2016-01-07': 'leave',\n '2016-01-09': 'work',\n '2016-01-08': 'schedule',\n }, 'en')}\n />);\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-schedule'));</code></pre></div>"},"status":"public","toc":""},{"title":"显示输入","id":"components-calendar-demo-dateinput","tags":[],"filepath":"site/components/calendar/demo/dateinput.md","directory":"components/calendar/demo","filename":"dateinput","meta":{"title":"显示输入","description":"\n可以在输入框中直接修改时间。\n","order":"9","filepath":"site/components/calendar/demo/dateinput.md","filename":"dateinput","directory":"components/calendar/demo","id":"components-calendar-demo-dateinput","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: '2016-01-02'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.Calendar, { locale: 'en-us', value: this.state.value, onSelect: this.onSelect.bind(this), showDateInput: true });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-dateinput'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '2016-01-02',\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n render() {\n return <Calendar locale=\"en-us\" value={this.state.value} onSelect={this.onSelect.bind(this)} showDateInput />;\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-dateinput'));</code></pre></div>"},"status":"public","toc":""},{"title":"大日历","id":"components-calendar-demo-calendarfull","tags":[],"filepath":"site/components/calendar/demo/calendarfull.md","directory":"components/calendar/demo","filename":"calendarfull","meta":{"title":"大日历","description":"\n大日历日期选择,跨日程，提供Calendar.util.generateScheduleContent方法，返回具体日程的相关信息。\n","order":"10","filepath":"site/components/calendar/demo/calendarfull.md","filename":"calendarfull","directory":"components/calendar/demo","id":"components-calendar-demo-calendarfull","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar CalendarFull = _uxcore.Calendar.CalendarFull;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: '2018-12-02'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var events = [{\n start: '2018-12-24 14:00', // 事件开始时间\n end: '2018-12-24 16:00', // 事件结束时间\n important: true,\n // 事件的渲染函数\n render: function render() {\n return React.createElement(\n 'div',\n null,\n '24'\n );\n }\n }, {\n start: '2018-12-24 14:00', // 事件开始时间\n end: '2018-12-25 16:00', // 事件结束时间\n important: true,\n // 事件的渲染函数\n render: function render() {\n return React.createElement(\n 'div',\n null,\n '24'\n );\n }\n }, {\n start: '2018-12-23 14:00', // 事件开始时间\n end: '2018-12-27 16:00', // 事件结束时间\n // 事件的渲染函数\n render: function render() {\n return React.createElement(\n 'div',\n null,\n '21-29'\n );\n }\n }];\n return React.createElement(CalendarFull, {\n value: this.state.value,\n onSelect: this.onSelect,\n fullscreen: true,\n type: 'month',\n locale: 'zh-cn',\n format: 'yyyy/MM/dd',\n scheduleRender: _uxcore.Calendar.fullUtil.generateScheduleContent(events),\n startHour: 8,\n endHour: 18,\n step: 60\n });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-calendarfull'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\nconst { CalendarFull } = Calendar\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '2018-12-02',\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n render() {\n const events = [\n {\n start: '2018-12-24 14:00', // 事件开始时间\n end: '2018-12-24 16:00', // 事件结束时间\n important: true,\n // 事件的渲染函数\n render: () => <div>24</div>,\n },\n {\n start: '2018-12-24 14:00', // 事件开始时间\n end: '2018-12-25 16:00', // 事件结束时间\n important: true,\n // 事件的渲染函数\n render: () => <div>24</div>,\n },\n {\n start: '2018-12-23 14:00', // 事件开始时间\n end: '2018-12-27 16:00', // 事件结束时间\n // 事件的渲染函数\n render: () => <div>21-29</div>,\n }\n ]\n return (\n <CalendarFull\n value={this.state.value}\n onSelect={this.onSelect}\n fullscreen\n type=\"month\"\n locale=\"zh-cn\"\n format=\"yyyy/MM/dd\"\n scheduleRender={Calendar.fullUtil.generateScheduleContent(events)}\n startHour={8}\n endHour={18}\n step={60}\n />\n )\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-calendarfull'));</code></pre></div>"},"status":"public","toc":""},{"title":"级联","id":"components-calendar-demo-cascade","tags":[],"filepath":"site/components/calendar/demo/cascade.md","directory":"components/calendar/demo","filename":"cascade","meta":{"title":"级联","description":"\n我们推荐在只有年月日级联选择的情况下使用此面板，对于有时间选择的情况使用 Form 中提供的双输入框级联方式。\n","order":"10","filepath":"site/components/calendar/demo/cascade.md","filename":"cascade","directory":"components/calendar/demo","id":"components-calendar-demo-cascade","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar RangeCalendar = _uxcore.Calendar.RangeCalendar;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onRangeSelect',\n value: function onRangeSelect(value) {\n this.setState({\n rangeValue: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(RangeCalendar, {\n value: this.state.rangeValue,\n onSelect: function onSelect(v, formatted) {\n console.log(v, formatted);\n _this2.onRangeSelect(v, formatted);\n }\n });\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-cascade'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\n\nconst { RangeCalendar } = Calendar;\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n onRangeSelect(value) {\n this.setState({\n rangeValue: value,\n });\n }\n\n render() {\n return (\n <RangeCalendar\n value={this.state.rangeValue}\n onSelect={(v, formatted) => {\n console.log(v, formatted);\n this.onRangeSelect(v, formatted);\n }}\n />\n );\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-cascade'));</code></pre></div>"},"status":"public","toc":""},{"title":"MiniWeek","id":"components-calendar-demo-miniweek","tags":[],"filepath":"site/components/calendar/demo/miniweek.md","directory":"components/calendar/demo","filename":"miniweek","meta":{"title":"MiniWeek","description":"\n","order":"10","filepath":"site/components/calendar/demo/miniweek.md","filename":"miniweek","directory":"components/calendar/demo","id":"components-calendar-demo-miniweek","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar MiniWeek = _uxcore.Calendar.MiniWeek;\n\n\nvar events = [{\n start: '2018-12-24 14:00', // 事件开始时间\n end: '2018-12-24 16:00', // 事件结束时间\n important: true,\n // 事件的渲染函数\n render: function render() {\n return React.createElement(\n 'div',\n null,\n '24'\n );\n }\n}, {\n start: '2018-12-24 14:00', // 事件开始时间\n end: '2018-12-25 16:00', // 事件结束时间\n important: true,\n // 事件的渲染函数\n render: function render() {\n return React.createElement(\n 'div',\n null,\n '24'\n );\n }\n}, {\n start: '2018-12-23 14:00', // 事件开始时间\n end: '2018-12-27 16:00', // 事件结束时间\n // 事件的渲染函数\n render: function render() {\n return React.createElement(\n 'div',\n null,\n '21-29'\n );\n }\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: '2018-12-02'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onSelect',\n value: function onSelect(value) {\n console.log(value);\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n null,\n React.createElement(MiniWeek, {\n value: '2018-12-24',\n locale: 'en-us',\n events: events,\n scheduleRender: this.miniWeekRender,\n getPopupContainer: function getPopupContainer() {\n return _this2.miniRender;\n }\n }),\n React.createElement('div', { className: 'miniweek-container', ref: function ref(c) {\n _this2.miniRender = c;\n } })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-calendar-demo-miniweek'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Calendar } from 'uxcore';\nconst { MiniWeek } = Calendar\n\nconst events = [\n {\n start: '2018-12-24 14:00', // 事件开始时间\n end: '2018-12-24 16:00', // 事件结束时间\n important: true,\n // 事件的渲染函数\n render: () => <div>24</div>,\n },\n {\n start: '2018-12-24 14:00', // 事件开始时间\n end: '2018-12-25 16:00', // 事件结束时间\n important: true,\n // 事件的渲染函数\n render: () => <div>24</div>,\n },\n {\n start: '2018-12-23 14:00', // 事件开始时间\n end: '2018-12-27 16:00', // 事件结束时间\n // 事件的渲染函数\n render: () => <div>21-29</div>,\n }\n]\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '2018-12-02',\n };\n }\n onSelect(value) {\n console.log(value);\n this.setState({\n value,\n });\n }\n\n render() {\n return (\n <div>\n <MiniWeek\n value=\"2018-12-24\"\n locale=\"en-us\"\n events={events}\n scheduleRender={this.miniWeekRender}\n getPopupContainer={() => this.miniRender}\n />\n <div className=\"miniweek-container\" ref={(c) => { this.miniRender = c; }} />\n </div>\n )\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-calendar-demo-miniweek'));</code></pre></div>"},"status":"public","toc":""}]

基本

最简单的用法。

import { Calendar } from 'uxcore';


class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2016-01-02',
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }
  render() {
    return <Calendar locale="en-us" value={this.state.value} onSelect={this.onSelect.bind(this)} />;
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-basic'));

尺寸

提供 large、middle、small 三种尺寸

import { Calendar } from 'uxcore';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2016-01-02',
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }
  render() {
    const calendar = (
      <Calendar value={this.state.value} onSelect={this.onSelect.bind(this)} />
        );
    return (
      <div>
        {['large', 'middle', 'small'].map(size => (
          <div style={{ marginBottom: '4px' }}>
            {React.cloneElement(calendar, { size })}
          </div>
                    ))}
      </div>
    );
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-size'));

日期格式

使用 format 属性，可以自定义你需要的日期显示格式，如 yyyy/MM/dd。

import { Calendar } from 'uxcore';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2016-01-02',
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }
  render() {
    return <Calendar value={this.state.value} format="yyyy/MM/dd" onSelect={this.onSelect.bind(this)} />;
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-formatter'));

不可选区间

设置 disabledDate 方法，来确定不可选时段。

如上例：不可选择今天之后的日期。

import { Calendar } from 'uxcore';
function disabledDate(current, value) {
  return current.getTime() > Date.now();
}

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: new Date().getTime(),
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }
  render() {
    return <Calendar disabledDate={disabledDate} value={this.state.value} onSelect={this.onSelect.bind(this)} />;
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-range'));

快速区间选择

import { Calendar } from 'uxcore';
const { RangeCalendar } = Calendar;

function disabledDate(current, value) {
  return current.getTime() > Date.now();
}

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rangeValue: null,
    };
  }
  onRangeSelect(value) {
      this.setState({
        rangeValue: value,
      });
  }
  render() {
    return (
      <div>
        <RangeCalendar
          value={this.state.rangeValue}
          quickSelectRanges={[
            {
              text: '19年1、2月份',
              value: {
                start: '2019-01',
                end: '2019-02'
              }
            },
            {
              text: '18年S2',
              value: {
                start: '2018-09',
                end: '2019-03'
              }
            }
          ]}
          onSelect={(v, formatted) => {
            this.onRangeSelect(v, formatted);
          }}
        />
      </div>
    )
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-quickrange'));

时间选择

准确到秒的时间选择面板。

import { Calendar } from 'uxcore';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2016-01-02',
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }
  render() {
    return <Calendar hasTrigger showTime format="yyyy-MM-dd HH:mm:ss" value={this.state.value} onSelect={this.onSelect.bind(this)} />;
  }

}


ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-time'));

月份面板

直接显示月份面板。

import { Calendar } from 'uxcore';
const MonthCalendar = Calendar.MonthCalendar;


class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2016-01-02',
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }
  render() {
    return <MonthCalendar value={this.state.value} onSelect={this.onSelect.bind(this)} />;
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-month'));

年份面板

直接显示年份面板。

import { Calendar } from 'uxcore';
const YearCalendar = Calendar.YearCalendar;


class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2016-01-02',
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }
  render() {
    return <YearCalendar value={this.state.value} onSelect={this.onSelect.bind(this)} />;
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-year'));

显示日期和日程

Calendar 通过开放 contentRender 参数来完成日期渲染上的定制，并提供了一个默认的渲染函数 Calendar.util.generateContentRender(code) 来完成通用定制。

import { Calendar } from 'uxcore';


class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2016-01-02',
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }
  render() {
    return (<Calendar value={this.state.value}
      onSelect={this.onSelect.bind(this)} contentRender={Calendar.util.generateContentRender({
        '2016-01-07': 'leave',
        '2016-01-09': 'work',
        '2016-01-08': 'schedule',
      }, 'en')}
    />);
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-schedule'));

显示输入

可以在输入框中直接修改时间。

import { Calendar } from 'uxcore';


class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2016-01-02',
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }
  render() {
    return <Calendar locale="en-us" value={this.state.value} onSelect={this.onSelect.bind(this)} showDateInput />;
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-dateinput'));

大日历

大日历日期选择,跨日程，提供Calendar.util.generateScheduleContent方法，返回具体日程的相关信息。

import { Calendar } from 'uxcore';
const { CalendarFull } = Calendar

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2018-12-02',
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }
  render() {
    const events = [
     {
       start: '2018-12-24 14:00', // 事件开始时间
       end: '2018-12-24 16:00', // 事件结束时间
       important: true,
       // 事件的渲染函数
       render: () => <div>24</div>,
     },
     {
       start: '2018-12-24 14:00', // 事件开始时间
       end: '2018-12-25 16:00', // 事件结束时间
       important: true,
       // 事件的渲染函数
       render: () => <div>24</div>,
     },
     {
       start: '2018-12-23 14:00', // 事件开始时间
       end: '2018-12-27 16:00', // 事件结束时间
       // 事件的渲染函数
       render: () => <div>21-29</div>,
     }
   ]
    return (
      <CalendarFull
        value={this.state.value}
        onSelect={this.onSelect}
        fullscreen
        type="month"
        locale="zh-cn"
        format="yyyy/MM/dd"
        scheduleRender={Calendar.fullUtil.generateScheduleContent(events)}
        startHour={8}
        endHour={18}
        step={60}
      />
    )
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-calendarfull'));

级联

我们推荐在只有年月日级联选择的情况下使用此面板，对于有时间选择的情况使用 Form 中提供的双输入框级联方式。

import { Calendar } from 'uxcore';

const { RangeCalendar } = Calendar;


class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onRangeSelect(value) {
    this.setState({
      rangeValue: value,
    });
  }

  render() {
    return (
      <RangeCalendar
        value={this.state.rangeValue}
        onSelect={(v, formatted) => {
          console.log(v, formatted);
          this.onRangeSelect(v, formatted);
        }}
      />
    );
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-cascade'));

MiniWeek

import { Calendar } from 'uxcore';
const { MiniWeek } = Calendar

const events = [
  {
    start: '2018-12-24 14:00', // 事件开始时间
    end: '2018-12-24 16:00', // 事件结束时间
    important: true,
    // 事件的渲染函数
    render: () => <div>24</div>,
  },
  {
    start: '2018-12-24 14:00', // 事件开始时间
    end: '2018-12-25 16:00', // 事件结束时间
    important: true,
    // 事件的渲染函数
    render: () => <div>24</div>,
  },
  {
    start: '2018-12-23 14:00', // 事件开始时间
    end: '2018-12-27 16:00', // 事件结束时间
    // 事件的渲染函数
    render: () => <div>21-29</div>,
  }
]
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2018-12-02',
    };
  }
  onSelect(value) {
    console.log(value);
    this.setState({
      value,
    });
  }

  render() {
    return (
      <div>
        <MiniWeek
          value="2018-12-24"
          locale="en-us"
          events={events}
          scheduleRender={this.miniWeekRender}
          getPopupContainer={() => this.miniRender}
        />
        <div className="miniweek-container" ref={(c) => { this.miniRender = c; }} />
      </div>
    )
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('components-calendar-demo-miniweek'));

输入或选择日期/时间的控件。

何时使用

当用户需要输入一个日期/时间，可以点击标准输入框，弹出日期面板进行选择。支持键盘操作。

const Calendar = require('uxcore-calendar');
ReactDOM.render(
  (<Calendar />),
  document.getElementById('target')
);

Attention

0.8.0 之后，我们使用 moment 替代了 gregorianCalendar，在一些格式上和用法上有了一些变化。

共通 Props

参数	说明	类型	默认值
placeholder	占位符	string	请选择日期
locale	`en-us`,`zh-cn` 和 `pl-pl`	string	`zh-cn`
disabledDate	不可选择的日期	(currentDate) => boolean	无
onSelect	当日期被选中时触发	function(date)	无
disabled	禁用	boolean	false
getPopupContainer	弹出的菜单渲染在哪个容器中	function(trigger:Node):Node	() => document.body
size	尺寸，支持 large/middle/small	string	large
allowClear	是否支持清空	boolean	true
onOpenChange	在下拉面板展开、收起时调用	function(open)	noop
defaultOpenValue	在值为空的情况下，日历面板默认展示的值	boolean

props

参数	说明	类型	默认值
value	日期	string/number	无
defaultValue	日期	string/number	无
format	展示的日期格式	string	'YYYY-MM-DD'
disabledTime	不可选择的时间，返回格式见下文	function(date)
showTime	是否显示时间选择面板	boolean	false
showHour	时间选择面板是否显示小时	boolean	true
showSecond	时间选择面板是否显示秒	boolean	true
timePicker	自己传入定制的 timePicker	React Element	-
yearSelectOffset	年选择器中第一个年份与当前选中值之间的距离，例如当前为 1997 年，距离为 50，则最早可选择年份为 1947 年	number	50
yearSelectTotal	年选择器中年份的总数，如最早可选为 1947 年，总数为 100，则可选年份范围为 1947 - 2047	number	100
renderSidebar	sidebar	React Element	() => React.Node
renderFooter	extra foot	React Element	() => React.Node

disabledTime 例子

function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function disabledTime() {
  return {
    disabledHours: () => range(0, 24).splice(4, 20),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => [55, 56],
  };
}

MonthCalendar Props

参数	说明	类型	默认值
value	日期	string/number	无
defaultValue	日期	string/number	无
format	展示的日期格式	string	'yyyy-MM'
allowedMonthRange	允许的月份范围,与disableDate互斥	object

YearCalendar Props

参数	说明	类型	默认值
value	日期	string/number	无
defaultValue	日期	string/number	无
format	展示的日期格式	string	'yyyy'

RangeCalendar Props

参数基本与 Calendar 相同

参数	说明	类型	默认值
value	日期	array	无
defaultValue	日期	array	无
quickSelectRanges	快捷日期选择	array	无

RangeCalendar 例子

<RangeCalendar
    size="large"
    value={rangeValue}
    quickSelectRanges={[
        {
            text: '19年1、2月份',
            value: {
                start: '2019-01',
                end: '2019-02'
            }
        },
        {
            text: '18年S2',
            value: {
                start: '2018-09',
                end: '2019-03'
            }
        }
    ]}
    onSelect={(v, formatted) => {
      this.onRangeSelect(v, formatted);
    }}
/>

CalendarFull props

参数	说明	类型	可选值	默认值
value	日期	string/number	无
defaultValue	默认日期	string/number
type	类型	string	time/week/month	'time'
startHour	面板开始时间（小时）	number		9
endHour	面板结束时间（小时）	number		23
step	面板间隔时间(分钟)	number		60
format	展示的日期格式	string	'YYYY-MM-DD'
disabledTime	不可选择的时间段，返回格式见下文	function(date)
disabledDate	不可选择的时间日期	function(date)
showHeader	是否显示头部	boolean	true
onSelect	当面板日期被选中时触发	function(date)
onTypeChange	当切换面板类型时触发	function()
weekRender	周视图面板中每个格子的渲染函数	function(current,formatDate)
dateRender	月视图面板中每个格子的渲染函数	function(current,formatDate)
timeRender	日视图面板中每个格子的渲染函数	function(current,formatDate)
headerComponent	头部自定义组件	React Element
headerRender	头部自定义渲染函数	function(current,type)
scheduleRender	渲染面板中的函数，可以跨日程显示详情	Calendar.util.generateScheduleContent(events)
getPopupContainer	指定渲染日程的容器	function

MiniWeek props

参数	说明	类型	可选值	默认值
locale	中英文	string	zh-cn/en	zh-cn
events	渲染的日程事件	array		[]
scheduleRender	用来渲染具体日程下的事件	function(dateInfo)

CalendarFull 例子

//events.js
const events =  [
  {
    start: '2018-10-24 13:00', // 事件开始时间
    end: '2018-10-31 23:00', // 事件结束时间
    // 事件的回调函数
    render: ({current,startHour,endHour,step,type}) => {}
  },
];
<CalendarFull
  value={this.state.value}
  onSelect={this.onSelect}
  type="month"
  locale="zh-cn"
  format="yyyy/MM/dd"
  scheduleRender={Calendar.util.generateScheduleContent(events)}
  startHour={12}
  endHour={18}
  step={40}
  />

MiniWeek 例子

miniWeekRender(dateInfo){
  /**
   * 返回的dateInfo结构如下
   * {
   *   events: [],当前时间下的日程事件
   *   label: 当前时间是星期几
   *   value: 当前日期
   * }
  */
}

<MiniWeek
  locale="zh-cn"
  events={events}
  scheduleRender={this.miniWeekRender}
  >
  <div className="schedule-container">
    <h3>这是日程渲染事件</h3>
  </div
</MiniWeek>

 <MiniWeek
  value="2018-12-24"
  locale="en-us"
  events={events}
  scheduleRender={this.miniWeekRender}
  getPopupContainer={() => this.miniRender}
/>
<div className="miniweek-container" ref={(c) => { this.miniRender = c; }} />

util

一些辅助函数，用于某些套餐化定制

Calendar.util.generateContentRender(code, locale): 用于在日历上标注非常规的休假、上班以及日程。
- code should be an object like this {'xxxx-xx-xx': ['work/leave/schedule']}
- locale should be zh-cn or en-us
Calendar.util.generateScheduleContent(events):用于在日历中展示跨日程详情
Tips:当不确定日程详情中是否有跨日程事件时，推荐使用scheduleRender events 为对象数组，格式如下：
```
[{
start: '2018-10-16 13:00',//事件开始时间
end: '2018-10-16 14:00',//事件结束时间
//事件的回调函数
render: () => <div>10-10 </div>
}]
```