Skip to content
This repository was archived by the owner on May 19, 2025. It is now read-only.

Commit 41e472a

Browse files
carlrosellcarlrosell
committed
Change first day of week through props.
Add ability to change first day of week through props.
1 parent eca944b commit 41e472a

File tree

6 files changed

+84
-53
lines changed

6 files changed

+84
-53
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ class MyComponent extends Component {
4444
###### Available Options (props)
4545
* **date:** *(String, Moment.js object, Function)* - default: today
4646
* **format:** *(String)* - default: DD/MM/YYY
47+
* **firstDayOfWeek** *(Number)* - default: [moment.localeData().firstDayOfWeek()](http://momentjs.com/docs/#/i18n/locale-data/)
4748
* **theme:** *(Object)* see [Demo's source](https://github.com/Adphorus/react-date-range/blob/master/demo/src/components/Main.js#L130)
4849
* **onInit:** *(Function)* default: none
4950
* **onChange:** *(Function)* default: none
@@ -77,6 +78,7 @@ class MyComponent extends Component {
7778
###### Available Options (props)
7879
* **date:** *(String, Moment.js object, Function)* - default: today
7980
* **format:** *(String)* - default: DD/MM/YYY
81+
* **firstDayOfWeek** *(Number)* - default: [moment.localeData().firstDayOfWeek()](http://momentjs.com/docs/#/i18n/locale-data/)
8082
* **theme:** *(Object)* see [Demo's source](https://github.com/Adphorus/react-date-range/blob/master/demo/src/components/Main.js#L130)
8183
* **onInit:** *(Function)* default: none
8284
* **onChange:** *(Function)* default: none

‎demo/src/components/Main.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default class Main extends Component {
1414
'rangePicker' : {},
1515
'linked' : {},
1616
'datePicker' : null,
17+
'firstDayOfWeek' : null,
1718
'predefined' : {},
1819
}
1920
}
@@ -25,7 +26,7 @@ export default class Main extends Component {
2526
}
2627

2728
render() {
28-
const { rangePicker, linked, datePicker, predefined } = this.state;
29+
const { rangePicker, linked, datePicker, firstDayOfWeek, predefined} = this.state;
2930
const format = 'dddd, D MMMM YYYY';
3031

3132
return (
@@ -98,6 +99,22 @@ export default class Main extends Component {
9899
/>
99100
</Section>
100101

102+
<Section title='Date Picker (Monday First)'>
103+
<div>
104+
<input
105+
type='text'
106+
readOnly
107+
value={ firstDayOfWeek && firstDayOfWeek.format(format).toString() }
108+
/>
109+
</div>
110+
<Calendar
111+
firstDayOfWeek={ 1 }
112+
date={ now => { return now.add(-4, 'days') } }
113+
onInit={ this.handleChange.bind(this, 'firstDayOfWeek') }
114+
onChange={ this.handleChange.bind(this, 'firstDayOfWeek') }
115+
/>
116+
</Section>
117+
101118
<Section title='Range Picker (Predefined Ranges)'>
102119
<div>
103120
<input

‎lib/Calendar.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,13 @@ var Calendar = (function (_Component) {
5959
var range = props.range;
6060
var theme = props.theme;
6161
var offset = props.offset;
62+
var firstDayOfWeek = props.firstDayOfWeek;
6263

6364
var date = (0, _utilsParseInputJs2['default'])(props.date, format);
64-
6565
var state = {
6666
date: date,
67-
shownDate: (range && range['endDate'] || date).clone().add(offset, 'months')
67+
shownDate: (range && range['endDate'] || date).clone().add(offset, 'months'),
68+
firstDayOfWeek: firstDayOfWeek || _moment2['default'].localeData().firstDayOfWeek()
6869
};
6970

7071
this.state = state;
@@ -172,7 +173,7 @@ var Calendar = (function (_Component) {
172173
}, {
173174
key: 'renderWeekdays',
174175
value: function renderWeekdays() {
175-
var dow = _moment2['default'].localeData().firstDayOfWeek();
176+
var dow = this.state.firstDayOfWeek;
176177
var weekdays = [];
177178
var styles = this.styles;
178179

@@ -198,13 +199,15 @@ var Calendar = (function (_Component) {
198199
var range = this.props.range;
199200

200201
var shownDate = this.getShownDate();
201-
var date = this.state.date;
202+
var _state = this.state;
203+
var date = _state.date;
204+
var firstDayOfWeek = _state.firstDayOfWeek;
202205

203206
var dateUnix = date.unix();
204207

205208
var monthNumber = shownDate.month();
206209
var dayCount = shownDate.daysInMonth();
207-
var startOfMonth = shownDate.clone().startOf('month').weekday();
210+
var startOfMonth = shownDate.clone().startOf('month').isoWeekday();
208211

209212
var lastMonth = shownDate.clone().month(monthNumber - 1);
210213
var lastMonthNumber = lastMonth.month();
@@ -216,8 +219,9 @@ var Calendar = (function (_Component) {
216219
var days = [];
217220

218221
// Previous month's days
219-
for (var i = startOfMonth; i >= 1; i--) {
220-
var dayMoment = lastMonth.clone().date(lastMonthDayCount + 1 - i);
222+
var diff = Math.abs(firstDayOfWeek - (startOfMonth + 7)) % 7;
223+
for (var i = diff; i >= 1; i--) {
224+
var dayMoment = lastMonth.clone().date(lastMonthDayCount - i);
221225
days.push({ dayMoment: dayMoment, isPassive: true });
222226
}
223227

@@ -295,6 +299,7 @@ Calendar.propTypes = {
295299
}),
296300
date: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.string, _react.PropTypes.func]),
297301
format: _react.PropTypes.string.isRequired,
302+
firstDayOfWeek: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
298303
onChange: _react.PropTypes.func,
299304
onInit: _react.PropTypes.func,
300305
link: _react.PropTypes.oneOfType([_react.PropTypes.shape({

‎lib/DateRange.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ var DateRange = (function (_Component) {
170170
var linkedCalendars = _props.linkedCalendars;
171171
var style = _props.style;
172172
var calendars = _props.calendars;
173+
var firstDayOfWeek = _props.firstDayOfWeek;
173174
var _state = this.state;
174175
var range = _state.range;
175176
var link = _state.link;
@@ -193,6 +194,7 @@ var DateRange = (function (_Component) {
193194
linkCB: _this.handleLinkChange.bind(_this),
194195
range: range,
195196
format: format,
197+
firstDayOfWeek: firstDayOfWeek,
196198
theme: styles,
197199
onChange: _this.handleSelect.bind(_this) }));
198200
}
@@ -214,6 +216,7 @@ DateRange.defaultProps = {
214216

215217
DateRange.propTypes = {
216218
format: _react.PropTypes.string,
219+
firstDayOfWeek: _react.PropTypes.number,
217220
calendars: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]),
218221
startDate: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
219222
endDate: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),

‎src/Calendar.js‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ class Calendar extends Component {
2525
constructor(props, context) {
2626
super(props, context);
2727

28-
const { format, range, theme, offset } = props;
28+
const { format, range, theme, offset, firstDayOfWeek } = props;
2929

3030
const date = parseInput(props.date, format)
31-
3231
const state = {
3332
date,
3433
shownDate : (range && range['endDate'] || date).clone().add(offset, 'months'),
34+
firstDayOfWeek: (firstDayOfWeek || moment.localeData().firstDayOfWeek()),
3535
}
3636

3737
this.state = state;
@@ -107,7 +107,7 @@ class Calendar extends Component {
107107
}
108108

109109
renderWeekdays() {
110-
const dow = moment.localeData().firstDayOfWeek();
110+
const dow = this.state.firstDayOfWeek;
111111
const weekdays = [];
112112
const { styles } = this;
113113

@@ -124,30 +124,31 @@ class Calendar extends Component {
124124

125125
renderDays() {
126126
// TODO: Split this logic into smaller chunks
127-
const { styles } = this;
127+
const { styles } = this;
128128

129-
const { range } = this.props;
129+
const { range } = this.props;
130130

131-
const shownDate = this.getShownDate();
132-
const { date } = this.state;
133-
const dateUnix = date.unix();
131+
const shownDate = this.getShownDate();
132+
const { date, firstDayOfWeek } = this.state;
133+
const dateUnix = date.unix();
134134

135-
const monthNumber = shownDate.month();
136-
const dayCount = shownDate.daysInMonth();
137-
const startOfMonth = shownDate.clone().startOf('month').weekday();
135+
const monthNumber = shownDate.month();
136+
const dayCount = shownDate.daysInMonth();
137+
const startOfMonth = shownDate.clone().startOf('month').isoWeekday();
138138

139-
const lastMonth = shownDate.clone().month(monthNumber - 1);
140-
const lastMonthNumber = lastMonth.month();
141-
const lastMonthDayCount = lastMonth.daysInMonth();
139+
const lastMonth = shownDate.clone().month(monthNumber - 1);
140+
const lastMonthNumber = lastMonth.month();
141+
const lastMonthDayCount = lastMonth.daysInMonth();
142142

143-
const nextMonth = shownDate.clone().month(monthNumber + 1);
144-
const nextMonthNumber = nextMonth.month();
143+
const nextMonth = shownDate.clone().month(monthNumber + 1);
144+
const nextMonthNumber = nextMonth.month();
145145

146-
const days = [];
146+
const days = [];
147147

148148
// Previous month's days
149-
for (let i = startOfMonth; i >= 1; i--) {
150-
const dayMoment = lastMonth.clone().date(lastMonthDayCount + 1 - i);
149+
const diff = (Math.abs(firstDayOfWeek - (startOfMonth + 7)) % 7);
150+
for (let i = diff; i >= 1; i--) {
151+
const dayMoment = lastMonth.clone().date(lastMonthDayCount - i);
151152
days.push({ dayMoment, isPassive : true });
152153
}
153154

@@ -202,21 +203,22 @@ Calendar.defaultProps = {
202203
}
203204

204205
Calendar.propTypes = {
205-
sets : PropTypes.string,
206-
range : PropTypes.shape({
207-
startDate : PropTypes.object,
208-
endDate : PropTypes.object
206+
sets : PropTypes.string,
207+
range : PropTypes.shape({
208+
startDate : PropTypes.object,
209+
endDate : PropTypes.object
209210
}),
210-
date : PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
211-
format : PropTypes.string.isRequired,
212-
onChange : PropTypes.func,
213-
onInit : PropTypes.func,
214-
link : PropTypes.oneOfType([PropTypes.shape({
215-
startDate : PropTypes.object,
216-
endDate : PropTypes.object,
211+
date : PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
212+
format : PropTypes.string.isRequired,
213+
firstDayOfWeek : PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
214+
onChange : PropTypes.func,
215+
onInit : PropTypes.func,
216+
link : PropTypes.oneOfType([PropTypes.shape({
217+
startDate : PropTypes.object,
218+
endDate : PropTypes.object,
217219
}), PropTypes.bool]),
218-
linkCB : PropTypes.func,
219-
theme : PropTypes.object,
220+
linkCB : PropTypes.func,
221+
theme : PropTypes.object,
220222
}
221223

222224
export default Calendar;

‎src/DateRange.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ class DateRange extends Component {
8888
link : link.clone().add(direction, 'months')
8989
});
9090
}
91-
91+
9292
componentWillReceiveProps(newProps) {
9393
// Whenever date props changes, update state with parsed variant
9494
if (newProps.startDate || newProps.endDate) {
@@ -108,7 +108,7 @@ class DateRange extends Component {
108108
}
109109

110110
render() {
111-
const { ranges, format, linkedCalendars, style, calendars } = this.props;
111+
const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek } = this.props;
112112
const { range, link } = this.state;
113113
const { styles } = this;
114114

@@ -133,6 +133,7 @@ class DateRange extends Component {
133133
linkCB={ this.handleLinkChange.bind(this) }
134134
range={ range }
135135
format={ format }
136+
firstDayOfWeek={ firstDayOfWeek }
136137
theme={ styles }
137138
onChange={ this.handleSelect.bind(this) } />
138139
);
@@ -152,18 +153,19 @@ DateRange.defaultProps = {
152153
}
153154

154155
DateRange.propTypes = {
155-
format : PropTypes.string,
156-
calendars : PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
157-
startDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
158-
endDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
159-
minDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
160-
maxDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
161-
dateLimit : PropTypes.func,
162-
ranges : PropTypes.object,
156+
format : PropTypes.string,
157+
firstDayOfWeek : PropTypes.number,
158+
calendars : PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
159+
startDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
160+
endDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
161+
minDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
162+
maxDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
163+
dateLimit : PropTypes.func,
164+
ranges : PropTypes.object,
163165
linkedCalendars : PropTypes.bool,
164-
theme : PropTypes.object,
165-
onInit : PropTypes.func,
166-
onChange : PropTypes.func,
166+
theme : PropTypes.object,
167+
onInit : PropTypes.func,
168+
onChange : PropTypes.func,
167169
}
168170

169171
export default DateRange;

0 commit comments

Comments
 (0)