组件演示

[{"title":"基本","id":"components-calendar-demo-basic","tags":[],"filepath":"site/components/calendar/demo/basic.md","directory":"components/calendar/demo","filename":"basic","meta":{"title":"基本","description":"\n<p>最简单的用法。</p>\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\"><span class=\"hljs-keyword\">import</span> { Calendar } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: <span class=\"hljs-string\">'2016-01-02'</span>,\n };\n }\n onSelect(value) {\n <span class=\"hljs-built_in\">console</span>.log(value);\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Calendar</span> <span class=\"hljs-attribute\">locale</span>=<span class=\"hljs-value\">\"en-us\"</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{this.onSelect.bind(this)}</span> /&gt;</span>;</span>\n }\n\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-calendar-demo-basic'));</span></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<p>使用 <code>format</code> 属性,可以自定义你需要的日期显示格式,如 <code>yyyy/MM/dd</code>。</p>\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\"><span class=\"hljs-keyword\">import</span> { Calendar } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: <span class=\"hljs-string\">'2016-01-02'</span>,\n };\n }\n onSelect(value) {\n <span class=\"hljs-built_in\">console</span>.log(value);\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Calendar</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">format</span>=<span class=\"hljs-value\">\"yyyy/MM/dd\"</span> <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{this.onSelect.bind(this)}</span> /&gt;</span>;</span>\n }\n\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-calendar-demo-formatter'));</span></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<p>提供 large、middle、small 三种尺寸</p>\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 &lt;Calendar value={this.state.value} onSelect={this.onSelect.bind(this)} /&gt;\n );\n return (\n &lt;div&gt;\n {['large', 'middle', 'small'].map(size =&gt; (\n &lt;div style={{ marginBottom: '4px' }}&gt;\n {React.cloneElement(calendar, { size })}\n &lt;/div&gt;\n ))}\n &lt;/div&gt;\n );\n }\n\n}\n\nReactDOM.render(\n &lt;Demo /&gt;\n, document.getElementById('components-calendar-demo-size'));</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<p>设置 <code>disabledDate</code> 方法,来确定不可选时段。</p>\n<p>如上例:不可选择今天之后的日期。</p>\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\"><span class=\"hljs-keyword\">import</span> { Calendar } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">disabledDate</span>(<span class=\"hljs-params\">current, value</span>) </span>{\n <span class=\"hljs-keyword\">return</span> current.getTime() &gt; <span class=\"hljs-built_in\">Date</span>.now();\n}\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: <span class=\"hljs-keyword\">new</span> <span class=\"hljs-built_in\">Date</span>().getTime(),\n };\n }\n onSelect(value) {\n <span class=\"hljs-built_in\">console</span>.log(value);\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Calendar</span> <span class=\"hljs-attribute\">disabledDate</span>=<span class=\"hljs-value\">{disabledDate}</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{this.onSelect.bind(this)}</span> /&gt;</span>;</span>\n }\n\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-calendar-demo-range'));</span></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<p>准确到秒的时间选择面板。</p>\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\"><span class=\"hljs-keyword\">import</span> { Calendar } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: <span class=\"hljs-string\">'2016-01-02'</span>,\n };\n }\n onSelect(value) {\n <span class=\"hljs-built_in\">console</span>.log(value);\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Calendar</span> <span class=\"hljs-attribute\">hasTrigger</span> <span class=\"hljs-attribute\">showTime</span> <span class=\"hljs-attribute\">format</span>=<span class=\"hljs-value\">\"yyyy-MM-dd HH:mm:ss\"</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{this.onSelect.bind(this)}</span> /&gt;</span>;</span>\n }\n\n}\n\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-calendar-demo-time'));</span></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<p>直接显示月份面板。</p>\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\"><span class=\"hljs-keyword\">import</span> { Calendar } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> MonthCalendar = Calendar.MonthCalendar;\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: <span class=\"hljs-string\">'2016-01-02'</span>,\n };\n }\n onSelect(value) {\n <span class=\"hljs-built_in\">console</span>.log(value);\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">MonthCalendar</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{this.onSelect.bind(this)}</span> /&gt;</span>;</span>\n }\n\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-calendar-demo-month'));</span></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<p>直接显示年份面板。</p>\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\"><span class=\"hljs-keyword\">import</span> { Calendar } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> YearCalendar = Calendar.YearCalendar;\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: <span class=\"hljs-string\">'2016-01-02'</span>,\n };\n }\n onSelect(value) {\n <span class=\"hljs-built_in\">console</span>.log(value);\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">YearCalendar</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{this.onSelect.bind(this)}</span> /&gt;</span>;</span>\n }\n\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-calendar-demo-year'));</span></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":"\n<p>Calendar 通过开放 contentRender 参数来完成日期渲染上的定制,并提供了一个默认的渲染函数 Calendar.util.generateContentRender(code) 来完成通用定制。</p>\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\"><span class=\"hljs-keyword\">import</span> { Calendar } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: <span class=\"hljs-string\">'2016-01-02'</span>,\n };\n }\n onSelect(value) {\n <span class=\"hljs-built_in\">console</span>.log(value);\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Calendar</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span>\n <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{this.onSelect.bind(this)}</span> <span class=\"hljs-attribute\">contentRender</span>=<span class=\"hljs-value\">{Calendar.util.generateContentRender({</span>\n '<span class=\"hljs-attribute\">2016-01-07</span>'<span class=\"hljs-attribute\">:</span> '<span class=\"hljs-attribute\">leave</span>',\n '<span class=\"hljs-attribute\">2016-01-09</span>'<span class=\"hljs-attribute\">:</span> '<span class=\"hljs-attribute\">work</span>',\n '<span class=\"hljs-attribute\">2016-01-08</span>'<span class=\"hljs-attribute\">:</span> '<span class=\"hljs-attribute\">schedule</span>',\n }, '<span class=\"hljs-attribute\">en</span>')}\n /&gt;</span>)</span>;\n }\n\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-calendar-demo-schedule'));</span></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<p>可以在输入框中直接修改时间。</p>\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\"><span class=\"hljs-keyword\">import</span> { Calendar } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: <span class=\"hljs-string\">'2016-01-02'</span>,\n };\n }\n onSelect(value) {\n <span class=\"hljs-built_in\">console</span>.log(value);\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Calendar</span> <span class=\"hljs-attribute\">locale</span>=<span class=\"hljs-value\">\"en-us\"</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{this.onSelect.bind(this)}</span> <span class=\"hljs-attribute\">showDateInput</span> /&gt;</span>;</span>\n }\n\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-calendar-demo-dateinput'));</span></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<p>我们推荐在只有年月日级联选择的情况下使用此面板,对于有时间选择的情况使用 Form 中提供的双输入框级联方式。</p>\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\"><span class=\"hljs-keyword\">import</span> { Calendar } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> { RangeCalendar } = Calendar;\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {};\n }\n\n onRangeSelect(value) {\n <span class=\"hljs-keyword\">this</span>.setState({\n rangeValue: value,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">RangeCalendar</span>\n <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.rangeValue}</span>\n <span class=\"hljs-attribute\">onSelect</span>=<span class=\"hljs-value\">{(v,</span> <span class=\"hljs-attribute\">formatted</span>) =&gt;</span> {\n console.log(v, formatted);\n this.onRangeSelect(v, formatted);\n }}\n /&gt;\n )</span>;\n }\n\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-calendar-demo-cascade'));</span></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'));

