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

Change first day of week through props. #9

Merged
merged 1 commit into from
Oct 27, 2015
Merged

Change first day of week through props. #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ class MyComponent extends Component {
###### Available Options (props)
* **date:** *(String, Moment.js object, Function)* - default: today
* **format:** *(String)* - default: DD/MM/YYY
* **firstDayOfWeek** *(Number)* - default: [moment.localeData().firstDayOfWeek()](http://momentjs.com/docs/#/i18n/locale-data/)
* **theme:** *(Object)* see [Demo's source](https://github.com/Adphorus/react-date-range/blob/master/demo/src/components/Main.js#L130)
* **onInit:** *(Function)* default: none
* **onChange:** *(Function)* default: none
Expand Down Expand Up @@ -77,6 +78,7 @@ class MyComponent extends Component {
###### Available Options (props)
* **date:** *(String, Moment.js object, Function)* - default: today
* **format:** *(String)* - default: DD/MM/YYY
* **firstDayOfWeek** *(Number)* - default: [moment.localeData().firstDayOfWeek()](http://momentjs.com/docs/#/i18n/locale-data/)
* **theme:** *(Object)* see [Demo's source](https://github.com/Adphorus/react-date-range/blob/master/demo/src/components/Main.js#L130)
* **onInit:** *(Function)* default: none
* **onChange:** *(Function)* default: none
Expand Down
19 changes: 18 additions & 1 deletion demo/src/components/Main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default class Main extends Component {
'rangePicker' : {},
'linked' : {},
'datePicker' : null,
'firstDayOfWeek' : null,
'predefined' : {},
}
}
Expand All @@ -25,7 +26,7 @@ export default class Main extends Component {
}

render() {
const { rangePicker, linked, datePicker, predefined } = this.state;
const { rangePicker, linked, datePicker, firstDayOfWeek, predefined} = this.state;
const format = 'dddd, D MMMM YYYY';

return (
Expand Down Expand Up @@ -98,6 +99,22 @@ export default class Main extends Component {
/>
</Section>

<Section title='Date Picker (Monday First)'>
<div>
<input
type='text'
readOnly
value={ firstDayOfWeek && firstDayOfWeek.format(format).toString() }
/>
</div>
<Calendar
firstDayOfWeek={ 1 }
date={ now => { return now.add(-4, 'days') } }
onInit={ this.handleChange.bind(this, 'firstDayOfWeek') }
onChange={ this.handleChange.bind(this, 'firstDayOfWeek') }
/>
</Section>

<Section title='Range Picker (Predefined Ranges)'>
<div>
<input
Expand Down
19 changes: 12 additions & 7 deletions lib/Calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,13 @@ var Calendar = (function (_Component) {
var range = props.range;
var theme = props.theme;
var offset = props.offset;
var firstDayOfWeek = props.firstDayOfWeek;

var date = (0, _utilsParseInputJs2['default'])(props.date, format);

var state = {
date: date,
shownDate: (range && range['endDate'] || date).clone().add(offset, 'months')
shownDate: (range && range['endDate'] || date).clone().add(offset, 'months'),
firstDayOfWeek: firstDayOfWeek || _moment2['default'].localeData().firstDayOfWeek()
};

this.state = state;
Expand Down Expand Up @@ -172,7 +173,7 @@ var Calendar = (function (_Component) {
}, {
key: 'renderWeekdays',
value: function renderWeekdays() {
var dow = _moment2['default'].localeData().firstDayOfWeek();
var dow = this.state.firstDayOfWeek;
var weekdays = [];
var styles = this.styles;

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

var shownDate = this.getShownDate();
var date = this.state.date;
var _state = this.state;
var date = _state.date;
var firstDayOfWeek = _state.firstDayOfWeek;

var dateUnix = date.unix();

var monthNumber = shownDate.month();
var dayCount = shownDate.daysInMonth();
var startOfMonth = shownDate.clone().startOf('month').weekday();
var startOfMonth = shownDate.clone().startOf('month').isoWeekday();

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

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

Expand Down Expand Up @@ -295,6 +299,7 @@ Calendar.propTypes = {
}),
date: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.string, _react.PropTypes.func]),
format: _react.PropTypes.string.isRequired,
firstDayOfWeek: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
onChange: _react.PropTypes.func,
onInit: _react.PropTypes.func,
link: _react.PropTypes.oneOfType([_react.PropTypes.shape({
Expand Down
3 changes: 3 additions & 0 deletions lib/DateRange.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ var DateRange = (function (_Component) {
var linkedCalendars = _props.linkedCalendars;
var style = _props.style;
var calendars = _props.calendars;
var firstDayOfWeek = _props.firstDayOfWeek;
var _state = this.state;
var range = _state.range;
var link = _state.link;
Expand All @@ -193,6 +194,7 @@ var DateRange = (function (_Component) {
linkCB: _this.handleLinkChange.bind(_this),
range: range,
format: format,
firstDayOfWeek: firstDayOfWeek,
theme: styles,
onChange: _this.handleSelect.bind(_this) }));
}
Expand All @@ -214,6 +216,7 @@ DateRange.defaultProps = {

DateRange.propTypes = {
format: _react.PropTypes.string,
firstDayOfWeek: _react.PropTypes.number,
calendars: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]),
startDate: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
endDate: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
Expand Down
66 changes: 34 additions & 32 deletions src/Calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ class Calendar extends Component {
constructor(props, context) {
super(props, context);

const { format, range, theme, offset } = props;
const { format, range, theme, offset, firstDayOfWeek } = props;

const date = parseInput(props.date, format)

const state = {
date,
shownDate : (range && range['endDate'] || date).clone().add(offset, 'months'),
firstDayOfWeek: (firstDayOfWeek || moment.localeData().firstDayOfWeek()),
}

this.state = state;
Expand Down Expand Up @@ -107,7 +107,7 @@ class Calendar extends Component {
}

renderWeekdays() {
const dow = moment.localeData().firstDayOfWeek();
const dow = this.state.firstDayOfWeek;
const weekdays = [];
const { styles } = this;

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

renderDays() {
// TODO: Split this logic into smaller chunks
const { styles } = this;
const { styles } = this;

const { range } = this.props;
const { range } = this.props;

const shownDate = this.getShownDate();
const { date } = this.state;
const dateUnix = date.unix();
const shownDate = this.getShownDate();
const { date, firstDayOfWeek } = this.state;
const dateUnix = date.unix();

const monthNumber = shownDate.month();
const dayCount = shownDate.daysInMonth();
const startOfMonth = shownDate.clone().startOf('month').weekday();
const monthNumber = shownDate.month();
const dayCount = shownDate.daysInMonth();
const startOfMonth = shownDate.clone().startOf('month').isoWeekday();

const lastMonth = shownDate.clone().month(monthNumber - 1);
const lastMonthNumber = lastMonth.month();
const lastMonthDayCount = lastMonth.daysInMonth();
const lastMonth = shownDate.clone().month(monthNumber - 1);
const lastMonthNumber = lastMonth.month();
const lastMonthDayCount = lastMonth.daysInMonth();

const nextMonth = shownDate.clone().month(monthNumber + 1);
const nextMonthNumber = nextMonth.month();
const nextMonth = shownDate.clone().month(monthNumber + 1);
const nextMonthNumber = nextMonth.month();

const days = [];
const days = [];

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

Expand Down Expand Up @@ -202,21 +203,22 @@ Calendar.defaultProps = {
}

Calendar.propTypes = {
sets : PropTypes.string,
range : PropTypes.shape({
startDate : PropTypes.object,
endDate : PropTypes.object
sets : PropTypes.string,
range : PropTypes.shape({
startDate : PropTypes.object,
endDate : PropTypes.object
}),
date : PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
format : PropTypes.string.isRequired,
onChange : PropTypes.func,
onInit : PropTypes.func,
link : PropTypes.oneOfType([PropTypes.shape({
startDate : PropTypes.object,
endDate : PropTypes.object,
date : PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
format : PropTypes.string.isRequired,
firstDayOfWeek : PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
onChange : PropTypes.func,
onInit : PropTypes.func,
link : PropTypes.oneOfType([PropTypes.shape({
startDate : PropTypes.object,
endDate : PropTypes.object,
}), PropTypes.bool]),
linkCB : PropTypes.func,
theme : PropTypes.object,
linkCB : PropTypes.func,
theme : PropTypes.object,
}

export default Calendar;
28 changes: 15 additions & 13 deletions src/DateRange.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ class DateRange extends Component {
link : link.clone().add(direction, 'months')
});
}

componentWillReceiveProps(newProps) {
// Whenever date props changes, update state with parsed variant
if (newProps.startDate || newProps.endDate) {
Expand All @@ -108,7 +108,7 @@ class DateRange extends Component {
}

render() {
const { ranges, format, linkedCalendars, style, calendars } = this.props;
const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek } = this.props;
const { range, link } = this.state;
const { styles } = this;

Expand All @@ -133,6 +133,7 @@ class DateRange extends Component {
linkCB={ this.handleLinkChange.bind(this) }
range={ range }
format={ format }
firstDayOfWeek={ firstDayOfWeek }
theme={ styles }
onChange={ this.handleSelect.bind(this) } />
);
Expand All @@ -152,18 +153,19 @@ DateRange.defaultProps = {
}

DateRange.propTypes = {
format : PropTypes.string,
calendars : PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
startDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
endDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
minDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
maxDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
dateLimit : PropTypes.func,
ranges : PropTypes.object,
format : PropTypes.string,
firstDayOfWeek : PropTypes.number,
calendars : PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
startDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
endDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
minDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
maxDate : PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
dateLimit : PropTypes.func,
ranges : PropTypes.object,
linkedCalendars : PropTypes.bool,
theme : PropTypes.object,
onInit : PropTypes.func,
onChange : PropTypes.func,
theme : PropTypes.object,
onInit : PropTypes.func,
onChange : PropTypes.func,
}

export default DateRange;