Adjust calendar UI so week starts on Monday

closes #128 Required an upgrade of react-dates, to include react-dates/react-dates#371
opentraffic · Sep 28, 2017 · 2e9da31 · 2e9da31
1 parent 962da8e
commit 2e9da31
Show file tree

Hide file tree

Showing 3 changed files with 485 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "react": "15.6.1",
     "react-addons-shallow-compare": "15.6.0",
     "react-autosuggest": "9.3.1",
-    "react-dates": "12.2.3",
+    "react-dates": "12.3.0",
     "react-dom": "15.6.1",
     "react-leaflet": "1.3.1",
     "react-redux": "5.0.5",

diff --git a/src/components/Sidebar/DatePicker/index.js b/src/components/Sidebar/DatePicker/index.js
@@ -29,8 +29,8 @@ class DatePicker extends React.Component {
 
     // also here is where we enforce the selection of one week (7 days)
     if (date.startDate instanceof (moment)) {
-      start = date.startDate.startOf('week').valueOf()
-      end = date.startDate.endOf('week').valueOf()
+      start = date.startDate.startOf('isoWeek').valueOf()
+      end = date.startDate.endOf('isoWeek').valueOf()
     } else {
       start = null
       end = null
@@ -63,6 +63,7 @@ class DatePicker extends React.Component {
           startDate={changeUnixToMoment(start)}  // momentPropTypes.momentObj or null,
           endDate={changeUnixToMoment(end)} // momentPropTypes.momentObj or null,
           numberOfMonths={1}
+          firstDayOfWeek={1}
           isOutsideRange={day => !isInclusivelyBeforeDay(day, today)}
           onDatesChange={this.handleDateChange}
           showClearDates