diff --git a/__tests__/__snapshots__/input-moment.js.snap b/__tests__/__snapshots__/input-moment.js.snap index 0f140b7..2231822 100644 --- a/__tests__/__snapshots__/input-moment.js.snap +++ b/__tests__/__snapshots__/input-moment.js.snap @@ -302,50 +302,6 @@ exports[`render 1`] = ` 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - - - 8 - - diff --git a/example/app.js b/example/app.js index 406b3b2..589aef2 100644 --- a/example/app.js +++ b/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 => { diff --git a/package.json b/package.json index bf14e81..88ed0f8 100644 --- a/package.json +++ b/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", diff --git a/src/calendar.js b/src/calendar.js index 6b8071f..59fb3c1 100644 --- a/src/calendar.js +++ b/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 {i}; + return {weekDay}; }; 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 (
@@ -68,21 +70,29 @@ export default class Calendar extends Component { - {weeks.map((w, i) => )} + {weeks.map((day) => { + const dayName = day.format('ddd'); + return + })} - {chunk(days, 7).map((row, w) => - - {row.map(i => - this.selectDate(i, w)} - /> + {chunk(days, 7).map((row, weekNumber) => + + {row.map(momentWeekDay => { + const weekDay = +momentWeekDay.format('D'); + const selected = weekDay === date; + return ( + this.selectDate(weekDay, weekNumber)} + /> + ); + } )} )} diff --git a/yarn.lock b/yarn.lock index cdd7b13..576b528 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1395,6 +1395,12 @@ cssom@0.3.x, "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"
{w}{dayName}