Custom week starts (0 for Sunday - 6 for Saturday)

iam4x · Mar 26, 2015 · 5a1ab05 · 5a1ab05
1 parent a625155
commit 5a1ab05
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/src/calendar.jsx b/src/calendar.jsx
@@ -16,6 +16,16 @@ var Calendar = React.createClass({
     };
   },
 
+  getDefaultProps: function() {
+    return {
+      weekStart: 1
+    };
+  },
+
+  componentWillMount: function() {
+    this.initializeMomentLocale();
+  },
+
   componentWillReceiveProps: function(nextProps) {
     // When the selected date changed
     if (nextProps.selected !== this.props.selected) {
@@ -25,6 +35,18 @@ var Calendar = React.createClass({
     }
   },
 
+  initializeMomentLocale: function() {
+    var weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    weekdays = weekdays.concat(weekdays.splice(0, this.props.weekStart));
+
+    moment.locale('en', {
+      week: {
+        dow: this.props.weekStart
+      },
+      weekdaysMin : weekdays
+    });
+  },
+
   increaseMonth: function() {
     this.setState({
       date: this.state.date.addMonth()
@@ -77,6 +99,12 @@ var Calendar = React.createClass({
     return weekStart.mapDaysInWeek(this.renderDay);
   },
 
+  header: function() {
+    return moment.weekdaysMin().map(function(day, key) {
+      return <div className="datepicker__day" key={key}>{day}</div>;
+    });
+  },
+
   render: function() {
     return (
       <div className="datepicker">
@@ -92,13 +120,7 @@ var Calendar = React.createClass({
               onClick={this.increaseMonth}>
           </a>
           <div>
-            <div className="datepicker__day">Mo</div>
-            <div className="datepicker__day">Tu</div>
-            <div className="datepicker__day">We</div>
-            <div className="datepicker__day">Th</div>
-            <div className="datepicker__day">Fr</div>
-            <div className="datepicker__day">Sa</div>
-            <div className="datepicker__day">Su</div>
+            {this.header()}
           </div>
         </div>
         <div className="datepicker__month">

diff --git a/src/datepicker.jsx b/src/datepicker.jsx
@@ -52,7 +52,8 @@ var DatePicker = React.createClass({
             onSelect={this.handleSelect}
             hideCalendar={this.hideCalendar}
             minDate={this.props.minDate}
-            maxDate={this.props.maxDate} />
+            maxDate={this.props.maxDate}
+            weekStart={this.props.weekStart} />
         </Popover>
       );
     }

diff --git a/src/util/date.js b/src/util/date.js
@@ -24,7 +24,7 @@ DateUtil.prototype.day = function() {
 
 DateUtil.prototype.mapDaysInWeek = function(callback) {
   var week = [];
-  var firstDay = this._date.clone().startOf('isoWeek');
+  var firstDay = this._date.clone();
 
   for(var i = 0; i < 7; i++) {
     var day = new DateUtil(firstDay.clone().add(i, 'days'));
@@ -37,7 +37,7 @@ DateUtil.prototype.mapDaysInWeek = function(callback) {
 
 DateUtil.prototype.mapWeeksInMonth = function(callback) {
   var month = [];
-  var firstDay = this._date.clone().startOf('month').startOf('isoWeek');
+  var firstDay = this._date.clone().startOf('month').startOf('week');
 
   for(var i = 0; i < 6; i++) {
     var weekStart = new DateUtil(firstDay.clone().add(i, 'weeks'));
@@ -50,7 +50,7 @@ DateUtil.prototype.mapWeeksInMonth = function(callback) {
 
 DateUtil.prototype.weekInMonth = function(other) {
   var firstDayInWeek = this._date.clone();
-  var lastDayInWeek = this._date.clone().isoWeekday(7);
+  var lastDayInWeek = this._date.clone().weekday(7);
 
   return firstDayInWeek.isSame(other._date, 'month') ||
     lastDayInWeek.isSame(other._date, 'month');