使用 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'));

提供 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'));

设置 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';

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'));

我们推荐在只有年月日级联选择的情况下使用此面板,对于有时间选择的情况使用 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'));

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

何时使用

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

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

Attention

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

props

参数 说明 类型 默认值 版本
value 日期 string
defaultValue 日期 string
placeholder placeholder文案 string 请选择日期
format 展示的日期格式 string 'YYYY-MM-DD'
locale en-us,zh-cnpl-pl string zh-cn
disabledDate 日期 function
onSelect 日期 function
showTime 日期 boolean false
showHour 日期面板是否显示小时 boolean true 0.6.3
showSecond 日期面板是否显示秒 boolean true 0.6.3
disabled 日期 boolean false
timePicker 自己传入定制的 timePicker React Element -
getPopupContainer 弹出的菜单渲染在哪个容器中 function(trigger:Node):Node function(){return document.body;}
yearSelectOffset 年选择器中第一个年份与当前选中值之间的距离,例如当前为 1997 年,距离为 50,则最早可选择年份为 1947 年 number 50 0.9.7
yearSelectTotal 年选择器中年份的总数,如最早可选为 1947 年,总数为 100,则可选年份范围为 1947 - 2047 number 100 0.9.7
size 尺寸,支持 large/middle/small string large 0.9.8

MonthCalendar

参数 说明 类型 默认值
value 日期 string
defaultValue 日期 string
placeholder placeholder文案 string 请选择日期
format 展示的日期格式 string 'yyyy-MM'
locale en-us,zh-cnpl-pl string zh-cn
onSelect 日期 function
disabled 日期 boolean false
getPopupContainer 弹出的菜单渲染在哪个容器中 function(trigger:Node):Node function(){return document.body;}

YearCalendar

参数 说明 类型 默认值
value 日期 string
defaultValue 日期 string
placeholder placeholder文案 string 请选择日期
format 展示的日期格式 string 'yyyy'
locale en-us,zh-cnpl-pl string zh-cn
onSelect 日期 function
disabled 日期 boolean false
getPopupContainer 弹出的菜单渲染在哪个容器中 function(trigger:Node):Node function(){return document.body;}

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