Merge pull request react-dates#371 from daltones/feat/first-weekday

Feature: add firstDayOfWeek prop

Author: majapw

README.md

@@ -105,6 +105,7 @@ withFullScreenPortal: PropTypes.bool,
 daySize: nonNegativeInteger,
 isRTL: PropTypes.bool,
 initialVisibleMonth: PropTypes.func,
+firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
 numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDates: PropTypes.bool,
@@ -171,6 +172,7 @@ horizontalMargin: PropTypes.number,
 withPortal: PropTypes.bool,
 withFullScreenPortal: PropTypes.bool,
 initialVisibleMonth: PropTypes.func,
+firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
 numberOfMonths: PropTypes.number,
 keepOpenOnDateSelect: PropTypes.bool,
 reopenPickerOnClearDate: PropTypes.bool,

constants.js

@@ -15,4 +15,5 @@ module.exports = {
 
   DAY_SIZE: 39,
   BLOCKED_MODIFIER: 'blocked',
+  WEEKDAYS: [0, 1, 2, 3, 4, 5, 6],
 };

src/components/CalendarMonth.jsx

@@ -18,6 +18,7 @@ import isSameDay from '../utils/isSameDay';
 import toISODateString from '../utils/toISODateString';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -38,6 +39,7 @@ const propTypes = forbidExtraProps({
   onDayMouseLeave: PropTypes.func,
   renderMonth: PropTypes.func,
   renderDay: PropTypes.func,
+  firstDayOfWeek: DayOfWeekShape,
 
   focusedDate: momentPropTypes.momentObj, // indicates focusable day
   isFocused: PropTypes.bool, // indicates whether or not to move focus to focusable day
@@ -59,6 +61,7 @@ const defaultProps = {
   onDayMouseLeave() {},
   renderMonth: null,
   renderDay: null,
+  firstDayOfWeek: null,
 
   focusedDate: null,
   isFocused: false,
@@ -71,16 +74,27 @@ const defaultProps = {
 export default class CalendarMonth extends React.Component {
   constructor(props) {
     super(props);
+
     this.state = {
-      weeks: getCalendarMonthWeeks(props.month, props.enableOutsideDays),
+      weeks: getCalendarMonthWeeks(
+        props.month,
+        props.enableOutsideDays,
+        props.firstDayOfWeek == null ? moment.localeData().firstDayOfWeek() : props.firstDayOfWeek,
+      ),
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    const { month, enableOutsideDays } = nextProps;
-    if (!month.isSame(this.props.month)) {
+    const { month, enableOutsideDays, firstDayOfWeek } = nextProps;
+    if (!month.isSame(this.props.month)
+        || enableOutsideDays !== this.props.enableOutsideDays
+        || firstDayOfWeek !== this.props.firstDayOfWeek) {
       this.setState({
-        weeks: getCalendarMonthWeeks(month, enableOutsideDays),
+        weeks: getCalendarMonthWeeks(
+          month,
+          enableOutsideDays,
+          firstDayOfWeek == null ? moment.localeData().firstDayOfWeek() : firstDayOfWeek,
+        ),
       });
     }
   }

src/components/CalendarMonthGrid.jsx

@@ -19,6 +19,7 @@ import toISOMonthString from '../utils/toISOMonthString';
 import isAfterDay from '../utils/isAfterDay';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -45,6 +46,7 @@ const propTypes = forbidExtraProps({
   daySize: nonNegativeInteger,
   focusedDate: momentPropTypes.momentObj, // indicates focusable day
   isFocused: PropTypes.bool, // indicates whether or not to move focus to focusable day
+  firstDayOfWeek: DayOfWeekShape,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -69,6 +71,7 @@ const defaultProps = {
   daySize: DAY_SIZE,
   focusedDate: null,
   isFocused: false,
+  firstDayOfWeek: null,
 
   // i18n
   monthFormat: 'MMMM YYYY', // english locale
@@ -175,6 +178,7 @@ export default class CalendarMonthGrid extends React.Component {
       renderMonth,
       renderDay,
       onMonthTransitionEnd,
+      firstDayOfWeek,
       focusedDate,
       isFocused,
       phrases,
@@ -228,6 +232,7 @@ export default class CalendarMonthGrid extends React.Component {
               onDayClick={onDayClick}
               renderMonth={renderMonth}
               renderDay={renderDay}
+              firstDayOfWeek={firstDayOfWeek}
               daySize={daySize}
               focusedDate={isVisible ? focusedDate : null}
               isFocused={isFocused}

src/components/DateRangePicker.jsx

@@ -70,6 +70,7 @@ const defaultProps = {
   hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
   isRTL: false,
+  firstDayOfWeek: null,
 
   // navigation related props
   navPrev: null,
@@ -305,6 +306,7 @@ export default class DateRangePicker extends React.Component {
       keepOpenOnDateSelect,
       renderDay,
       renderCalendarInfo,
+      firstDayOfWeek,
       initialVisibleMonth,
       hideKeyboardShortcutsPanel,
       customCloseIcon,
@@ -362,6 +364,7 @@ export default class DateRangePicker extends React.Component {
           onBlur={this.onDayPickerBlur}
           phrases={phrases}
           isRTL={isRTL}
+          firstDayOfWeek={firstDayOfWeek}
         />
 
         {withFullScreenPortal && (

src/components/DayPicker.jsx

@@ -26,6 +26,7 @@ import getActiveElement from '../utils/getActiveElement';
 import isDayVisible from '../utils/isDayVisible';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -48,6 +49,7 @@ const propTypes = forbidExtraProps({
   onOutsideClick: PropTypes.func,
   hidden: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
+  firstDayOfWeek: DayOfWeekShape,
   renderCalendarInfo: PropTypes.func,
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
@@ -90,6 +92,7 @@ export const defaultProps = {
   onOutsideClick() {},
   hidden: false,
   initialVisibleMonth: () => moment(),
+  firstDayOfWeek: null,
   renderCalendarInfo: null,
   hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
@@ -682,11 +685,16 @@ export default class DayPicker extends React.Component {
       style = verticalStyle;
     }
 
+    let { firstDayOfWeek } = this.props;
+    if (firstDayOfWeek == null) {
+      firstDayOfWeek = moment.localeData().firstDayOfWeek();
+    }
+
     const header = [];
     for (let i = 0; i < 7; i += 1) {
       header.push(
         <li key={i} style={{ width: daySize }}>
-          <small>{moment().weekday(i).format('dd')}</small>
+          <small>{moment().day((i + firstDayOfWeek) % 7).format('dd')}</small>
         </li>,
       );
     }
@@ -725,6 +733,7 @@ export default class DayPicker extends React.Component {
       onDayClick,
       onDayMouseEnter,
       onDayMouseLeave,
+      firstDayOfWeek,
       renderMonth,
       renderDay,
       renderCalendarInfo,
@@ -842,6 +851,7 @@ export default class DayPicker extends React.Component {
                 onMonthTransitionEnd={this.updateStateAfterMonthTransition}
                 monthFormat={monthFormat}
                 daySize={daySize}
+                firstDayOfWeek={firstDayOfWeek}
                 isFocused={shouldFocusDate}
                 focusedDate={focusedDate}
                 phrases={phrases}

src/components/DayPickerRangeController.jsx

@@ -23,6 +23,7 @@ import toISOMonthString from '../utils/toISOMonthString';
 
 import FocusedInputShape from '../shapes/FocusedInputShape';
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   START_DATE,
@@ -67,6 +68,7 @@ const propTypes = forbidExtraProps({
   onOutsideClick: PropTypes.func,
   renderDay: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
+  firstDayOfWeek: DayOfWeekShape,
 
   // accessibility
   onBlur: PropTypes.func,
@@ -114,6 +116,7 @@ const defaultProps = {
 
   renderDay: null,
   renderCalendarInfo: null,
+  firstDayOfWeek: null,
 
   // accessibility
   onBlur() {},
@@ -806,6 +809,7 @@ export default class DayPickerRangeController extends React.Component {
       onOutsideClick,
       withPortal,
       enableOutsideDays,
+      firstDayOfWeek,
       hideKeyboardShortcutsPanel,
       daySize,
       focusedInput,
@@ -843,6 +847,7 @@ export default class DayPickerRangeController extends React.Component {
         navNext={navNext}
         renderDay={renderDay}
         renderCalendarInfo={renderCalendarInfo}
+        firstDayOfWeek={firstDayOfWeek}
         hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
         isFocused={isFocused}
         getFirstFocusableDay={this.getFirstFocusableDay}

src/components/DayPickerSingleDateController.jsx

@@ -19,6 +19,7 @@ import toISODateString from '../utils/toISODateString';
 import toISOMonthString from '../utils/toISOMonthString';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -49,6 +50,7 @@ const propTypes = forbidExtraProps({
   orientation: ScrollableOrientationShape,
   withPortal: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
+  firstDayOfWeek: DayOfWeekShape,
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
 
@@ -95,6 +97,7 @@ const defaultProps = {
   withPortal: false,
   hideKeyboardShortcutsPanel: false,
   initialVisibleMonth: null,
+  firstDayOfWeek: null,
   daySize: DAY_SIZE,
 
   navPrev: null,
@@ -539,6 +542,7 @@ export default class DayPickerSingleDateController extends React.Component {
       enableOutsideDays,
       hideKeyboardShortcutsPanel,
       daySize,
+      firstDayOfWeek,
       renderDay,
       renderCalendarInfo,
       isFocused,
@@ -563,6 +567,7 @@ export default class DayPickerSingleDateController extends React.Component {
         hidden={!focused}
         hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
         initialVisibleMonth={() => currentMonth}
+        firstDayOfWeek={firstDayOfWeek}
         navPrev={navPrev}
         navNext={navNext}
         renderMonth={renderMonth}

src/components/SingleDatePicker.jsx

@@ -57,6 +57,7 @@ const defaultProps = {
   withPortal: false,
   withFullScreenPortal: false,
   initialVisibleMonth: null,
+  firstDayOfWeek: null,
   numberOfMonths: 2,
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDate: false,
@@ -315,6 +316,7 @@ export default class SingleDatePicker extends React.Component {
       renderDay,
       renderCalendarInfo,
       hideKeyboardShortcutsPanel,
+      firstDayOfWeek,
       customCloseIcon,
       phrases,
       daySize,
@@ -360,6 +362,7 @@ export default class SingleDatePicker extends React.Component {
           isOutsideRange={isOutsideRange}
           isDayBlocked={isDayBlocked}
           isDayHighlighted={isDayHighlighted}
+          firstDayOfWeek={firstDayOfWeek}
         />
 
         {withFullScreenPortal && (

src/shapes/DateRangePickerShape.js

@@ -8,6 +8,7 @@ import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import FocusedInputShape from '../shapes/FocusedInputShape';
 import OrientationShape from '../shapes/OrientationShape';
 import anchorDirectionShape from '../shapes/AnchorDirectionShape';
+import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 export default {
   // required props for a functional interactive DateRangePicker
@@ -44,7 +45,7 @@ export default {
   withFullScreenPortal: PropTypes.bool,
   daySize: nonNegativeInteger,
   isRTL: PropTypes.bool,
-
+  firstDayOfWeek: DayOfWeekShape,
   initialVisibleMonth: PropTypes.func,
   numberOfMonths: PropTypes.number,
   keepOpenOnDateSelect: PropTypes.bool,