locale support

__tests__/__snapshots__/input-moment.js.snap

@@ -302,50 +302,6 @@ exports[`render 1`] = `
               1
             </td>
           </tr>
-          <tr>
-            <td
-              className="next-month"
-              onClick={[Function]}
-            >
-              2
-            </td>
-            <td
-              className="next-month"
-              onClick={[Function]}
-            >
-              3
-            </td>
-            <td
-              className="next-month"
-              onClick={[Function]}
-            >
-              4
-            </td>
-            <td
-              className="next-month"
-              onClick={[Function]}
-            >
-              5
-            </td>
-            <td
-              className="next-month"
-              onClick={[Function]}
-            >
-              6
-            </td>
-            <td
-              className="next-month"
-              onClick={[Function]}
-            >
-              7
-            </td>
-            <td
-              className="next-month"
-              onClick={[Function]}
-            >
-              8
-            </td>
-          </tr>
         </tbody>
       </table>
     </div>

example/app.js

@@ -8,7 +8,8 @@ import packageJson from '../package.json';
 
 class App extends Component {
   state = {
-    m: moment()
+    m: moment().year(2018).month(7).date(8).hours(8).minutes(8).seconds(8)
+    // m: moment()
   };
 
   handleChange = m => {

package.json

@@ -50,7 +50,8 @@
   "dependencies": {
     "classnames": "^2.2.0",
     "lodash": "^4.17.4",
-    "react-input-slider": "^4.0.0"
+    "react-input-slider": "^4.0.0",
+    "moment-range": "^3.0.3"
   },
   "repository": {
     "type": "git",

src/calendar.js

@@ -1,32 +1,33 @@
-import moment from 'moment';
 import React, { Component } from 'react';
 import cx from 'classnames';
-import range from 'lodash/range';
 import chunk from 'lodash/chunk';
 
-const Day = ({ i, w, d, className, ...props }) => {
-  const prevMonth = w === 0 && i > 7;
-  const nextMonth = w >= 4 && i <= 14;
+import Moment from 'moment';
+import { extendMoment } from 'moment-range';
+const moment = extendMoment(Moment);
+
+const Day = ({ weekDay, weekNumber, selected, className, ...props }) => {
+  const prevMonth = weekNumber === 0 && weekDay > 7;
+  const nextMonth = weekNumber >= 4 && weekDay <= 14;
   const cls = cx({
     'prev-month': prevMonth,
     'next-month': nextMonth,
-    'current-day': !prevMonth && !nextMonth && i === d
+    'current-day': !prevMonth && !nextMonth && selected
   });
 
-  return <td className={cls} {...props}>{i}</td>;
+  return <td className={cls} {...props}>{weekDay}</td>;
 };
 
 export default class Calendar extends Component {
-  selectDate = (i, w) => {
-    const prevMonth = w === 0 && i > 7;
-    const nextMonth = w >= 4 && i <= 14;
+  selectDate = (weekDay, weekNumber) => {
+    const prevMonth = weekNumber === 0 && weekDay > 7;
+    const nextMonth = weekNumber >= 4 && weekDay <= 14;
     const m = this.props.moment;
 
+    m.date(weekDay);
     if (prevMonth) m.subtract(1, 'month');
     if (nextMonth) m.add(1, 'month');
 
-    m.date(i);
-
     this.props.onChange(m);
   };
 
@@ -42,16 +43,17 @@ export default class Calendar extends Component {
 
   render() {
     const m = this.props.moment;
-    const d = m.date();
-    const d1 = m.clone().subtract(1, 'month').endOf('month').date();
-    const d2 = m.clone().date(1).day();
-    const d3 = m.clone().endOf('month').date();
-    const days = [].concat(
-      range(d1 - d2 + 1, d1 + 1),
-      range(1, d3 + 1),
-      range(1, 42 - d3 - d2 + 1)
-    );
-    const weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    const date = m.date();
+
+    const monthStartWeekDay = m.clone().startOf('month').weekday();
+    const monthEndWeekDay = m.clone().endOf('month').weekday();
+    const dateStart = monthStartWeekDay === 0 ? m.clone().startOf('month') : m.clone().startOf('month').subtract(monthStartWeekDay, 'days');
+    const dateEnd = monthEndWeekDay === 6 ? m.clone().endOf('month') : m.clone().endOf('month').add(6-monthEndWeekDay, 'days');
+    const daysRange = moment.range(dateStart, dateEnd);
+
+    const days = Array.from(daysRange.by('day'));
+    const weekRange = moment.range(m.clone().startOf('week'), m.clone().endOf('week'));
+    const weeks = Array.from(weekRange.by('day'));
 
     return (
       <div className={cx('m-calendar', this.props.className)}>
@@ -68,21 +70,29 @@ export default class Calendar extends Component {
         <table>
           <thead>
             <tr>
-              {weeks.map((w, i) => <td key={i}>{w}</td>)}
+              {weeks.map((day) => { 
+                const dayName = day.format('ddd');
+                return <td key={dayName}>{dayName}</td>
+              })}
             </tr>
           </thead>
 
           <tbody>
-            {chunk(days, 7).map((row, w) =>
-              <tr key={w}>
-                {row.map(i =>
-                  <Day
-                    key={i}
-                    i={i}
-                    d={d}
-                    w={w}
-                    onClick={() => this.selectDate(i, w)}
-                  />
+            {chunk(days, 7).map((row, weekNumber) =>
+              <tr key={weekNumber}>
+                {row.map(momentWeekDay => {
+                  const weekDay = +momentWeekDay.format('D');
+                  const selected = weekDay === date;
+                  return (
+                    <Day
+                      key={weekDay}
+                      weekDay={weekDay}
+                      selected={selected}
+                      weekNumber={weekNumber}
+                      onClick={() => this.selectDate(weekDay, weekNumber)}
+                    />
+                  );
+                }
                 )}
               </tr>
             )}

yarn.lock

@@ -1395,6 +1395,12 @@ [email protected], "cssom@>= 0.3.2 < 0.4.0":
   dependencies:
     cssom "0.3.x"
 
+d@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  dependencies:
+    es5-ext "^0.10.9"
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -1527,6 +1533,28 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
+es5-ext@^0.10.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.23"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.23.tgz#7578b51be974207a5487821b56538c224e4e7b38"
+  dependencies:
+    es6-iterator "2"
+    es6-symbol "~3.1"
+
+es6-iterator@2:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.1.tgz#8e319c9f0453bf575d374940a655920e59ca5512"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.14"
+    es6-symbol "^3.1"
+
+es6-symbol@^3.1, es6-symbol@^3.1.0, es6-symbol@~3.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -2813,6 +2841,12 @@ minimist@^1.1.1, minimist@^1.2.0:
   dependencies:
     minimist "0.0.8"
 
+moment-range@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/moment-range/-/moment-range-3.0.3.tgz#f7a1567c73228f317469cb33148ea996f79ccb9a"
+  dependencies:
+    es6-symbol "^3.1.0"
+
 moment@^2.17.1:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"