Merge branch 'master' of https://github.com/wojtekmaj/react-calendar

build/Flex.js

@@ -18,6 +18,10 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var toPercent = function toPercent(num) {
+  return Math.floor(100 * num) / 100 + '%';
+};
+
 var Flex = function Flex(_ref) {
   var children = _ref.children,
       className = _ref.className,
@@ -39,9 +43,9 @@ var Flex = function Flex(_ref) {
         {
           style: (0, _assign2.default)({
             display: 'flex',
-            flexBasis: 'calc(100% / ' + count + ')'
+            flexBasis: toPercent(100 / count)
           }, offset && index === 0 && {
-            marginLeft: 'calc(100% * ' + offset + ' / ' + count + ')'
+            marginLeft: toPercent(100 * offset / count)
           })
         },
         child

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar",
-  "version": "0.8.0-alpha",
+  "version": "0.8.1-alpha",
   "description": "Ultimate date picker for your React application.",
   "main": "build/entry.js",
   "es6": "src/entry.js",

sample/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-sample-page",
-  "version": "0.8.0-alpha",
+  "version": "0.8.1-alpha",
   "description": "A sample page for React-Calendar.",
   "scripts": {
     "build": "webpack"

src/Flex.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+const toPercent = num => `${Math.floor(100 * num) / 100}%`;
+
 const Flex = ({ children, className, count, offset, wrap }) => (
   <div
     className={className}
@@ -14,10 +16,10 @@ const Flex = ({ children, className, count, offset, wrap }) => (
         style={Object.assign(
           {
             display: 'flex',
-            flexBasis: `calc(100% / ${count})`,
+            flexBasis: toPercent(100 / count),
           },
           offset && (index === 0) && {
-            marginLeft: `calc(100% * ${offset} / ${count})`,
+            marginLeft: toPercent((100 * offset) / count),
           },
         )}
       >

test/Test.jsx

@@ -13,17 +13,19 @@ import { formatDate } from '../src/shared/dateFormatter';
 
 import './Test.less';
 
+const now = new Date();
+
 export default class Test extends Component {
   state = {
     locale: null,
-    maxDate: new Date(2017, 8, 15, 12),
+    maxDate: new Date(now.getUTCFullYear(), now.getUTCMonth() + 1, 15, 12),
     maxDetail: 'month',
-    minDate: new Date(1995, 7, 15, 12),
+    minDate: new Date(1995, now.getUTCMonth() + 1, 15, 12),
     minDetail: 'century',
     returnValue: 'start',
     showNeighboringMonth: false,
     showWeekNumbers: false,
-    value: new Date(),
+    value: now,
   }
 
   onChange = value => this.setState({ value })
@@ -45,7 +47,7 @@ export default class Test extends Component {
     }
 
     return (
-      <p>Chosen date: {renderDate(value)}</p>
+      <p>Chosen date: {value ? renderDate(value) : '(none)'}</p>
     );
   }
 

test/ValueOptions.jsx

@@ -15,14 +15,12 @@ export default class ValueOptions extends Component {
     return [].concat(value)[1];
   }
 
+  setValue = value => this.props.setState({ value });
+
   onChange = (event) => {
     const { value } = event.target;
 
-    if (!value) {
-      return;
-    }
-
-    this.props.setState({ value: new Date(value) });
+    this.setValue(new Date(value));
   }
 
   render() {
@@ -35,8 +33,9 @@ export default class ValueOptions extends Component {
           <input
             onChange={this.onChange}
             type="date"
-            value={getISOLocalDate(this.startDate)}
-          />
+            value={this.startDate ? getISOLocalDate(this.startDate) : ''}
+          />&nbsp;
+          <button onClick={() => this.setValue(null)}>Clear</button>
         </div>
       </fieldset>
     );

test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-test-page",
-  "version": "0.8.0-alpha",
+  "version": "0.8.1-alpha",
   "description": "A test page for React-Calendar.",
   "scripts": {
     "build": "webpack",